Description:

Button — Provides a Button control that can be placed on a FlowWright form as a standard user-interface control.

Design:  

The Button widget is a FlowWright form widget in the Standard Controls category. It is implemented by FlowWright.Forms.button in FlowWright.Forms.dll and is displayed in the form designer as Button. Button

Because the Button is defined as a form widget, treat it as a user-interface control rather than a conventional workflow process step.

Typical Workflow Suggestions:

Form Submission

Use the Button widget as part of a form through which a user submits information for processing.

Example workflow:

Start → Data Entry Form → Submit → Validate Data → Process Request → End

The Button can provide the user interface control for submitting the completed form.

Approval Process

Use a Button on an approval form where users need to interact with the form as part of an approval workflow.

Example workflow:

Start → Request Form → Manager Review → Approval Form → Approve/Reject → End

The Button can be incorporated into the approval form's user interface.

Customer Registration

Use a Button on a customer registration form to provide a clear UI control for completing registration.

Example workflow:

Start → Customer Registration Form → Validate Customer Information → Create Customer → End

Position the Button with the registration fields as part of the form design.

Service Request

Use the Button widget on a service request form where users need a clear control for completing or progressing through the form.

Example workflow:

Start → Service Request Form → Validate Request → Assign Service Team → Process Request → End

Include the Button as part of the form's interaction area.

Employee Onboarding

Use a Button control on an employee onboarding form to provide an interface element for completing the form.

Example workflow:

Start → Employee Onboarding Form → HR Review → Create Employee Record → End

You can place the Button alongside the onboarding information as part of the form layout.

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 automatically populated and cannot be edited. Enter the button label text. Check the box to hide the button or mark it as read-only at runtime. Click the “Lock Widget” button to toggle the lock/unlock feature and prevent accidental configuration changes. Click the “Save” button. 

• Select one of the button types from the drop-down list. The UI appearance varies by button type. 

• Double-click the widget to open the “Styling” tab. Enter CSS 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. Click the “Lock Widget” button to toggle the lock/unlock feature and prevent accidental configuration changes. Click the “Save” button. 

• 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 notify you if nothing needs to be globalized, as shown below. Otherwise, select a language from the drop-down list and click the Translate button. Then, click the Save button. 

• Save the Form definition. Select Actions > Create Form Instance from the menu. Generate a new form instance, then check the box to edit it. Consult your FlowWright administrator if you lack permission to generate form instances.

• The Form is rendered for the user as shown below.  

Tips:

• Use the Button as a standard form control when a user-interface action needs to be represented on a form.
• Place buttons in a consistent and intuitive location within the form.
• Use clear button text when configuring the control so users understand its intended purpose.
• Avoid adding unnecessary buttons, as they can confuse the user interface.
• Test the completed form to confirm that the button provides the expected user experience and works correctly with the surrounding workflow.

Definition Sample:

You may download and extract 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: After the import, verify and complete any missing configurations, such as file path references and database connections. Then, save the definition to confirm the changes. 

Click here to download the sample file.