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 users to add multiple components on to a line item grid. Once placed,
users can add multiple components inside of the Data Grid. Additionally, any number of grids can be added within a form which is especially useful when needing the ability to add or duplicate multiple fields sets.

From the Data component menu, add the Data Gird (Array) to any active form. By default the grid is empty but can have other form components placed inside.

Data Grid Example

 

The example below illustrates three Basic Components placed inside of a Data Gird (Array). A new column is automatically added whenever another component is added the the data grid interface

Data Grid Example

 

Below is an in depth look at the specific data grid options that users can add or interface with as of the 5.0.0 release.

Data Grid Component Details

Label

  • The name or title for this data grid.

Tooltip

  • Adds a tooltip to the side of this field

Error Label

  • The label for this field when an error occurs.

Add Another Text

  • Text that will display for the Add Another button instead of the default.

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.

Clear Value When Hidden

  • When a field is hidden, clear its value.

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.

Encrypted (Enterprise Only)

  • Encrypts the Data submitted in this form.

Hidden

  • Make the object hidden, it still exists within the form, but cannot be viewed.

Hide Label

  • Hide the label of this component.

Disabled

  • Disables the form input.

Table View

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

 

An example of the Data Grid displayed in the Use tab.

Data Grid Example

 

Rows can be dynamically added, and removed as highlighted below.

Data Grid Example

 

Data can be submitted and edited via the traditional platform interfaces.

Data Grid Example

Edit Grid

Edit Grids allow users to replicate an table like structure when it comes to the capture and display of form data. Users can add multiple components inside of the Edit Grid. Additionally, any number of grids can be added within a form which is especially useful when needing the ability to add or duplicate multiple fields sets.

From the Data component menu, add the Edit Gird (Array) to any active form. By default the grid is empty but can have other form components placed inside.

Edit Grid Example

 

The example below illustrates three Basic Components placed inside of a Edit Gird (Array). Layout components can be used to replicate the split view below, and additional rows are added automatically when additional form elements are dragged into the interface.

Edit Grid Example

 

Below is an in depth look at the specific data grid options that users can add or interface with as of the 5.0.0 release Edit Grid Component

Label

  • The name or title for this data grid.

Tooltip

  • Adds a tooltip to the side of this field

Clear Value When Hidden

  • When a field is hidden, clear its value.

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.

Encrypted (Enterprise Only)

  • Encrypts the Data submitted in this form.

Hidden

  • Make the object hidden, it still exists within the form, but cannot be viewed.

Hide Label

  • Hide the label of this component.

Disabled

  • Disables the form input.

Table View

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

 

An example of the Edit Grid displayed in the Use tab.

Edit Grid Example

 

As Entries are added the table displays the data below each respective header independent of the form layout.

Edit Grid Example

 

The form layout is displayed when Add Another is pressed, and the form appears below the grid for user entry.

Edit Grid Example

 

Once submitted, form data can be viewed and edit via traditional platform methods.

Edit Grid Example