JSON Form Layout Containers
Description
Two new Container controls have been added to JSON forms: FreeFormLayout and CSSGrid. These containers provide advanced layout capabilities using HTML templates or CSS Grid definitions.
Overview
Two new Container controls have been added to JSON forms. These are FreeFormLayout and CSSGrid.
The image below shows the dialog for the Add item button with the Containers category selected.
FreeFormLayout Container
The FreeFormLayout container allows you to define an HTML template (in the control's Template property) that includes placeholders for the controls contained within the container.
The FreeFormLayout container is functionally equivalent to the Group container (with the template specified in the Group control's Layout property).
CSSGrid Container
The CSSGrid container allows you to define a CSS grid layout (e.g. number of columns, number of rows, gap between columns and rows, etc.) and then place the controls contained within the container in individual cells within the grid.
To define the CSS grid template, click the smart field for the CSS Grid template property, or double click on the CSSGridStart item in the list of selected controls.
CSS Grid Genie
The genie for defining the CSS grid is shown in the image below.
Using the CSS Grid Builder
The image below shows the builder for the CSS grid.
You can set the number of rows and columns in the grid. You can also set the gap between rows and columns.
The list on the left shows the controls in the container. Each control must be placed in a cell in the grid. Controls that are not added to the grid will *not* be rendered. Controls that have been added to the grid are shown as *bolded*.
To add a control to the grid, click on the target cell. A pop-up menu showing all of the controls is shown. Select a control. If you select a control that had previously been added to another cell in the grid, the control is moved from its original location to the target cell.
Spanning and Justification
For each control on the grid, you can specify how many rows and columns the control should span, and how the control should be justified (both horizontally and vertically), within the cell.
See Also