Form Data Blocks - MFC Safe Pty. Ltd.

Understand and manage the Form Data Blocks

Hidden

A Hidden component can be added to a form to create a resource property that can be custom set in a form. You can use JavaScript to set the value on the client side and when the form is submitted the value will be set on the resource. There is no front end widget for hidden components. They don’t display in the rendered forms.

Hidden component display in the edit form

Below is a list of the main settings of the Hidden component.

Hidden component settings

Container

A Container is a wrapper around a set of fields, similar to a Field Set. 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.

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.

Container component display in the edit form

Below is a list of the main settings of the Container component.

Data Map

A Data Map component allows users to create key / value pairs. Both the key and the value fields can get the values while filling out the form. New pairs can be added to the form by the ‘Add Another’ button, and removed by the ‘X’ (Remove Row) button.

Data Map component display in the form

The Key component cannot be changed and will always be a Text Field. The Value component can be changed from the default Text Field to any other component (e.g. Text Area, Number, Checkbox etc.).

Below is a list of the main settings of the Data Map component.

Data Map component settings #1

Data Map component settings

Label for Key Column: A label text for a Key column. If left empty, the ‘Key’ label will be used by default.

Disable Adding / Removing Rows: Hides the ‘Add Another’ and the ‘Remove Row’ buttons.

Show Key Column Before Value: Makes the Key column show before the Value column. If unchecked, the Value column will show first.

Add Another Text: Sets the text of the ‘Add Another’ button.

Data Grid

Data Grids allow users to add multiple components on to a line item grid. Once placed, users can add multiple components inside 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.

By default, the grid is empty, but can have other form components placed inside.

Data Grid without components in the edit form

The example below illustrates three components placed inside the Data Grid. A new column is automatically added whenever another component is added to the data grid interface.

Data Grid with components in the edit form

The example below shows the Data Grid in the rendered form. Rows can be dynamically added, and removed as highlighted below.

Data Grid with several rows in the rendered form

Below is a list of the main settings of the Data Grid component.

Data Grid component settings #1

Data Grid component settings #2

Disable Adding / Removing Rows: Hides the ‘Add Another’ and the ‘Remove Row’ buttons.

Conditional Add Button: Gives a possibility to specify a condition when the ‘Add Button’ will be displayed.

Add Another Text: Sets the text of the ‘Add Another’ button.

Add Another Position: Allows you to specify a position for the ‘Add Another’ button with respect to the Data Grid. The button can be at the top of the Data Grid, at the bottom, or in both places at one.

Allow Reorder: Allows reordering rows by dragging and dropping them.

Equal Column Width: Makes the column sizes be equal in width.

Enable Row Groups: Allows separating Data Grid rows into groups. You can add groups, specify their labels, select a number of rows that will be in certain groups and delete the groups. It’s helpful if you want to set a specific number of rows in the Data Grid and separate them by groups (see an example below).

Data Grid rows separated by groups

Hide Group on Header Click: Makes the group header clickable. When clicked, the whole group is collapsed. When clicked again, it expands and shows the hidden rows.

Initialize Empty: Hides all visible rows when initialized.

Edit Grid

Edit Grids allow users to replicate a table like structure when it comes to the capture and display of form data. Users can add multiple components inside 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.

By default, the grid is empty, but can have other form components placed inside.

Edit Grid without components in the edit form

The example below illustrates five components placed inside the Edit Grid. 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 with components in the edit form

The example below shows the Edit Grid in the rendered form. The form layout is displayed when the ‘Add Another’ button is pressed, and the form appears below the grid for user entry. Once the forms are filled out, press the ‘Save’ button inside each of them.

Edit Grid with 2 form layouts in the rendered form

When the forms are saved, the data entries are added to the table, and the data display in the entries below each respective header, independent of the form layout. If you want to edit the saved data entry, press the ‘Edit Row’ button next to the appropriate entry, which then will turn into the form layout for editing. If you want to remove a certain data entry, just press the ‘Remove Row’ button.

Edit Grid with 2 data entries in the rendered form

Below is a list of the main settings of the Edit Grid component.

Edit Grid main component settings #1

Edit Grid main component settings #2

Open First Row When Empty: Opens up the first row when the Edit Grid is empty. This way, the Edit Grid will never be empty.

Disable Adding / Removing Rows: Hides the ‘Add Another’ and the ‘Remove Row’ buttons.

Display Edit Grid as Table: Uses the Table template for rendering the Data Grid.

Conditional Add Button: Gives a possibility to specify a condition when the ‘Add Button’ will be displayed.

Below is a list of the specific settings of the Edit Grid component.

Edit Grid specific component settings #1

Edit Grid specific component settings #2

Header, Row and Footer Templates: Edit Grid gives the user flexibility to customize the grid to how they see fit using basic JavaScript. Within the Template section of the component settings, the user can modify what type of components are displayed within the grid row along with the header / footer.

Add Another Text: Sets the text of the ‘Add Another’ button.

Display As Modal: Shows up the form layout to add or edit a data entry in a modal view.

Save Row Text: Sets the text of the ‘Save Row’ button.

Remove Row Text: Sets the text of the ‘Remove Row’ button.

Tree

A Tree component is very similar to the Edit Grid component. It replicates a table like structure when it comes to the capture and display of form data. But, in comparison with the Edit Grid, the Tree component creates a tree like pattern where users can create a numerous number of data branches. There can only be one top level data entry – a root data entry, which is followed by level 1 data branches, which then are followed by level 2 data branches and so on.

By default, the component is empty, but can have other form components placed inside.

Tree without components in the edit form

The example below illustrates four components placed inside the Tree. 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.

Tree with components in the edit form

The example below shows the Tree component in the rendered form. The form layout is displayed when initialized, by default. Once filled in, click the ‘Save’ button to save the top level data entry.

Tree with a form layout of the top level data entry in the rendered form

When the form is saved, the root data entry is added to the table. To add a level 1 data entry, press the ‘Add’ button next to the root data entry, and the new form layout will open then for filling in. Once filled in, it will display as a branch below the root entry. The same way it works for any other levels of data entries.

Tree with a form layout of the level 1 data entry in the rendered form

When the form is saved, the level 1 data entry is added to the table as a branch entry stemming from the top level entry. If you want to edit any data entry, just press the ‘Edit’ button next to the data entry you want to edit. It will turn to the form layout, which can be edited then. If you like to delete any data entry, press the ‘Delete’ button next to that data entry.

Tree with 2 data entries in the rendered form

For convenience matter, when the number of data entries is quite big, you can collapse them by pressing an appropriate button next to the parent data entry.

Tree with expanded data entries in the rendered form

When you want to show them again, press the ‘Expand’ button next to a corresponding parent entry. If you edit data of one of the entries and save the changes, you will see the ‘Revert’ button next to that data entry. When pressed, the changes will be reverted.

Tree with 2 collapsed and 1 changed data entries in the rendered form

Below is a list of the main settings of the Tree component.

Tree component settings