Description:

Generates a Bootstrap grid within a FlowWright form for organizing form content into a structured grid layout.

Using the BootstrapGrid container widget, you can create multiple Bootstrap rows and columns and place controls within each column, as demonstrated in the graphic below. You can also insert sub-forms within each Bootstrap column. 

Design:

Use the BootstrapGrid widget when a FlowWright form needs to organize its content using a Bootstrap grid layout.

You can add the widget to a form as a layout component to structure related form controls into an organized grid.

The BootstrapGrid component is a FlowWright form widget in the Engine category. It is implemented by FlowWright.Forms.clsBootstrapGrid in FlowWright.Forms.dll and is displayed as Generate Bootstrap Grid. BootstrapGrid

Because BootstrapGrid is defined as a form widget, it is intended to participate in the visual/form-design experience rather than operate as a conventional workflow process step.

Typical Workflow Suggestions:

Customer Registration Form

Use BootstrapGrid to organize customer registration fields into a structured layout.

Example workflow:

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

The grid can provide an organized structure for fields such as customer name, email, phone, and other registration information.

Employee Onboarding Form

Use BootstrapGrid to arrange employee onboarding information into logical sections.

Example workflow:

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

The grid can help organize personal, employment, and other onboarding information within the form.

Order Entry Form

Use BootstrapGrid to structure an order-entry form containing multiple related fields.

Example workflow:

Start → Order Form → Validate Order → Approve Order → Process Order → End

Use the grid as part of the form layout to organize order and customer information.

Service Request Form

Use BootstrapGrid when a service request form contains multiple groups of information that need to be presented in an organized layout.

Example workflow:

Start → Service Request Form → Assign Request → Perform Service → Close Request → End

The grid can provide a structured layout for request details and other form information.

Approval Form

Use BootstrapGrid to organize information presented to an approver before an approval decision is made.

Example workflow:

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

The grid can help arrange request information and approval-related controls in a consistent form layout.

Example:

Let’s build and execute the “BootstrapGridDef” example.  

• Create a Form definition called “BootstrapGridDef.” Navigate to Forms > Definitions in the left pane to create it. On the Form Definitions page, select Actions > Create. Check with your FlowWright administrator if you don't have access to generate Form Definitions. 

• Drag a "BootstrapGrid, Label, Text, Checkbox, and Submit” control to the canvas and arrange them as shown below.

• Double-click the “BootstrapGrid” widget to configure its “Settings.” The application displays the control's name. Choose the grid layout from the “Container” and “Container Fluid” options. “Container Fluid” expands to fill the display page size when rendered. Design the grid as a table using the "Add Row" and "Add Column" features. Click the “Save” button. 

• Double-click the “BootstrapGrid” widget to configure its “Styling”. Choose the border style (solid, dotted, dashed, or none) from the drop-down menu. Pick the background color from the color palette drop-down. The selected color applies to the entire table, covering all rows and cells. To change a cell’s background color, right-click the cell and select the color type again from the palette. Adjust the cell’s text alignment using the horizontal and vertical options. Click the Save button. 

• Another way is to right-click the Bootstrap grid and set the background color for the whole table using the available UI. Choose a color from the dropdown menu and apply it.  

• Drag the label controls as needed and configure them as shown below. Provide a label name and the text to display. Select the “Enable Multi Text” checkbox to display longer text across multiple lines. Click the “Lock Widget” button to toggle the lock/unlock feature and prevent accidental configuration changes. Click the “Save” button. 

• Choose the Styling tab to set label styles and foreground and background colors. Use the alignment buttons to align the text horizontally or vertically. Use the font size and styles to design appropriately. Click the “Lock Widget” button to toggle the lock/unlock feature and prevent accidental configuration changes. Click the “Save” button. 

• Save the Form definition. Then, go to Actions > Create Form Instance to generate a new one. After creating it, select the checkbox to edit the Form Instance. If you don't have permission to generate Form Instances, consult your FlowWright administrator.

• The Form is shown below. Enter your input and click the Submit button to finish.  

• To enhance the visual appeal, add a line widget between rows in the BootstrapGrid container. The Form design view is shown below. 

• The example below shows the displayed form. 

• Right-click the Bootstrap grid to add a row or column, as shown.

• Set the new row to be inserted before, after, or at the end of the current row. Enter the total number of rows and columns, then click the Create button to confirm.  

• Set the new column to be inserted before or after the current one. Enter a value for the total number of columns. Click the Create button to confirm the action.  

• Right-click the bootstrap table, then use the Duplicate Row option to duplicate the current row.

• Select the position to insert the duplicate row. Enter the number of rows to repeat. 

• The duplicate row is placed per the configuration, as shown below. 

Tips:

• Use BootstrapGrid when related form controls need to be arranged in a structured grid.
• Group logically related fields within the grid layout.
• Keep the form layout consistent across similar business processes.
• Avoid assuming specific grid configuration options that are not exposed by the widget definition.
• Test the completed form to ensure that the layout provides a clear user experience.

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: Please verify and complete the import process steps for 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.