FAB (Floating Action Button)

The floating action button is used to access the most common functionalities or actions on the screen. It appears as a circular shape icon by default.

Usage

When to use	When not to use
Use the FAB if it is suitable to present the primary functions of the current screen. Only include most primary functions in the FAB. Use two different FAB(s) if they denote distinct primary functions/actions.	Do not use multiple FAB(s) on the specific screen. Do not use FAB on every screen especially if the images denote the primary functions on the screen.

Floating Action Button Configuration

On the “Floating Action Button” element, you can perform the following configurations:

• UI Configuration
• Event Configuration

UI Configuration

For the “FAB” element, you can configure the following UI properties:

Tab	Property Name	Description	Mandatory	New Default Value	Visibility Rules
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	Fab_1
Basic	Source	Allows you to configure the source location of the element’s image. The application fetches the element’s image from the source location and displays it to the user. You can use the following options to configure the source location: –> None –> URL –> Asset Library	No	None
Basic	Enter URL	This box appears after you select URL in the Source list. In the Enter URL box, enter the URL of the image, and the application loads the image from the source location.	Yes		if source = url
Basic	Select Asset	It allows you to fetch the element’s image from the Assets Manager module. In this box: –> Click the asset library icon (), and the Select Asset dialog box opens. –> In the Select Asset dialog box, select an icon, and then click Select, and you successfully configure the image of the icon.	Yes		if source = Assets
Basic	Visible	Allows you to define the default visibility of the UI element.	No	marked
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
Basic	Enable	Allows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.	No	marked
Basic	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
UI Properties	Styles	Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element. These styles are: –> Primary –> Warning –> Success –> Secondary –> Info –> Danger	No	Primary
UI Properties	Color	Click the Color box and then select the background color of the button.	No	Theme Variable (Primary)
UI Properties	Opacity	Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the color, you can also configure the opacity in the percentage unit.	Yes	100%
UI Properties	Elevation	Allows you to configure the elevation of the background. The elevation is measured as the relative distance between two surfaces along the Z-axis.	No	8
UI Properties- Alignment & Spacing	Margin	Allows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.	No	Theme Variable (Margin)
UI Properties- Alignment & Spacing	Element’s Alignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No	Left
UI Properties-Icon	Size	Allows you to configure the size of the element’s icon in the pixel unit.
UI Properties-Icon	Color	Allows you to configure the color of the element’s icon. To configure the color: –> In the Color box, click the left color box (), a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#000000
UI Properties- Shape & Decoration	Type	Under the Shape and Decoration section, this property has the two following options: Autofill:- If you select this option, the element will occupy the available space of the parent layout. Manual:- If you select this option, you can define a specific size of the element.
UI Properties- Shape & Decoration	Width Value	Enter the width of the element in the pixel unit or percentage unit.	No	56px
UI Properties- Shape & Decoration	Height Value	Enter the height of the element in the pixel unit.	No	56px
UI Properties- Shape & Decoration	X	Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.	No	Show & Disable
UI Properties- Shape & Decoration	Y	Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.	No	Show & Disable
Data	Entity Path	This property allows you to map an attribute to the element. You define the JSON based attributes in the entity in the Data Modeler module. To define the entity path: –> Click in the Entity Path box, and a list expands. –> The list displays several attributes from the entity. –> In the list, select an attribute to map it to the element. After the user performs the function on the element, the application can perform the following functions: a. Fetches data from the attribute and then displays it in the element. b. Stores data in the attribute.	No	EntityName.

Event Configuration

You can configure the following event on the ?Fab Button? element:

• onClick