Description:
The button widget is a standard HTML button element.
Inputs
- Button Type - Select between Default and other types
- ID/Name - Name of widget generated by FlowWright (read-only field)
- Button Label - Change the button label
- Hide - Select the checkbox to Hide (tick mark)
- Read Only - Select the checkbox to Read-Only (tick mark)
- Tool Tip - Enter information to display on mouse hover on form render
- Styles - Enter the CSS scripts for widget styles
- Apply Classes - Select between custom classes defined
- Save - Save the input values
- Delete - Remove this form widget from the designer page
- Close - Close the input popup window
Design:
Example:
Let’s build and execute the “ButtonDef” example.
- Create a Form definition called “ButtonDef.” Navigate to Forms - Definitions in the left pane to create it. On the Form Definitions page, select the Actions - Create menu option. Check with your FlowWright administrator if you don't have access to generate Form Definitions.
- Drag a “Button” widget to the canvas.
- Double-click the “Button” widget to open the “Settings” tab. Select the button type from the drop-down list (Default, Primary, Info, Success, Warning, Danger, and Inverse). The widget name is auto-populated and cannot be changed. Enter the text for the button label. Select the checkbox to hide the button or mark it as read-only at runtime. Click the Save button.
- Select one of the button types from the drop-down list. The UI appearance differs for each button type.
- Double-click the widget to open the “Styling” tab. Enter the CSS syntax to enhance the style—the border is emphasized with a 5px solid grey color, as shown below. Select the class options from the drop-down list to apply to HTML elements.
- Double-click the widget to configure the “Other” tab. Then, enter the text to be rendered as a tooltip.
- Double-click the control to configure the “Globalize” properties. The application will alert you if there is nothing to globalize, as shown below. Otherwise, select a language from the drop-down list, then click the Translate button. Click the Save button.
- Save the Form definition. Select Actions - Create Form Instance from the menu. Generate a new Form instance, then select the check box to edit it. Check with your FlowWright administrator if you don't have access to generate Form instances.
- The Form is rendered for the user as shown below.
Definition Sample:
You may download the sample definition(s) from the link provided and later import them (drag-and-drop) into your FlowWright Process Definition (XML file) or Form Definition (HTML file) page.
Note: Please verify and complete the process steps for any missing configurations, such as file path references and database connections, after the import. Then, save the definition to confirm the changes.