Layout Components

Layout Components are used to change the general layout of the Form.

Columns

The Column layout component can be used to split any area into two columns. Simply drag and drop the Column button onto the form and the area you drop it on will be split in two.

Field Set

A fieldset can be used to create a title of an area of the form. This is useful to put inside Layout components or in between lots of related fields. This form component is display only and will not be saved to the api.

32 field set

Fieldset Legend

Enter the legend that will appear for the fieldset.

Custom CSS Class

A custom CSS class to add to this component. You may add multiple class names separated by a space.

Panels

Panels are used to wrap groups of fields with a title and styling. These currently map to Bootstrap Panels.

33 panels

Panel Title

Enter the panel title that will be displayed at the top of the panel.

Theme

The theming of the panel. Select one of the options to have the class added to the wrapper div.

Custom CSS Class

A custom CSS class to add to this component. You may add multiple class names separated by a space.

Table

The table component allows creating a table with columns and rows that allow adding additional components within it.

34 table

Number of Rows

The number of rows on the table. This can be adjusted at any time.

Number of Columns

The number of columns on the table. This can be adjusted at any time.

Custom CSS Class

A custom CSS class to add to this component. You may add multiple class names separated by a space.

Striped

Whether or not the table is striped for odd and even rows.

Bordered

Whether or not the table has a border set on it. (This can be changed by your own CSS as well)

Hover

Whether or not to add a hover class on rows when the mouse hovers over them.

Condensed

Whether or not to condense the size of each sell by removing padding.

Well

Wells are wrapped in a div with a class. These currently map to Bootstrap Wells.

Container

A container is a wrapper around a set of fields similar to a fieldset. The major way they are different is the way that the data is stored. For most layout components field values are stored directly in the data of the submission.

For example, a fieldset with the following fields

firstName = First Name field lastName = Last Name field Would submit as { data: { firstName: “Joe”, lastName: “Smith” } }

However, with a container, the fields are put into an object with the container key. This is useful for creating more complex objects within your form.

For example, a container with the key user and the same fields above would submit as { data: { user { firstName: “Joe”, lastName: “Smith” } } }

Label

The name or title for this component. Here label is only display at the time of creating or editing a form to represent container while adding form elements to it. It will later disappear in live.

Custom CSS Class

A custom CSS class to add to this component. You may add multiple class names separated by a space.

Protected

If checked, this field is for input only. When being queried by the API it will not appear in the properties. You can still see the value on form.io by going to the submissions for a form.

Persistent

If checked, the field will be stored in the database. If you want a field to not save, uncheck this box. This is useful for fields like password validation that shouldn’t save.

Table View

If checked, this value will show up in the table view of the submissions list.

Data Grid

Data Grids allow you to add multiple components on to a line item grid. Once components are in place, users can add multiple sets of these grids as they see fit. This is especially useful when needing the ability to add multiple sets of the same fields within a form.

data grid view

Label

The name or title for this data grid.

Add Another Text

Text that will display for the Add Another

Custom CSS Class

A custom CSS class to add to this component. You may add multiple class names separated by a space.

Striped

Whether or not the table is striped for odd and even rows.

Bordered

Whether or not the table has a border set on it. (This can be changed by your own CSS as well)

Hover

Whether or not to add a hover class on rows when the mouse hovers over them.

Condensed

Whether or not to condense the size of each sell by removing padding.

Protected

If checked, the fields in the data grid are for input only. When being queried by the API it will not appear in the properties. You can still see the value on form.io by viewing the form submissions.

Persistent

If checked, the fields in the data grid will be stored in the database. If you want a field to not save, uncheck this box. This is useful for fields like password validation that shouldn’t save.

Table View

If checked, this fields in the data grid will show up in the table view of the submissions list.