Button

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

Definition

Buttons are the clickable elements. When you click a button, it triggers an action. The button communicates “Calls to Action” to the users and allows them to interact with the pages in several ways. The label of a button defines the action that the user performs on the button.

Usage

When to useWhen not to use
Use buttons to communicate actions to the users and to allow users to interact with the page. Each page should have one primary button, and any remaining calls to action should be represented as lower emphasis buttons.Do not use buttons as navigational elements. Instead, use links when the desired action has to take the user to a new page.

Button Configuration

On the button element, you can perform the following types of configuration:

  • UI Configuration
  • Data Configuration
  • Event Configuration

UI Configuration

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicReference nameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesButton_1
BasicCaptionSpecifies the title of the element.NoPrimary Button
BasicUnderlineIn this property:
–> Click Yes to impart the underline effect to the button.

–> Click No to not impart the underline effect to the button.
unmarked
BasicWrapThis property allows you to wrap the element’s dimensions by reducing the space between the element and the content inside the element.Nounmarked
BasicVisibleAllows you to define the default visibility of the UI element. Nomarked
BasicBusiness RuleClick 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
BasicEnableAllows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.Nomarked
BasicBusiness RuleClick 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 PropertiesStylesAllows 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 pre-defined styles are:
–> Primary
–> Success
–> Info
–> Danger
–> Secondary
–> Warning
NoPrimary
UI Properties-
Background
ColorClick the Color box and then select the background color of the button.NoTheme Variable (Primary)
UI Properties-
Background
Opacity The opacity-level describes the transparency-level.Yes100%
UI Properties-
Background
Select ColorClick the Color box and then select the background color that the button displays when the user puts the mouse pointer on the button to perform the function.NoTheme Variable (Primary)
UI Properties-
Background
Opacity The opacity-level describes the transparency-level.Yes100%
UI Properties-
Alignment & Spacing
MarginAllows 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.NoTheme Variable (Margin)
UI Properties-
Alignment & Spacing
Element’s AlignmentThis 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.
NoLeft
UI Properties- CaptionFontSelect the font type (For example: – Arial) of the element’s caption.NoTheme Variable (Font Family)
UI Properties-CaptionSizeEnter the font size of the caption.No14
UI Properties- CaptionColorSelect the color of the font of the caption.NoTheme Variable (Neutral Color)
UI Properties- CaptionBoldEnter the thickness of the character of the element’s caption in the range of values from 1 to 9.No9
UI Properties –
Icon
SourceAllows you to configure an icon that you want to use with the element. After you configure the icon, the app will display the icon with the element.

You can use the following options to configure the icon:
–> None
–> URL
–> Asset Library
NoNone
UI Properties-
Icon
Enter URLThis box appears only after you select URL in the Source list. In the Enter URL box, enter the URL of the icon. The application fetches the image of the icon from the URL-based location.NoWhen source = URL
UI Properties-
Icon
Select AssetAllows you to fetch the image of icon 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.
YesWhen source = Assets Manager
UI Properties-
Icon
SizeIn this box, enter the numeric value (for example:-14) to define the size of the icon.No16When source = URL
UI Properties-
Icon
ColorClick the Color box and then select the color to define the color of the icon.

Note: – The Color property can only be configured for “Material” icons. If you have defined the URL to load the image, the Color property cannot be applied to the URL-based images.
NoTheme Variable (Neutral)
UI Properties-
Icon
AlignmentYou can use this property to align the icon by using the following options:
–> Left
–> Right
–> Top
–> Bottom
NoLeftWhen source = URL
UI Properties-
Icon
PaddingThis property allows you to define padding around each side of the element. It provides four different boxes to define the padding around the right, left, top, and bottom side of the element.NoSet at [0,0,0,0] and Hide
UI Properties – Shape & DecorationTypeUnder 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.
YesAutofill
UI Properties- Shape & DecorationWidth ValueEnter the width of the element in the pixel unit.No100%If “Type” = Manual
UI Properties- Shape & DecorationHeight ValueEnter the height of the element in the percentage unit or pixel unit.NoSet as ___ and Disable
UI Properties- Shape & DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoShow and Disable
UI Properties- Shape & DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoShow and Disable
UI Properties- Shape & DecorationBorder RadiusAllows you to define the radius of any of the corners of the element. Defining the radius of the corner makes the corner of the element round.NoTheme Variable (Border Radius)
DataEntity PathThis 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

Event Configuration

On the “Button” element, you can configure the following events:

  • onClick
  • onLongPress
Was this article helpful?
YesNo