Description
With the BootstrapGrid container widget, you can create multiple bootstrap rows and columns and place controls within each column, as shown in the graphic below. You can place sub-forms within each bootstrap column.
Inputs
- FormID - Name of widget generated by FlowWright (read-only field)
- Grid layout - Select between Container and Container-Fluid options
- Border - Select between Solid, Dotted, Dashed, and None options for borderline type
- Background - Select the background color from the palette
- Horizontal Alignment - Left / Center / Right
- Vertical Alignment - Left / Center / Right
- Add Row - Add row before/after the mouse cursor selection
- Add Column - Add column before/after the mouse cursor selection
- Save button - Save the input values
- Delete button - Remove this form widget from the designer page
- Delete Column - Delete the column at the mouse cursor selection
- Delete Row - Delete the row at the mouse cursor selection
- Close button - Close the input popup window
Design:
Example:
Let’s build and execute the BootStrapGridDef example.
- Create a new form definition called “BootStrapGridDef.”
- Select the Open Designer checkbox and click the “Create” button
- Drag a “BootStrapGrid” widget to the canvas
- Double-click on the widget to configure its “Settings,” as shown in the graphic below. Name the control. Choose the grid layout between Container and Container Fluid options. Use Add Row or Add Column to create a table of contents.
- Double-click on the widget to configure the “Styling,” as shown in the graphic below. Choose between the Solid, Dotted, Dashed, and None borderline styles. Use the color palette drop-down to select the background color. The color selection applies to the entire table, covering all rows and column cells. Right-clicking on a cell and selecting the color type again from the palette allows you to configure a different background color. You can also configure the text alignment with the cell using horizontal and vertical options.
- An alternative approach is to right-click on the bootstrap grid and configure the background color for the entire table using the following UI. Select the color palette from the dropdown list and apply.
- Drag label controls as required and configure them as shown in the graphic below. Provide a label name and label text to display. Select the “Enable Multi Text” check box to display longer text as multiple lines.
- Select the Styling tab to configure label styles and foreground and background colors.
- Click the Save button and Close the popup window. Then, navigate to the UI menu and Preview the form. The rendered bootstrap table will look like the image below.
- To improve the aesthetic appeal, you can add a line widget between rows within the BootstrapGrid container widget. The form design view is shown below.
- The view of the form rendered is shown below.
- Right-click on the bootstrap grid to add a row or column, as shown in the image below.
- You can configure the new row to be inserted before, after, or at the last position relative to the current row. Provide a value for the total number of rows and columns. Then, click on Create to confirm the action.
- Configure the new column to be inserted before or after the position concerning the current column. Provide a value for the total columns. Click on Create to confirm the action.
- Right-click on the bootstrap table and use the Duplicate Row option to duplicate the current row.
- Select the position to insert the duplicate row. Provide a value for total rows to repeat duplication.
- The duplicate row is placed per the configuration, as shown in the image below.
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.