LogoLogo
Getting StartedDevelopersDeployment GuideGet Help
  • Quick Links
  • Welcome to Form.io
    • Getting Started With Form.io
    • Launch a Form
    • Overview of Form.io
  • Developer Tool Ecosystem
    • PDF Solution
    • Enterprise Form Builder
    • Form View Pro
    • The Security Module
    • Accessibility Compliance Module
    • Developer License
    • SQL Connector - Deprecated
    • Integration Libraries
    • Form.io CLI Tool
  • User Guide
    • Introduction
    • Form.io Developer Portal
    • Teams
    • Projects
      • Project UI
      • Project Settings
      • Stages
      • Multi-Tenancy
    • Resources
      • ResourceJS
    • Forms
      • Form Creation
      • Form Types
      • PDF Forms
      • Embedding a Form
      • Form Revisions
      • Form Settings
    • Form Building
      • Form Builder UI
      • Form Components
        • Component Settings
        • Basic Components
          • Resource as Select Component Data Source
        • Advanced Components
        • Layout Components
        • Data Components
        • Premium Components
          • Nested Forms
        • Custom Components
      • Logic & Conditions
      • Existing Resource Fields
      • Actions
    • Submissions
      • Accessing Submissions
      • Importing Submissions
    • Form.io eSignature - Coming Soon
    • Form.io Reporting Module
    • PDF Template Designer
    • Form View Pro
    • Form Manager
    • Enterprise Form Builder Module
      • Installation
      • User Guide
  • Developer Guide
    • Introduction
      • Application Development
      • API Documentation
    • Form Development
      • Form Renderer
      • Form Builder
      • Form Embedding
      • Form Evaluations
      • Form Templates
      • Custom Components
      • Translations
    • JavaScript Development
      • JavaScript SDK
      • JavaScript Frameworks
      • JavaScript Utilities
    • Authentication and Authorization
      • SAML
      • OAuth
      • LDAP
      • Resource Based Authentication
      • Email Authentication
      • Two-Factor Authentication
    • Roles and Permissions
      • Field Match-Based Access
      • Field-Based Resource Access
      • Group Permissions
    • Integrations
      • Email Integrations
      • File Storage
      • Google Developer Console
      • eSign Integrations
      • Relational Databases
    • Modules
    • Fetch Plugin API
    • CSS Frameworks
    • Offline Mode
    • Audit Logging
  • Deployments
    • Self-Hosted Deployment
      • Local Deployment
        • Local File Storage
      • Kubernetes
      • Cloud Deployment
        • AWS Deployment
          • AWS Lambda
          • Form.io/AWS Elastic Beanstalk End-To-End Encrypted Deployment
        • Azure Deployment
          • Azure App Service
            • Azure MSSQL Connector - Deprecated
          • Azure Virtual Machine
          • Azure Kubernetes Service
          • Set up the DB
        • GCP Deployment
          • GCP Cloud Run
      • On-Premise Deployment
      • Enterprise Server
      • PDF Server
    • Deployment Configurations
      • DNS Configuration
      • Load Balancer Configuration
    • Licenses
      • License Management
      • Library Licenses
    • Portal Base Project
      • Portal SSO
      • Portal Translations
    • Maintenance and Migration
      • Changes to Premium Libraries
  • FAQ
    • FAQ
    • Tutorials & Workflows
      • Password Reset
      • Dynamic Select Filtering
      • Approval Workflow
      • SSO Email Token
      • Embedding A Video
      • Data Source Validation
      • Select Data Source Options
      • Nested Form Workflows
        • Nested Wizard Forms
      • Save as Draft
      • Role-Based Conditions
      • Custom Component
      • Dynamic Radio and Select Box Values
      • Override CKEDITOR
    • Errors
    • Examples
    • License Utilization Checks
    • Glossary of Key Concepts
  • Contact Us
Powered by GitBook
On this page
  • Hidden
  • Container
  • Data Map
  • Data Grid
  • Edit Grid

Was this helpful?

  1. User Guide
  2. Form Building
  3. Form Components

Data Components

Read more about Data components below:

PreviousLayout ComponentsNextPremium Components

Last updated 9 months ago

Was this helpful?

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

{
  "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: "joe@example.com"
    }
  }
}

Specific Properties

Property
Description
Value
Required
Default

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.

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

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

Property
Description
Value
Required
Default

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.

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

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

Header, Row, and Footer Templates: Customize the grid to how you see fit using the Javascript 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.

The following code examples showcase how to configure the Header and Row Templates using the Javascript library. This allows the user to customize the way the Edit Grid displays data when a row is saved.

Logic
Click here for a full list of JSON Schema definitions
Click here for a full list of JSON Schema definitions
Click here for a full list of JSON Schema definitions
Click here for a full list of JSON Schema definitions
Lodash
Lodash
Click here for a full list of JSON Schema definitions

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