Floating Action

Floating Action

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jul 6, 2017 By: Kony Team
1064 1 0 70
A floating action represents/promotes the primary action in an application. It is essentially a circular button floating over the UI. When pressed, it may present more related actions.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features

  • Promote your app's primary actions
  • Add upto 5 floating actions
  • Select from 3 prebuilt animations
  • Customize UI with your own icons and text
  • Option to set background overlay

Prerequisites

  • Kony Visualizer v8

The Floating Action component is a customized template that contains a floating action button (Primary Button). The Primary Button represents the primary action in an application. The behavior of the component is: when a user clicks or taps the Primary Button, a list of five menu items is displayed. Each menu item performs an action. You can use the properties to configure the number of menu items that are displayed in the list. You can also add a Floating Action component dynamically.

The following figures illustrate the functionality of the Floating Action component.

floatingaction_flow.png

When a user clicks the Primary Button a list of Menu Items is displayed.

Here is a use case that describes the use of the Floating Action component.

Use Case

Consider a case that you are developing an email application that allows users to perform actions, such as compose, send, receive, and read emails. Using the Floating Action component, you can add a primary button in the app. When a user taps the primary button, a screen appears where the user can compose an email. The component helps the user to navigate directly to the desired screen in the emails list on single click of the primary button instead of multiple clicks. This is one of the use cases of the Floating Action component. But you can add multiple menu items to display when the primary button is clicked to perform multiple actions.

You can import the Floating Action component into your app (created in Kony Visualizer) and make use of its features. The Floating Action component also facilitates a set of properties and events that helps you customize the fields and the functionality.

The following sections help you use the Floating Action component in your app:

Prerequisites

Before you start using the Floating Action component, ensure you have the following:

  1. Kony account
  2. Kony Visualizer Enterprise V8

Importing the Floating Action Component

Before you import the component to Kony Visualizer, you must download the component from the Kony Marketplace website.

You can import the marketplace components only into the apps that are of the Kony Reference Architecture type.

To Import the Floating Action component, do the following:

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    floatingaction_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name.
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.floatingaction name is displayed by default. If you want, you can rename it.

When you import a component, the component will be imported to Visualizer's workspace, but not directly into your app. Thus, after you import a component, you must add the component to your app.

Adding the Floating Action Component to your App

You can add the Floating Action component to the FlexForms, FlexContainer, and FlexScrollContainer widgets.

To add the Floating Action component, do the following:

  1. Open your app, and then open the form to which you want to add the component.
  2. On the My Libraries tab, select the defined Marketplace library from the drop-down list in which the component exists.
    library.png
  3. From the Collections sub-tab, drag the component onto the form on the Visualizer canvas. The component is added to the form. You can also see a new element, com.konymp.floatingaction in the Components section on the Templates tab.

After adding a component to a form, you can configure the component the way you require by using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer to Button Widget.

You can also see that a new tab, Component, is added on the Properties pane. The Component tab contains assorted properties relevant to the component that allow you to customize the component as required.

Note:

The zIndex of the floating action component need to be greater than other widgets on the screen.
Do not change the animationType after adding the component dynamically.

Do not change the height and width of the component. The change in height and width may distort the UI.

