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 the “Settings” as shown in the below graphic. Provide a name to the control. Select the grid layout between Container or Container Fluid options. Use Add Row or Add Column as required to create a table of contents.
- Double-click on the widget to configure the “Styling,” as shown in the graphic below. Select the borderline styles between Solid, Dotted, Dashed, and None options. Select the background color using the color palette drop-down. The color selection is applied to the entire table, covering all rows and column cells. Individual cells can be configured with a different background color by right-clicking on the cell and selecting the color type again from the palette. 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 check box “Enable Multi Text” to display longer text as multiple lines.
- Select the Styling tab to configure label styles and foreground and background colors.
- Click on the Save button and Close the popup window. Navigate to the UI menu and Preview the form. The rendered bootstrap table will look like the image below.
- Within the BootstrapGrid container widget, you can add a line widget as a separator between rows to improve the aesthetic appeal. The form design view is as shown below.
- The form rendered view is as shown below.
- Right-click on the bootstrap grid to add a row or column, as shown in the image below.
- 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 rows and columns. 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.
