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

There are no unique settings for the Hidden component

Guidance

• Use hidden components to contain Calculated Values for use in workflows and Logic within your application or form.

JSON

{
  "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

There are no unique settings for the Container component

Guidance

• Coming Soon...

JSON

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: "[e-mail]"
    }
  }
}

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

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.

Field Examples

Guidance

• Coming Soon...

JSON

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

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.

Field Examples

Guidance

• 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.

JSON

{
  "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

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.

Field Examples

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

.

Guidance

• 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

JSON

{
  "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

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.

Field Example

Guidance

• Coming Soon...

JSON

{
  "label": "Tree",
  "tableView": false,
  "key": "tree1",
  "type": "tree",
  "input": true,
  "tree": true,
  "components": []
}

Click here for a full list of JSON Schema definitions