Description:
The button widget is a standard HTML button control.
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 new form definition called “ButtonDef.”
- Select the Open Designer checkbox and click the “Create” button
- Drag a “Button” widget to the canvas
- Double-click on the widget to configure 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. Provide the text information as a button label. Select the checkbox to hide or mark the button as read-only during run time.
- Double-click on the widget to configure the “Styling” tab. Provide the CSS style syntax to enhance the style—the border is emphasized with a 10px red color in this reference 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, provide the text information to be rendered as a tooltip.
- Double-click on the widget to configure the “Globalize” tab. Select the language options from the drop-down list and click the Translate button to globalize the button.
- Save the change. Navigate to Run—Form Instances—Create and edit a form instance for the above form definition. During run time, the rendered widget will look like the graphic below. Select the language culture on the form to render the button in a globalized format.
Definition Sample:
You may download the sample definition(s) from the link here and later import it (drag-drop) to 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 import. Then, save the definition to confirm the changes.