BootstrapGrid Widget

Last published at: May 2nd, 2023

Description:

With BootstrapGrid container widget, you can create multiple bootstrap rows, columns and place controls within each column as shown in the below graphic. In v9.12 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
  • 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 inputs as shown in the below graphic

  • Click on the Background drop-down and select the color from the palette.  
  • Click on the Add Row button to add the row before /after the mouse cursor selection
  • Click on the Add Column button to add the column before/after the mouse cursor selection. 
  • Click on Save button and Close the popup window
  • Navigate to UI menu and Preview the form. The rendered widget will look as shown in the below graphic

  • With BootstrapGrid container widget, you can add a line widget as a separator between rows to improve the aesthetic appeal. The form design view and the rendered view is as shown below. 

  • In v9.12 the bootstrap grid view supports the background color and column content alignment