Data Components

Read more about Data components below:
Data components are fields that manipulate the way Data is presented, saved, and organized. 
Hidden
Execute logic or workflows behind the scenes with the Hidden component
​
Container
Add components to a Container to save the field set as an Object. 
​
Data Map
Create Key/Value pairings. 
​
Data Grid
Add an rows of field groupings.
​
Edit Grid
Add Field Sets and customize how the Grid saves and displays the row
​
Tree
Create a hierachy of field sets in a Tree type display
​
Hidden
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.
Unique Settings
Guidance
JSON
There are no unique settings for the Hidden component
Use hidden components to contain Calculated Values for use in workflows and Logic within your application or form.
{
  "label": "Hidden ",
  "key": "hidden",
  "type": "hidden",
  "input": true,
  "tableView": false
}
​Click here for a full list of JSON Schema definitions​
Container
 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.
Unique Settings
Guidance
JSON
There are no unique settings for the Container component
Coming Soon...
Component Schema
{
  "label": "Container",
  "tableView": false,
  "key": "container",
  "type": "container",
  "input": true,
  "components": []
}
Data Map Data Structure: userInformation being the Container key
{
 data: {
    userInformation {  
      firstName: “Joe”,
      lastName: “Smith”,
      email: "[email protected]"
    }
  }
}
Specific Properties
Property
Description
Value
Required
Default
tree
Determines if the Validation should be performed within this component
true
false
true
​Click here for a full list of JSON Schema definitions​
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.
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.).
Unique Settings
Field Examples
Guidance
JSON
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.
​
​
Coming Soon...
Component Schema
{
  "label": "Data Map",
  "addAnother": "Add Key Pairing",
  "customClass": "pr-4 pl-4",
  "tableView": false,
  "key": "dataMap",
  "type": "datamap",
  "input": true,
  "valueComponent": {
    "type": "textfield",
    "key": "value",
    "label": "Value",
    "input": true,
    "hideLabel": true,
    "tableView": true
  }
}
Data Map Data Structure: dataMap being the Data Map key
{
 data: {
    dataMap {  
      key: "Kuhn - Kshlerin"
      key1: "Keebler, Brown and Lind"
      key2: "Franecki, Lehner and Prohaska"
    }
  }
}
​Click here for a full list of JSON Schema definitions​
Data Grid
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.
Unique Settings
Field Examples
Guidance
JSON
Disable Adding / Removing Rows: Hides the 'Add Another' and the 'Remove Row' buttons.
Conditional Add Button: Specify a condition when the 'Add Button' will be displayed.
Allow Reorder: When set, the user can reorder the Data Grid rows.
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).
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.
Use the Minimum/Maximum settings in the Validation tab to dictate the minimum or maximum number of rows that can be saved. When the Minimum number of rows has been met the Delete Row button will dynamically be removed. When the Maximum number of rows has been met, the Add Another Row button will dynamically be removed. 
Use different Layout components within the Edit Grid to create different field set formats 
Use the Allow Reorder setting to give users the ability to rearrange or rank the Data Grid rows. 
{
  "label": "Data Grid",
  "reorder": false,
  "addAnotherPosition": "bottom",
  "layoutFixed": false,
  "enableRowGroups": false,
  "initEmpty": false,
  "tableView": false,
  "defaultValue": [
    {}
  ],
  "key": "dataGrid",
  "type": "datagrid",
  "input": true,
  "components": []
}
Specific Properties
Property
Description
Value
Required
Default
components
An array of other components that represent a single row for the data grid.
[]
true
[]
​Click here for a full list of JSON Schema definitions​
Edit Grid
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.
Unique Settings
Field Examples
Guidance
JSON
Open First Row When Empty: When the form is initially loaded, an initial row is opened for the user to fill out. Please note that when this setting is checked, the row must be saved to submit the form, even if left empty. 
Disable Adding / Removing Rows: Hides the 'Add Another' and the 'Remove Row' buttons. Use this setting 
Display Edit Grid as Table: Uses the Table template for rendering the Data Grid.
Conditional Add Button: This gives a possibility to specify a condition when the 'Add Button' will be displayed.
Header, Row, and Footer Templates: Customize the grid to how you 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 saved 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.
Use the Display as Modal setting when dealing with large field sets to save space on your form.
Customize your Header Templates so only the most relevant field data is displayed when a row is saved. This will become necessary when dealing with large fieldsets.
Use the Minimum/Maximum settings in the Validation tab to dictate the minimum or maximum number of rows that can be saved. When the Minimum number of rows has been met the Delete Row button will dynamically be removed. When the Maximum number of rows has been met, the Add Another Row button will dynamically be removed. 
Use different Layout components within the Edit Grid to create different field set formats 
{
  "label": "Edit Grid",
  "tableView": false,
  "rowDrafts": false,
  "key": "editGrid",
  "type": "editgrid",
  "displayAsTable": false,
  "input": true,
  "components": []
}
​Click here for a full list of JSON Schema definitions​
Tree
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.
Unique Settings
Field Example
Guidance
JSON
Add: Adds a new hierarchical row underneath the parent row.
Edit: Edit the field data within the row.
Collapse: Collapse everything beneath the row. 
Delete: Deletes the row.
Revert: Undo the button that returns the data back to it's previous state.
Coming Soon...
{
  "label": "Tree",
  "tableView": false,
  "key": "tree1",
  "type": "tree",
  "input": true,
  "tree": true,
  "components": []
}
​Click here for a full list of JSON Schema definitions​
Property	Description	Value	Required	Default
tree	Determines if the Validation should be performed within this component	`true`	`false`	`true`
Property	Description	Value	Required	Default
components	An array of other components that represent a single row for the data grid.	[]	`true`	[]
Layout Components
Premium Components
Last modified 1mo ago