To add a Floating Action component dynamically, do the following:

  1. In the Project Explorer, on the Projects tab, click Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below.

    /* creating a component's Object */
    var floatingAction = new com.konymp.floatingaction(
    {
    	"clipBounds": true,
    	"id": "floatingAction",
    	"isVisible": true,
    	"centerX": "88%",
    	"centerY": "91%",
    	"zIndex": 1
    }, {}, {});
    floatingAction.height = "79px";
    floatingAction.width = "79px";
    floatingAction.isVisibleMenuItem1 = true;
    floatingAction.isVisibleMenuItem2 = true;
    floatingAction.isVisibleMenuItem3 = true;
    floatingAction.isVisibleMenuItem4 = false;
    floatingAction.isVisibleMenuItem5 = false;
    floatingAction.imgBGOverlaySrc = "konymp_fa_fade.png";
    floatingAction.menuItem1BGSrc = "konymp_fa_itemiconbg.png";
    floatingAction.menuItem1IconSrc = "konymp_fa_itempen.png";
    floatingAction.menuItem1Text = "Add a Contact";
    floatingAction.menuItem2BGSrc = "konymp_fa_itemiconbg.png";
    floatingAction.menuItem2IconSrc = "konymp_fa_itemstar.png";
    floatingAction.menuItem2Text = "Favourite";
    floatingAction.menuItem3BGSrc = "konymp_fa_itemiconbg.png";
    floatingAction.menuItem3IconSrc = "konymp_fa_itemprofile.png";
    floatingAction.menuItem3Text = "Call History";
    floatingAction.enableOverlay = true;
    floatingAction.menuItemType = "Image and Text";
    floatingAction.animationType = "Default";
    floatingAction.onClickMenuItem1 = function()
    {
    	alert("Item 1 Clicked");
    };
    floatingAction.onClickMenuItem2 = function()
    {
    	alert("Item 2 Clicked");
    };
    floatingAction.onClickMenuItem3 = function()
    {
    	alert("Item 3 Clicked");
    };
    this.view.add(floatingAction);
    
Note:

The visibility of menu items must be applied in a sequential order.
For example: If Menu Items 1, 2 and 5 are made visible, the menu items 1 and 2 only will appear in the animation.

In the code snippet, you can edit the properties of the component as per your requirement. For more information, see Setting Properties.

Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the Floating Action component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information on how to set the properties by writing a JavaScript.

General

Menu Item Fields
Description: Specifies the type of the menu items
  • Image and Text: Menu Items will have both image and text.
  • Only Image: Menu Items will have only image.
Syntax: menuItemType
Type: List Selector
Read/Write: Read + Write
Remarks

The default value of the property is "Only Image".

Example:
this.view.componentID.menuItemType= "Only Image";
Animation Type
Description: Specifies the animation type of the menu items.
  • Rise : Menu items move up from the bottom.
  • Slide In: Menu items move in from right.
  • Default: Menu items appear with default animation.
Syntax: animationType
Type: List Selector
Read/Write: Read + Write
Remarks

The property requires a String value. You must handle the exceptions if you provide an invalid value.

Example:
this.view.componentID.animationType = “Default”;
Enable Background Overlay
Description: Controls the visibility of the background overlay.
Syntax: enableOverlay
Type: Boolean
Read/Write: Read + Write
Remarks

The property requires a Boolean value. You must handle the exceptions if you provide an invalid value.

Example:
this.view.componentID.enableOverlay = true;
Background Overlay Image
Description: Specifies the name of the image to be set as the background overlay.
Syntax: imgBGOverlaySrc
Type: String
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.imgBGOverlaySrc = "fade.png";

Primary Button Properties

Background Image
Description: Specifies the file name of the image to be set as the background for the Primary Button.
Syntax: primaryButtonBGSrc
Type: String
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.primaryButtonBGSrc= "bg.png";
Icon
Description: Specifies the file name of the image to be set as the Primary Button icon.
Syntax: imgPrimaryIcon
Type: String
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.imgPrimaryIcon= "icon_plus.png";

Menu Item 1 Properties

Visibility
Description: Controls the visibility of Menu item 1.
Syntax: isVisibleMenuItem1
Type: Boolean
Read/Write: Read + Write
Remarks

The default value of the property is true.

Example:
this.view.componentID.isVisibleMenuItem1 = true;
Background Image
Description: Specifies the file name of the image to be set as the background of Menu item 1.
Syntax: menuItem1BGSrc
Type: Image
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.menuItem1BGSrc = "itemiconbg.png";
Icon
Description: Specifies the file name of the image to be set as the Menu item 1 icon.
Syntax: menuItem1IconSrc
Type: Image
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.menuItem1IconSrc = "itempen.png";
Text
Description: Specifies the text to be displayed on the label of Menu item 1.
Syntax: menuItem1Text
Type: String
Read/Write: Read + Write
Remarks

