Floating Action

Floating Action

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Apr 21, 2017 By: Kony Team
669 6 4 100
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

Platforms Supported

  • Android Phone Native
  • iPhone Native

Prerequisites

  • Kony Account
  • Kony Visualizer Enterprise
  • A Kony Reference Architecture app created in Kony Visualizer

Lijo Joy Unable to import this library .

Hi Team, I am unable to import the library "An error occurred while importing library.Click Retry to try to import again" error message is shown.

Kony Team

Hi Lijo, Thank you for the feedback. We have verified this issue. Looks like we have documented an alternative approach to import the component and this feature is not available in the current release. Please follow the guidelines below to import the component: 1) Open your app project in Kony Visualizer. 2) Go to File Menu option => Import => Component, then an open dialog appears. 3) Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. 4) Then a dialog box opens and prompts for Collection, Library names. 5) Please enter new names for Collections and Library or you can use existing ones. 6) In the following step you will see a new component added in the Collections library. From here you can follow the rest of documentation. Sorry for the inconvenience caused, we are working on updating the documentation. Thanks, Team Kony.

Lijo Joy

Hi Team, i followed the steps and able to add the library , but my collections tab is empty.

Kony Team

Hi Lijo, Please find the solution here: http://community.kony.com/developer/forum/unable-import-floating-action-librarywhich-taken-kony-marketplace

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 7.3.
  3. A Kony Reference Architecture app in Kony Visualizer. You can create a Kony Reference Architecture app in Kony Visualizer using the following procedure:
    1. Open Kony Visualizer.
    2. On the File Menu, click New Project. The New Project dialog appears.
    3. In the Project Name box, type a name for your project.
    4. Select Kony Reference Architecture, and click Create.

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. From the Collections 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. The properties on the Component tab are categorized as Pass Through and Custom properties. The Pass Through properties are the default properties of individual widgets in the component. The Custom properties are user-defined properties based on the use case of the component.

Note:

Changes made to the Custom properties are reflected only during run time, but not during design time (Visualizer Canvas).

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

  1. In the Project Explorer, on the Projects tab, click the context menu arrow of Modules, and then click New JS module. A new JavaScript file opens in the Code Editor.
  2. Copy and paste the following code snippet in the JavaScript file:
    /* creating a component's Object */
    var floatingAction = new com.konymp.floatingaction({ "clipBounds": true, "height": "100%", "id": "floatingAction", "isVisible": true, "left": "0dp", "top": "0dp",    "width": "100%", "zIndex": 1 }, {}, {});
    /* Setting component's Pass Through and Custom properties */
    floatingAction.enableOverlay = false; floatingAction.isVisibleMenuItem4 = false; floatingAction.isVisibleMenuItem5 = false; floatingAction.menuItemType = "Only Image"; floatingAction.animationType = "Default";
    /*Adding the Component to the Form*/
    this.view.add(floatingAction);

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

  3. 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.

Animation Type
Category: Custom
Description: Specifies the animation type of the menu items.
Syntax: animationType
Type: String
Read/Write: Write
Remarks The default value of the property is Default.
Example:
this.view.Component_Name.animationType = “Default”;
Background Overlay Image
Category: Pass Through
Description: Specifies the name of the image to be set as the background overlay.
Syntax: imgBGOverlaySrc
Type: String
Read/Write: Write
Remarks

The default image is "fade.png".
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.Component_Name.imgBGOverlaySrc = "fade.png";
Enable Background Overlay
Category: Custom
Description: Controls the visibility of the background overlay.
Syntax: enableOverlay
Type: Boolean
Read/Write: Write
Remarks

The default value of the property is true.

Example:
this.view.Component_Name.enableOverlay = true;
Menu item 1 Visibility
Category: Pass Through
Description: Controls the visibility of Menu item 1.
Syntax: isVisibleMenuItem1
Type: Boolean
Read/Write: Write
Remarks

The default value of the property is true.

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

The default image is "itemiconbg.png".
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.Component_Name.menuItem1BGSrc = "itemiconbg.png";
Menu item 1 Icon
Category: Pass Through
Description: Specifies the file name of the image to be set as the Menu item 1 icon.
Syntax: menuItem1IconSrc
Type: String
Read/Write: Write
Remarks

The default image is "itempen.png".
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.Component_Name.menuItem1IconSrc = "itempen.png";
Menu item 1 Text
Category: Pass Through
Description: Specifies the text to be displayed on the label of Menu item 1.
Syntax: menuItem1Text
Type: String
Read/Write: Write
Remarks

The default value of the property is "Label".

Example:
this.view.Component_Name.menuItem1Text = "Label";
Menu item 2 Visibility
Category: Pass Through
Description: Controls the visibility of Menu item 2.
Syntax: isVisibleMenuItem2
Type: Boolean
Read/Write: Write
Remarks

The default value of the property is true.

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

The default image is "itemiconbg.png".
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.Component_Name.menuItem2BGSrc = "itemiconbg.png";
Menu item 2 Icon
Category: Pass Through
Description: Specifies the file name of the image to be set as the Menu item 2 icon.
Syntax: menuItem2IconSrc
Type: String
Read/Write: Write
Remarks

The default image is "itemstar.png".
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.Component_Name.menuItem2IconSrc = "itemstar.png";
Menu item 2 Text
Category: Pass Through
Description: Specifies the text to be displayed on the label of Menu item 2.
Syntax: menuItem2Text
Type: String
Read/Write: Write
Remarks

