Button

The Button is a fundamental UI element that enables users to perform specific actions within an application. It acts as a trigger for events, such as submitting forms, opening dialog, or navigating to different application sections. Buttons can be customized to enhance user interaction and improve the overall experience.

Common Use Cases:

• Form Submission: Used to send form data for processing or saving.
• Navigation: Allows users to move between different pages or sections.
• Triggering Actions: Activates specific tasks or processes within the app.

Its Configuration

The configuration of the element in vFlow 2.0 allows you to customize its behavior, appearance, and interaction across various devices. Through simple settings, you can control everything from its visibility and functionality to how it adapts to different screen sizes, making it flexible and user-friendly for both developers and end-users. Let’s have a look at each of its configuration:

Basic

Basic Properties	Description
Type	The Type indicates the type of you are adding. In this case, it defaults to “Button” and cannot be changed here. This selection is made initially when you create element first-up.
Reference Name	The Reference Name is a unique identifier assigned to the element for internal use. This name is visible only to vFlow users, and is not displayed to end-users. The Reference Name is intended for your convenience, helping you easily identify and manage the element throughout.
Label	The Label is the name or text displayed on the element, making it easily recognizable to end-users.
Description	The Description field is intended for use by application designers or administrators (vFlow users) to provide additional context or details about the element. This description is not visible to end-users and is used solely for internal reference to assist with element management.

Properties

Property	Description
Visible	This checkbox determines whether the button is visible to users. If unchecked, the button will be hidden from the interface, even if it exists in the application.
Enable	This checkbox allows you to enable or disable its functionality. When unchecked, the button is still visible but cannot be interacted with by users.
Mandatory	If checked, it indicates that the button’s action is required for the form submission or workflow, enforcing user interaction before proceeding.
Default Value	This field allows you to set a default value for the button, which may be relevant in specific contexts where a button’s state might be predefined.
Leading Icon	This drop-down lets you select an icon to be displayed on the left side of the button label, enhancing its visual appeal and providing additional context.
Trailing Icon	Similar to the leading icon, this drop-down allows you to choose an icon that appears on the right side of the button label.
Sorting	This checkbox indicates whether the button can be used in a sorting context within a table or list, enhancing user interaction for organizing data.
Tooltip Label	This field allows you to enter text that will be displayed as a tooltip when users hover over the button, providing additional information without cluttering the interface.
Editable Field	This option indicates whether the button can be edited in the interface, giving more control to the application designer over its behavior.
Fixed Column (Left Side)	If checked, this option allows the button to remain fixed in a designated column on the left side of the interface, improving accessibility and usability.
Submit Button	Checking this option designates the button as a submit button, which typically triggers the form submission when clicked.

These properties collectively enhance the functionality and user experience of the Button element, allowing for greater customization and control within the application interface.

Style

The Style option allows you to personalize the appearance of the element. This includes adjusting various visual aspects to ensure it complements your application’s overall design. Here’s a breakdown of different settings that you can make adjustments to:

• Laptop/Desktop width: The button automatically expands to take up 100% of the available width on desktop and laptop screens, ensuring it spans the entire container. However, this width can be adjusted according to the specific design or layout requirements.
• Tab width: On tablet devices, the button will also span 100% of the container’s width. This ensures that it adapts well to medium-sized screens, making it easier for users to interact with on touch devices. You can adjust this width as needed based on design preferences.
• Mobile width: For mobile devices, the button remains at 100% width to ensure full visibility and easy tap interaction, even on smaller screens. Like the other devices, this width can be adjusted as per requirement.

Data Style

• Background Color: To choose the background color for the element, you can use a color picker or enter a hexadecimal or RGB color code. The default opacity is set to 100%.

Font

• Family: You can select the font family for text in the element. If no specific font is chosen, “None” will use the default font.

• Size: You can specify the font size in pixels (px).
• Color: You can set the font color using the color picker or a hexadecimal or RGB color code. The default opacity is 100%.

• Alphabet Case: You can choose the text case (e.g., uppercase, lowercase) or select “None” to keep the original case.
• Text Alignment: You can set the text alignment (e.g., left, center, right) or select “None” for default alignment.

Dimension

• Height: You can define the height of the element in pixels (px) or percentage (%).
• Maximum Height: You can set the maximum height to prevent the element from exceeding this limit.
• Width: You can specify the width of the element in pixels (px) or percentage (%).
• Maximum Width: You can define the maximum width to prevent the element from expanding beyond this size.

Spacing

• Margin: To adjust the space around the element, enter values for top, right, bottom, and left margins in pixels (px). Default is 0px for all sides.
• Padding: To set the internal space within the element, enter values for top, right, bottom, and left padding in pixels (px). Default is 0px for all sides.
• Border Radius: To define the curvature of the corners of the element, enter values for top-left, top-right, bottom-right, and bottom-left in pixels (px). Default is 0px for all corners.

Events

The Events option of the element allows you to assign task groups that will execute when specific actions occur on the element. These tasks can be created separately in the configurator or inventory and grouped to perform various actions when certain events are triggered.

Here’s a breakdown of the Events section:

1. On Click:
   • This option allows you to assign a task group to be executed when a user clicks the element, for example clicking it could show a set of data or execute some task or both.
   • You can select an existing task group from the drop-down list labeled Select Task Group or go back to the inventory or configurator to create a new task or task group if necessary.
2. On Load:
   • This option lets you assign a task group that will execute automatically when the element is loaded.
   • This could be useful for initializing data or triggering other actions as soon as the element is displayed.
3. Custom Load:
   • The Custom Load event enables you to trigger a specific task group during a customized loading scenario.
   • Similar to the previous options, you can choose the task group to be executed from the Select Task Group dropdown list or go back to the inventory or configurator to make a task or task group if needed.

After assigning the appropriate task groups to these events, click the button to apply your configuration to the element.

Data

Under Data source, you can select data type as path and define its path when a “Data Path” text box appears.

Note: To know more about Data, click here or check the post under configurator.