Layout Components

Learn more about Layout components

Layout components are used to change the general layout and position of fields on a form. Utilize HTML or a WYSIWYG editor to add logos, headers, or static contextual language to the form. You can find information for each of the Layout Components like unique settings, JSON code, and field examples below:
HTML Element
Write your own HTML to add headers, images, etc
​
Content
Use a WYSIWYG editor to add and format text.
​
Columns
Add columns to display fields side by side.
​
Field Set
Create a Legend or Header for section in your form. 
​
Panel
Use a Panel to encapsulate groups of fields
​
Table
Static table with rows and columns
​
Tabs
Group fields inside vertical or horizontal Tabs.
​
Well
Div class CSS wrapper 
​
HTML Element
An HTML Element component may be added to a form to display a single HTML Element. This is useful if you wish to quickly insert and configure some HTML in your form. All unsafe HTML is stripped before rendering to prevent cross-site scripting exploits. This includes tags like <script>, <embed>, and <style>, and attributes like onmouseover or onload.
Ensure all HTML elements are properly closed as misconfigured HTML can cause issues with moving or editing other components on the form. 
If writing HTML is not your preference, use the WYSIWYG editor with the Content component as an alternative to writing HTML. 
Unique Settings
Field Example
Guidance
JSON
HTML Tag: The name of the HTML tag to display.
CSS Class: The CSS class to add to the HTML Element. You may specify multiple classes by separating them with single spaces.
Attributes: Attributes and their values to add to the HTML Element. This is commonly used to add href attributes to <a> tags, or src attributes to <img> tags.
Content: The text content of the HTML Element. While adding more child HTML tags here will properly display them, it is recommended you use the Content component to easily write and preview more complex HTML.
Refresh on Change: Makes the HTML Element re-renders whenever any value in the form changes. It might be useful when you want the HTML Element to display dynamic data of the other components after they are filled in with values during the form filling. Simply enter{{ data.{componentApiKey} }} into the HTML Element and enable this setting.
Coming Soon...
{
  "label": "HTML",
  "attrs": [
    {
      "attr": "",
      "value": ""
    }
  ],
  "refreshOnChange": false,
  "key": "html6",
  "type": "htmlelement",
  "input": false,
  "tableView": false
}
Specific Properties
Property
Description
Value
Required
tag
The HTML Tag to use for this element
Any HTML tag
true
attrs
An array of key-value pairs of attributes and their values to assign to this html element
Any HTML attribute
false
className
The class name to provide to the HTML Element
Any HTML class name
false
content
The HTML content to place within this element.
Any valid HTML
false
​Click here for a full list of JSON Schema definitions​
​
Content
A Content component may be added to a form to provide non-field information such as contextual language, headers, or media. For example, if you need instructions at the top of a form that are for display only, use the Content component. The Content component value is not submitted back to the server.
A WYSIWYG editor has been provided to help with formatting the content. If you use the HTML view of the editor, note that all unsafe HTML is stripped before rendering to prevent cross-site scripting exploits. This includes tags like <script>, <embed>, and <style>, and attributes like onmouseover or onload.
Unique Settings
Field Examples
Guidance
JSON
Heading: Choose a Heading 1-3 or Paragraph 
Font Family: Select your font style preference
Font Size: Change the font size from large to small
Font Emphasis: Add bold or italic emphasis to the content
Link: Add a hyperlink to the form
Indent: Increase or decrease the indent of the text
Insert Media: Add an image from your local machine and or add an online video via URL
Align: Align the text Left, Center, or Right
Use the Content component as a 'Summary Section' by interpollating data from other fields on the form. 
{{ data.firstName }} 
Check the Refresh On Change setting to refresh the content anytime field data is changed on the form. This will ensure your summary section is constanstly updated with the latest date EG
Interpolate data using the Content Component
{
  "label": "Content",
  "refreshOnChange": false,
  "key": "content1",
  "type": "content",
  "input": false,
  "tableView": false
}
Specific Properties
Property
Description
Value
Required
Default
html
The HTML contents of this component
Any HTML string
true
​
Sanitize Configuration
In order to allow specific tags and attr in the content component, please see Sanitize Configuration​
​Click here for a full list of JSON Schema definitions​
Columns
This component can be used for grouping other components, like Text Field, Text Area, Checkbox etc., into configurable columns. Use Columns if you want to display more than one component in one line or to save vertical space on your form. 
Unique Settings
Field Examples
Guidance
JSON
Column Properties: Here you can configure a number of columns that will be displayed in a form and specify the size, width, offset, push and pull settings for each column. When configured, you can easily rearrange the columns using the drag & drop feature without a need to make everything from scratch.
Auto Adjust Columns: If all the nested components inside one of the columns are hidden, all the other columns' positions will be adjusted.
To evenly span your columns across the width of the form, the Column Property Width needs to equal 12 between all columns. 
Adding components into columns will ensure they respond in the correct order when viewing the form from a mobile device or screens with smaller widths.  
Ensure the Width total of your columns equal 12 in order to span the columns across the full width of the form without spilling the fields under to the next line.
Columns component settings
{
  "label": "Columns",
  "columns": [
    {
      "components": [],
      "width": 6,
      "offset": 0,
      "push": 0,
      "pull": 0,
      "size": "md",
      "currentWidth": 6
    },
    {
      "components": [],
      "width": 6,
      "offset": 0,
      "push": 0,
      "pull": 0,
      "size": "md",
      "currentWidth": 6
    }
  ],
  "key": "columns1",
  "type": "columns",
  "input": false,
  "tableView": false
}
Specific Properties
Property
Description
Value
Required
columns
The columns configuration and components.
This is an array of Column Configurations defined below.
true
Column Configuration
The columns definition is defined as an array of column configurations. Let's say you have 3 different columns, and your schema may look like the following.
{
  "type": "columns",
  "columns": [
    {
      ... COLUMN CONFIGURATION ...
    },
    {
      ... COLUMN CONFIGURATION ...
    },
    {
      ... COLUMN CONFIGURATION ...
    }
  ]
}
where each column configuration has the following schema.
Property
Description
Value
Required
Default
components
An array of other components within this column.
Array of Components
true
[]
width
How many Bootstrap grid units wide is this column
6
true
6
offset
The bootstrap column offset.
0
false
0
push
How many bootstrap grid units to push the column
0
false
0
pull
How many bootstrap grid units to pull the column
0
false
0

