Description:
This widget control lets you define a list of checkboxes for selection. The user can select one or many. The user can also define a display condition for other widgets on the Form.
Inputs
- ID/Name - Name of widget generated by FlowWright
- Checkboxes - Define the list of items required as checkboxes (comma suffix and unique value for reference)
- Display type - Select between Horizontal / Vertical
- Required - Select the checkbox for mandatory (tick mark)
- Hide - Select the checkbox to Hide (tick mark)
- Read Only - Select the checkbox to Read-Only (tick mark)
Allow Select All - Select the checkbox to select/unselect all items. - Display Condition - Define a display condition for other widgets based on the checkbox value
- Styles - Select Label Styles (Bold, Italics, Underline). Select ForeColor and BackColor. Select Font Size. Enter the CSS scripts for widget styles
- Apply Classes - Select between custom classes defined
- Tool Tip - Enter information to display on mouse hover on form render
- 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 “CheckboxDef” example.
- Create a new form definition called “CheckboxDef.”
- Select the Open Designer checkbox and click the “Create” button
- Drag a Text box, Label, and Checkbox widget to the canvas

- Double-click the Label widget to configure the “Settings” tab, as shown in the below graphic. Provide a name for the widget. Provide text information for label text. Select the check box to enable multiline text information. Select the check box to hide or skip globalization when rendered during run time.

- Double-click the Text box widget to configure the inputs, as shown in the below graphic. Provide a name for the widget. Provide text information to the placeholder. Select the input data type as text from the drop-down list. Select the check box to hide, render it read-only, or input it as required during run time. Provide a number value to accept maximum characters as input.

- Double-click the Checkbox widget to configure the “Settings” tab, as shown in the graphic below. Provide a name for the widget. Provide options to render the check box as a value or key pair. Select the display type as horizontal or vertical. Select the check box to accept input as mandatory, hide, render as read-only, or select all options in one go during run time.

- Double-click the Checkbox widget to configure the “Conditions” tab. Provide the control field value and map it to the required form field by name to display the control on a condition. Click the plus sign (+) to add more display conditions. The form controls are displayed during run time when the appropriate checkbox values are selected. The label and text box controls are displayed when selecting the associated value and key pairs configured above.

- Double-click the Checkbox widget to configure the “Styling” tab. Select the check box to enable the label styles—bold, italics, and underline. Select the fore and back colors from the drop-down color palette list. Select the font size from the drop-down list—small, medium, large, x-large, xx-large. Provide the CSS style syntax to enhance the style. Select the class options from the drop-down list to apply to HTML elements.

- Double-click the Checkbox widget to configure the “Other” tab. Provide the text information for the tooltip to render on mouse hover.

- Double-click the Checkbox widget to configure the “Globalize” tab. Select the language options from the drop-down list and click the Translate button to globalize the button.

- Click the Save button and Close the popup window. Then, navigate to the UI menu and Preview the form. The form is rendered as shown in the graphic below. Select the language culture to render the check box in a globalized format.

- Select the check box to render the label (as per the display condition)

- Select the check box to render the text box (as per the display condition)

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.