The default value of the property is "Label".

Example:
this.view.componentID.menuItem1Text = "Label";

Menu Item 2 Properties

Visibility
Description: Controls the visibility of Menu item 2.
Syntax: isVisibleMenuItem2
Type: Boolean
Read/Write: Read + Write
Remarks

The default value of the property is true.

Example:
this.view.componentID.isVisibleMenuItem2 = true;
Background Image
Description: Specifies the file name of the image to be set as the background of Menu item 2.
Syntax: menuItem2BGSrc
Type: Image
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.menuItem2BGSrc = "itemiconbg.png";
Icon
Description: Specifies the file name of the image to be set as the Menu item 2 icon.
Syntax: menuItem2IconSrc
Type: Image
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.menuItem2IconSrc = "itemstar.png";
Text
Description: Specifies the text to be displayed on the label of Menu item 2.
Syntax: menuItem2Text
Type: String
Read/Write: Read + Write
Remarks

The default value of the property is "Label".

Example:
this.view.componentID.menuItem2Text = "Label";

Menu Item 3 Properties

Visibility
Description: Controls the visibility of Menu item 3.
Syntax: isVisibleMenuItem3
Type: Boolean
Read/Write: Read + Write
Remarks

The default value of the property is true.

Example:
this.view.componentID.isVisibleMenuItem3 = true;
Background Image
Description: Specifies the file name of the image to be set as the background of Menu item 3.
Syntax: menuItem3BGSrc
Type: Image
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.menuItem3BGSrc = "itemiconbg.png";
Icon
Description: Specifies the file name of the image to be set as the Menu item 3 icon.
Syntax: menuItem3IconSrc
Type: Image
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.menuItem3IconSrc = "itemprofile.png";
Text
Description: Specifies the text to be displayed on the label of Menu item 3.
Syntax: menuItem3Text
Type: String
Read/Write: Read + Write
Remarks

The default value of the property is "Label".

Example:
this.view.componentID.menuItem3Text = "Label";

Menu Item 4 Properties

Visibility
Description: Controls the visibility of Menu item 4.
Syntax: isVisibleMenuItem4
Type: Boolean
Read/Write: Read + Write
Remarks

The default value of the property is false.

Example:
this.view.componentID.isVisibleMenuItem4 = false;
Background Image
Description: Specifies the file name of the image to be set as the background of Menu item 4.
Syntax: menuItem4BGSrc
Type: Image
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.menuItem4BGSrc = "itemiconbg.png";
Icon
Description: Specifies the file name of the image to be set as the Menu item 4 icon.
Syntax: menuItem4IconSrc
Type: Image
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.menuItem4IconSrc = "itemdel.png";
Text
Description: Specifies the text to be displayed on the label of Menu item 4.
Syntax: menuItem4Text
Type: String
Read/Write: Read + Write
Remarks

The default value of the property is "Label".

Example:
this.view.componentID.menuItem4Text = "Label";

Menu Item 5 Properties

Visibility
Description: Controls the visibility of Menu item 5.
Syntax: isVisibleMenuItem5
Type: Boolean
Read/Write: Read + Write
Remarks

The default value of the property is false.

Example:
this.view.componentID.isVisibleMenuItem5 = false;
Background Image
Description: Specifies the file name of the image to be set as the background of Menu item 5.
Syntax: menuItem5BGSrc
Type: Image
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.menuItem5BGSrc = "itemiconbg.png";
Icon
Description: Specifies the file name of the image to be set as the Menu item 5 icon.
Syntax: menuItem5IconSrc
Type: Image
Read/Write: Read + Write
Remarks

Before setting the property, do the following:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.componentID.menuItem5IconSrc = "itemprofile.png";
Text
Description: Specifies the text to be displayed on the label of Menu item 5.
Syntax: menuItem5Text
Type: String
Read/Write: Read + Write
Remarks

