Data Components
Read more about Data components below:
Data components are fields that manipulate the way Data is presented, saved, and organized.
Hidden
The Hidden component is used to include data in a form that is not visible to users but is submitted with the form data. It's often used for purposes such as storing metadata, user information, or default values that should not be modified or seen by the user. While there is no front-end widget or display for hidden components, the component will be visible within the form builder to access the component settings where data calculations and logic can be configured. These calculations or logic can be utilized to facilitate more advanced workflows on your form or application.
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
}Container
A Container is a hidden wrapper that is used to group other form components together within a form. What makes the Container unique to the other Layout components is how it stores component data. The components inside the Container are grouped into an object under the Container's API Property key and are saved within the metadata structure of the submission. This feature is particularly useful for creating more complex objects and data sets within your form.
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
tree
Determines if the Validation should be performed within this component
true
false
true
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.
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"
}
}
}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.
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 entire group will collapse. 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
components
An array of other components that represent a single row for the data grid.
[]
true
[]
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.
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 the Javascript Lodash library. Within the Template section of the component settings, users can modify what type of components are displayed within the saved grid row along with the header/footer. By default, the templates will output all fields within the editgrid when a row is saved.
See the Field Examples tab for code and form examples.
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.
Edit Grid Examples
Header / Row Template Example
The following code examples showcase how to configure the Header and Row Templates using the Javascript Lodash library. This allows the user to customize the way the Edit Grid displays data when a row is saved.
The use case - There are 7 different components inside my Edit Grid. I want the Edit Grid to showcase the most relevant fields to save horizontal space when the row is saved.
Header Template - Headers will change the column headers for the edit grid when the row is saved. In this example, I've created 3 columns with the headers: Employee ID, Name, Email
Two available variables. "value" is the array of row data and "components" is the array of components in the grid.
<div class="row">
<div class="col-sm-2">
Employee ID
</div>
<div class="col-sm-2">
Name
</div>
<div class="col-sm-2">
Email
</div>
</div>Row Template - The Row template enables users to customize UI elements within a row like buttons and map the row's field data with a column in the header template. In this example, I'm using the row variable to map field data to an associated column in the header. The row buttons have also been customized to change the styling and text.
Three available variables. "row" is an object of one row's data, "components" is the array of components in the grid, and "state" is the current row's state (can be "draft" or "saved"). To add click events, add the classes "editRow" and "removeRow" to elements.
<div class="row">
<div class="col-sm-2">
{{ row.employeeId }}
</div>
<div class="col-sm-2">
{{ row.firstName}} {{row.lastName }}
</div>
<div class="col-sm-2">
{{ row.email }}
</div>
<div class="col-sm-2">
<div class="btn-group pull-right">
<div class="btn btn-info editRow">Edit</div>
<div class="btn btn-danger removeRow">Delete</div>
</div>
</div>
</div>Form Example
.
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": []
}Last updated
Was this helpful?