Advanced Data - bcgov/common-hosted-form-service GitHub Wiki

This documentation is no longer being updated. For the most up to date information please visit our techdocs

Home > CHEFS Components > Form Builder Components > Advanced Data

image Advanced data components are fields that manipulate the way Data is presented, saved, and organized.

Hidden

Back to top

The Hidden component is more of an open-ended tool to be used within the form or application. While there is no front-end widget or display for hidden components, the component will be visible within the form builder. The Hidden component can handle behind-the-scenes calculations or logic needed to facilitate more advanced workflows on your form or application.

hidden

Container

Back to top

A Container is a wrapper around a set of fields, similar to a Field Set. What makes the Container unique is the way the data is stored. The fields inside the Container are put into an object with the container key. This is useful for creating more complex objects and data sets within your form.

Container

Data Map

Back to top

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

Data Grid

Back to top

Data Grids allow users to add a grouping of components on a line item grid. Users can then add multiple rows of the component grouping 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 fieldsets.

You can create multiple rows of data to create a set of Data points. Use the Data Grid Component in the Form Builder to start creating new rows.

Drag and drop a Data Grid Component into the designer.

Add other components into the Data Grid's columns to populate the rows of the Data Grid.

Once you have populated all of the columns that you want for this Data Grid, you can save your form to test it out. You will simply be able to click the + Add Another when filling out the form.

Tips

If you require a high volume of columns in your Data Grid, we suggest that you organize your Components within your Data Grid by inserting additional Columns to organize all of the Data.

You can also download an example file and import it into your design to test out columns in the Data Grid Example: advanced-data-grid.json

Examples

Try a working example: View simple example View advanced example

You can also download the example files and import it into your design Simple: simple-data-grid.json Advanced: advanced-data-grid.json

Edit Grid

Back to top

The Edit Grid replicates 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 fieldsets. There is also flexibility in how the Edit Grid data rows are saved and displayed to the end user.

Edit grid

Tree

Back to top

A Tree component is very similar to the Edit Grid component. It replicates a table-like, hierarchical structure when it comes to the capture and display of form data. However, in comparison with the Edit Grid, the Tree component creates a tree-like pattern where users can create a number of data branches. There is only 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. Each level is shaded differently to easily decipher the different relationships.

Tree

Back to top