Click here for a full list of JSON Schema definitions​
Field Set
A Field Set can be used to create a title for an area of the form or grouping of components. This is useful to put inside Layout components or in between lots of related components. The Field Set is for display only and will not be saved to the API.
Unique Settings
Field Examples
Guidance
JSON
Legend: The Legend is the title that is displayed for the Field Set
The Field Set can act as the title of a section or area of your form. This can help with organizing groupings of components or sections of your form. 
{
  "key": "fieldSet1",
  "type": "fieldset",
  "label": "Field Set",
  "input": false,
  "tableView": false,
  "components": []
}
Specific Properties
Property
Description
Value
Required
Default
legend
The text to place within the legend of this fieldset.
Any string
false
​
components
An array of components that are added within this fieldset.
Array of Components
true
[]
​Click here for a full list of JSON Schema definitions​
Panel
A Panel is used to wrap groups of fields with a title and styling. Use the Panel to organize your components and create a more appealing UI. Styling currently maps to Bootstrap Card - Header and Footer.
Unique Settings
Field Examples
Guidance
JSON
Theme: The theming of the Panel. Select one of the options to have the class added to the wrapper div, changing the color of the panel header.
Collapsible: Turn the Panel into a collapsible Panel, allowing users to open and close the panel section.
Initially Collapsed: The Panel will be collapsed on form load. Applied only when the Collapsible setting is enabled.
Hide the label of the Panel to create an organized outline section for your component
Use the collapsible setting with a large number of components, allowing users to hide the fields they don't want to see while they are filling one or another section of the form.
Copy/Paste the Panel to recreate the panel along with all the components inside of it
{
  "collapsible": false,
  "key": "panel",
  "type": "panel",
  "label": "Panel",
  "input": false,
  "tableView": false,
  "components": []
}
Specific Properties
Property
Description
Value
Required
Default
title
The title of the panel
Any string
false
​
theme
Any valid Bootstrap Panel Theme​
One of default, primary, success, info, warning, danger
false
default
components
An array of components that are within this panel.
Array of Components
true
[]
​Click here for a full list of JSON Schema definitions​
Table
Create a Table with columns and rows that allow adding additional components within it.
Unique Settings
Field Examples
Guidance
JSON
Number of Rows: Number of rows that will display in the Table.
Number of Columns: Number of columns that will display in the Table.
Clone Row Components: Clones the components that are in a cell of one of the columns to all the other cells of that column. Use this if you want to add a lot of Table rows that will have the same content.
Cell Alignment: Horizontal alignment for cells of the Table. Can be Left, Center and Right.
Striped: Adds striped shading to the Table rows.
Bordered: Adds visible borders for the Table.
Hover: Highlights a row on a mouse hover.
Condensed: Condenses the size of the Table, making it takes less space.
Add HTML to the first row and column to create labels for your table. Add components and check the 'Hide Label' setting to create a clean-looking table. 
The Table component is not dynamically responsive and will not collapse when viewing the form on mobile devices or small screens.  
{
  "label": "Table",
  "cellAlignment": "left",
  "key": "table1",
  "type": "table",
  "numRows": 1,
  "numCols": 1,
  "input": false,
  "tableView": false,
  "rows": [
    [
      {
        "components": []
      }
    ]
  ]
}
Specific Properties
Property
Description
Value
Required
numRows
The number of rows for this table
integer
true
numCols
The number of columns for this table
integer
true
rows
A multi-dimensional array that provides the rows of the table. Within each row is another array that contains the columns of that row, and within that is the components that are contained within that cell of the table.
Multi-dimensional array
true
header
An array of strings that serve as the header for the columns of the table.
Array of strings for the table header.
false
striped
If the table should be striped
boolean
false
bordered
If the table should contain borders
boolean
false
hover
If the table should have a hover highlight over the rows.
boolean
false
condensed
If the table should be condensed
boolean
false
​Click here for a full list of JSON Schema definitions​
Tabs
This component groups different sets of fields together into separate tabs. Similar to a Wizard flow, users can switch between tabs using a navigation bar with tab buttons, each of which opens a set group of components. Only one tab at a time displays in a rendered form. The Tab CSS currently maps to Bootstrap Navs.  
Unique Settings
Field Examples
Guidance
JSON
Tabs: A data grid that allows adding, configuring, reordering, and removing tabs.
Vertical Layout: Makes the navigation bar display in a vertical orientation instead of the default horizontal layout.
​
{
  "label": "Tabs",
  "components": [
    {
      "label": "Tab 1",
      "key": "tab1",
      "components": []
    }
  ],
  "key": "tabs",
  "type": "tabs",
  "input": false,
  "tableView": false
}
​Click here for a full list of JSON Schema definitions​
Well
Use a well to differentiate or highlight a specific section of the form. Wells are wrapped in a div with a class currently map to Bootstrap Cards. 
Unique Settings
Field Examples
Guidance
JSON
There are no Unique settings for the Well
Use different classes to change the appearance of the Well.
{
  "label": "Well",
  "key": "well1",
  "type": "well",
  "input": false,
  "tableView": false,
  "components": []
}