The default value of the property is "Label".

Example:
this.view.componentID.menuItem5Text = "Label";

Skin

You can select skins from the Exposed Skins drop-down list on the Skin tab. This section provides information on how to set Skin by writing a JavaScript.

Menu Item 1 Text
Description: Specifies the skin for the text of Menu item 1.
Syntax: sknMenuItem1Text
Type: String
Read/Write: Read + Write
Remarks

Before you set the property, ensure that the skin ID that you specify already exists in your app project.

Example:
this.view.componentID.sknMenuItem1Text= "skinname";
Menu Item 2 Text
Description: Specifies the skin for the text of Menu item 2.
Syntax: sknMenuItem2Text
Type: String
Read/Write: Read + Write
Remarks

Before you set the property, ensure that the skin ID that you specify already exists in your app project.

Example:
this.view.componentID.sknMenuItem2Text= "skinname";
Menu Item 3 Text
Description: Specifies the skin for the text of Menu item 3.
Syntax: sknMenuItem3Text
Type: String
Read/Write: Read + Write
Remarks

Before you set the property, ensure that the skin ID that you specify already exists in your app project.

Example:
this.view.componentID.sknMenuItem3Text= "skinname";
Menu Item 4 Text
Description: Specifies the skin for the text of Menu item 4.
Syntax: sknMenuItem4Text
Type: String
Read/Write: Read + Write
Remarks

Before you set the property, ensure that the skin ID that you specify already exists in your app project.

Example:
this.view.componentID.sknMenuItem4Text= "skinname";
Menu Item 5 Text
Description: Specifies the skin for the text of Menu item 5.
Syntax: sknMenuItem5Text
Type: String
Read/Write: Read + Write
Remarks

Before you set the property, ensure that the skin ID that you specify already exists in your app project.

Example:
this.view.componentID.sknMenuItem5Text= "skinname";

Defining Events

You can define events to be executed when an action is performed. You can configure the events directly on the Actions tab or by writing a JavaScript. To configure the events on the Action tab, click Edit against each event. For more information, refer to Add Actions.

onClickMenuItem1
Description: The event is invoked when a user clicks Menu item 1. Clicking the menu item invokes the assigned action and hides the menu items simultaneously.
Syntax: onClickMenuItem1()
Example:
this.view.componentID.onClickMenuItem1= function()
{
	alert(“Menu item 1 Clicked”);
}
onClickMenuItem2
Description: The event is invoked when a user clicks Menu item 2. Clicking on the Menu item invokes the assigned action and hides the menu icons.
Syntax: onClickMenuItem2()
Example:
this.view.componentID.onClickMenuItem2= function()
{
	alert(“Menu item 2 Clicked”);
}
onClickMenuItem3
Description: The event is invoked when a user clicks Menu item 3. Clicking the menu item invokes the assigned action and hides the menu items simultaneously.
Syntax: onClickMenuItem3()
Example:
this.view.componentID.onClickMenuItem3= function()
{
	alert(“Menu item 3 Clicked”);
}
onClickMenuItem4
Description: The event is invoked when a user clicks Menu item 4. Clicking the menu item invokes the assigned action and hides the menu items simultaneously.
Syntax: onClickMenuItem4()
Example:
this.view.componentID.onClickMenuItem4= function()
{
	alert(“Menu item 4 Clicked”);
}
onClickMenuItem5
Description:

The event is invoked when a user clicks Menu item 5. Clicking the menu item invokes the assigned action and hides the menu items simultaneously.

Syntax: onClickMenuItem5()
Example:
this.view.componentID.onClickMenuItem5= function()
{
	alert(“Menu item 5 Clicked”);
}
onClickPrimaryButton
Description: The event is invoked when a user clicks the Primary Button. The Primary Button will show/hide the menu items.
Syntax: onClickPrimaryButton()
Example:
this.view.componentID.onClickPrimaryButton= function()
{
	alert(“Primary button Clicked”);
}