Description
With BootstrapGrid container widget, you can create multiple bootstrap rows, columns and place controls within each column as shown in the below graphic. 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 border line 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 below graphic. Select the border line 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 color type again from the palette. Configure the text alignment with the cell by horizontal and vertical options.
- 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 as shown in the below graphic. Provide a label name. Provide a label text to display. Select the check box “Enable Multi Text” for display longer text as multiple lines.
- Select Styling tab to configure label styles and foreground and background colors.
- Click on Save button and Close the popup window. Navigate to UI menu and Preview the form. The rendered bootstrap table will look as shown in the image below.
- Within 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 row or column as shown in the image below.
- Configure the new row to be inserted before, after or last position with reference to the current row. Provide a value for total rows and columns. Click on Create to confirm the action.
- Configure the new column to be inserted before or after position with reference to 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 as per the configuration; like shown in the image below.