The default value of the property is "Label".

Example:
this.view.Component_Name.menuItem2Text = "Label";
Menu item 3 Visibility
Category: Pass Through
Description: Controls the visibility of Menu item 3.
Syntax: isVisibleMenuItem3
Type: Boolean
Read/Write: Write
Remarks

The default value of the property is true.

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

The default image is "itemiconbg.png".
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.Component_Name.menuItem3BGSrc = "itemiconbg.png";
Menu item 3 Icon
Category: Pass Through
Description: Specifies the file name of the image to be set as the Menu item 3 icon.
Syntax: menuItem3IconSrc
Type: String
Read/Write: Write
Remarks

The default image is "itemprofile.png".
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.Component_Name.menuItem3IconSrc = "itemprofile.png";
Menu item 3 Text
Category: Pass Through
Description: Specifies the text to be displayed on the label of Menu item 3.
Syntax: menuItem3Text
Type: String
Read/Write: Write
Remarks

The default value of the property is "Label".

Example:
this.view.Component_Name.menuItem3Text = "Label";
Menu item 4 Visibility
Category: Pass Through
Description: Controls the visibility of Menu item 4.
Syntax: isVisibleMenuItem4
Type: Boolean
Read/Write: Write
Remarks

The default value of the property is true.

Example:
this.view.Component_Name.isVisibleMenuItem4 = true;
Menu item 4 Background Image
Category: Pass Through
Description: Specifies the file name of the image to be set as the background of Menu item 4.
Syntax: menuItem4BGSrc
Type: String
Read/Write: Write
Remarks

The default image is "itemiconbg.png".
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.Component_Name.menuItem4BGSrc = "itemiconbg.png";
Menu item 4 Icon
Category: Pass Through
Description: Specifies the file name of the image to be set as the Menu item 4 icon.
Syntax: menuItem4IconSrc
Type: String
Read/Write: Write
Remarks

The default image is "itemdel.png".
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.Component_Name.menuItem4IconSrc = "itemdel.png";
Menu item 4 Text
Category: Pass Through
Description: Specifies the text to be displayed on the label of Menu item 4.
Syntax: menuItem4Text
Type: String
Read/Write: Write
Remarks

The default value of the property is "Label".

Example:
this.view.Component_Name.menuItem4Text = "Label";
Menu item 5 Visibility
Category: Pass Through
Description: Controls the visibility of Menu item 5.
Syntax: isVisibleMenuItem5
Type: Boolean
Read/Write: Write
Remarks

The default value of the property is true.

Example:
this.view.Component_Name.isVisibleMenuItem5 = true;
Menu item 5 Background Image
Category: Pass Through
Description: Specifies the file name of the image to be set as the background of Menu item 5.
Syntax: menuItem5BGSrc
Type: String
Read/Write: Write
Remarks

The default image is "itemiconbg.png".
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.Component_Name.menuItem5BGSrc = "itemiconbg.png";
Menu item 5 Icon
Category: Pass Through
Description: Specifies the file name of the image to be set as the Menu item 5 icon.
Syntax: menuItem5IconSrc
Type: String
Read/Write: Write
Remarks

The default image is "itemprofile.png".
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.Component_Name.menuItem5IconSrc = "itemprofile.png";
Menu item 5 Text
Category: Pass Through
Description: Specifies the text to be displayed on the label of Menu item 5.
Syntax: menuItem5Text
Type: String
Read/Write: Write
Remarks

The default value of the property is "Label".

Example:
this.view.Component_Name.menuItem5Text = "Label";
Menu Item Fields
Category: Custom
Description: Specifies whether the menu items to be displayed as only image or image and text.
Syntax: menuItemType
Type: String
Read/Write: Write
Remarks

The default value of the property is "Only Image".
You can specify any one of the following:

  • Only Image
  • Image and Text
Example:
this.view.Component_Name.menuItemType= "Only Image";
Primary Button Background
Category: Pass Through
Description: Specifies the file name of the image to be set as the background for the Primary Button.
Syntax: primaryButtonBGSrc
Type: String
Read/Write: Write
Remarks

The default image is "bg.png".
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.Component_Name.primaryButtonBGSrc= "bg.png";
Primary Button Icon
Category: Pass Through
Description: Specifies the file name of the image to be set as the Primary Button icon.
Syntax: imgPrimaryIcon
Type: String
Read/Write: Write
Remarks

The default image is "icon_plus.png".
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.Component_Name.imgPrimaryIcon= "icon_plus.png";

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 Event
Category: Pass Through
Description: The event is invoked when a user clicks Menu item 1.
Syntax: onClickMenuItem1()
onClickMenuItem2 Event
Category: Pass Through
Description: The event is invoked when a user clicks Menu item 2.
Syntax: onClickMenuItem2()
onClickMenuItem3 Event
Category: Pass Through
Description: The event is invoked when a user clicks Menu item 3.
Syntax: onClickMenuItem3()
onClickMenuItem4 Event
Category: Pass Through
Description: The event is invoked when a user clicks Menu item 4.
Syntax: onClickMenuItem4()
onClickMenuItem5 Event
Category: Pass Through
Description: The event is invoked when a user clicks Menu item 5.
Syntax: onClickMenuItem5()
onClickPrimaryButton Event
Category: Custom
Description: The event is invoked when a user clicks the Primary Button.
Syntax: onClickPrimaryButton()