Property	Description	Value	Required
tag	The HTML Tag to use for this element	Any HTML tag	`true`
attrs	An array of key-value pairs of attributes and their values to assign to this html element	Any HTML attribute	`false`
className	The class name to provide to the HTML Element	Any HTML class name	`false`
content	The HTML content to place within this element.	Any valid HTML	`false`

Property	Description	Value	Required	Default
html	The HTML contents of this component	Any HTML `string`	`true`

Property	Description	Value	Required
columns	The columns configuration and components.	This is an array of Column Configurations defined below.	`true`

Property	Description	Value	Required	Default
components	An array of other components within this column.	Array of Components	`true`	[]
width	How many Bootstrap grid units wide is this column	6	`true`	6
offset	The bootstrap column offset.	0	`false`	0
push	How many bootstrap grid units to push the column	0	`false`	0
pull	How many bootstrap grid units to pull the column	0	`false`	0

Property	Description	Value	Required	Default
legend	The text to place within the legend of this fieldset.	Any `string`	`false`
components	An array of components that are added within this fieldset.	Array of Components	`true`	[]

Property	Description	Value	Required	Default
title	The title of the panel	Any `string`	`false`
theme	Any valid Bootstrap Panel Theme	One of `default`, `primary`, `success`, `info`, `warning`, `danger`	`false`	`default`
components	An array of components that are within this panel.	Array of Components	`true`	[]

Property	Description	Value	Required
numRows	The number of rows for this table	integer	`true`
numCols	The number of columns for this table	integer	`true`
rows	A multi-dimensional array that provides the rows of the table. Within each row is another array that contains the columns of that row, and within that is the components that are contained within that cell of the table.	Multi-dimensional array	`true`
header	An array of strings that serve as the header for the columns of the table.	Array of strings for the table header.	`false`
striped	If the table should be striped	boolean	`false`
bordered	If the table should contain borders	boolean	`false`
hover	If the table should have a hover highlight over the rows.	boolean	`false`
condensed	If the table should be condensed	boolean	`false`

Advanced Components

Data Components

Last modified 2mo ago