Premium Components

Learn more about Premium Components below

Instructions for Use of Form.io Premium Components

Form.io provides access to private modules that contain premium components and themes for enterprise plans. In order to use them, you will need to be granted access and use the pkg.form.io registry to install the modules.

  1. Ensure you have a form.io user account. Contact support@form.io and request access to private modules.

  2. Go to https://pkg.form.io and log in with the username and password of your form.io account. Please note that this is the USERNAME and not the email address of your account in form.io. You can access your username by logging into the portal and going to your account information at the top right. If you are able to log in to https://pkg.form.io then you have been granted access and are using the correct username and password.

  3. From within your project, log in to the package registry by running the following command:

    npm adduser --registry https://pkg.form.io

    Enter the same username and password from step 2.

  4. Find the package you want to install in your app. Premium is a very common one. To install it, from the command line in your app.

    npm install @formio/premium --registry https://pkg.form.io

    This will install the package within your application.

  5. To use it, in the main file of your app, Formio.use() the package. Depending on your language, do something like the following. (With react or vue, import Formio from react-formio or vue-formio instead of formiojs).

    import { Formio } from 'formiojs';
    import premium from '@formio/premium';
    
    Formio.use(premium);
  6. Render forms as usual. Premium components will now be installed in your app.

Dynamic Wizard

What is the Dynamic Wizard?

A Dynamic Wizard allows you to collect an array of object values and then saved data is output to a table view as new rows are added. Filling an array element (field) occurs in steps, where each component inside the Dynamic Wizard is a separate step.

The principle of operation is based on the behavior of the Wizard. However, when you click the next step button, the current page of the Wizard remains the same until you have progressed through all of the fields within the Dynamic Wizard. The table view of the filled data appears with the successful passage of the last step, or when you click on the cancel button.

How do I use the Dynamic Wizard?

To create a Dynamic Wizard flow, the form must first be in Wizard mode in order to make the component available within the form builder. The Dynamic Wizard will initially be empty when it is added to the form, however, other components are added to create the Dynamic Wizard flow. Use Layout components to change the formatting and field layout of the wizard flow.

The Dynamic Wizard is only available when the Form is displayed in Wizard format. This component does not work inside regular Webforms or PDF First forms.

Below is an example of a user building a form with a Dynamic Wizard containing a First Name and Last Name field which will display each field individually. A Field Set containing a group of fields will display as a set in the flow as opposed to displaying individually like the First and Last Name fields.

When the form is rendered and the user is filling out the form, the wizard will present each component followed by the next based on the order they were placed inside the Dynamic Wizard. Users will enter data into the first field and press the Next button to proceed to the next step. Press the Previous button to review or modify data entered into previous fields.

Below is the same form shown in the previous screenshot rendered and being filled out by a user. We can see the First Name is displayed first based on the field order inside the Dynamic Wizard.

The user clicks the Next button to progress to the Last Name field which is the 2nd component inside the Dynamic Wizard.

In the final step, we can see the Field Set component Contact Information rendered which contains a set of fields.

After completing the final step within the Dynamic Wizard, the table view of the entry displays a summary of the entered data.

If you want to modify the saved data entry, press the 'Edit Row' button next to the appropriate entry. The Dynamic Wizard entry will open displaying the fields where data can be modified. If you want to remove a certain data entry, click the 'Remove Row' button. Clicking the Add Another button will create a new Dynamic Wizard entry and the user will progress through the previous steps finalizing the entry with the table view of all entries.

The Table View formatting, including buttons, can be customized using the Header, Row, and Footer templates found within the Dynamic Wizard settings.

Header, Row, and Footer Templates: Flexibility to customize the grid using basic JavaScript. Within the Template section of the component settings, the user can modify what type of components are displayed within the grid row along with the header/footer.

Row CSS Class: Add a CSS Class to the row wrapper.

CSS Classes are currently mapped to Bootstrap

Enable Row Drafts: Save rows bypassing any field validation within the Dynamic Wizard. Normal validation will execute when the form is submitted.

Data Source

‌What is the Data Source?

The Data Source component is a hidden form component that is typically used to fetch data from an external source using an API endpoint. This component will not be visible to the end user but the stored data can be used for various reasons and use cases such as custom validation, calculation, data outputs, and more.

How do I use the Data Source?

To use the Data Source, start by dragging and dropping the field from the Premium component grouping in the Form Builder. Although the component is hidden when rendered, the field will be visible when editing the form.

The first setting you need to configure is the Fetch URL which will be the source of data the component will retain. Inherently, the Data Source will not do anything to the retained data, however, other fields and variables on the form can use the data to perform certain functions like field or application logic.

Below shows an example of the Data Source being used to fetch Data from an external URL and using the Trigger to execute business logic on the form.

Example Using External API URL

In this example, we are going to be fetching data from an external API URL hosting JSON containing a list of USA states. We are then going to use a checkbox on our form to trigger a Data Source event. That triggered event will then execute calculated logic to output the fetched data to fields inside a Data Grid.

Start off by adding the Data Source component to the builder. Within the settings, click the Fetch tab and add the following to the URL field:

https://cdn.rawgit.com/mshafrir/2646763/raw/states_titlecase.json

Next, let's add our trigger component to the form. Add a Checkbox and name the component 'Populate'. Open the Data Source settings and click the Trigger tab. Click the Trigger on data change dropdown and select the 'Populate' checkbox from the form. This component will act as the Trigger to execute the event. Next, add the following for the Triggered Event which will be the event sent to the Form when the Trigger component is checked:

populateState

For our final step, we need to add the fields that will host the data population and configure Logic for those fields to execute when the Data Source event has been received.

First, let's add a Data Grid to the form. Because we are going to fetch data with many entries we need the Data Grid to ensure we have the necessary rows to populate the states. Add two text fields called Name and Abbreviation. Ensure the Property Name for the fields matches the JSON values from the Fetch step.

Now that we have our fields in place, we need to add logic to the Data Grid to populate the data from our Data Source to the fields inside the grid. Edit the Data Grid settings and click the Logic Tab. Set the Trigger Type to Event and add the Event Name: 'populateState' to match our Data Source event. Set the Action Type to Value and add the following to the JavaScript content:

value = data.dataSource;

Please note, the property name reference inside the Javascript should match the Data Source property name.

You should have a form looking something like this:

The only thing left to do is test our form. When the Populate checkbox is ticked, the Data Source is triggered to fetch the Data and fire off an event. Our Data Grid contains logic that is listening for the event and will populate the Data being stored from the Data Source to our Name and Abbreviation fields inside the Data Grid. Because our Name and Abbreviation field's property name matches the names inside the JSON URL, the data population will calculate the fields seamlessly.

Trigger

The Trigger Settings will determine how and when the external data will be stored in the Data Source component.

Trigger on Form Init: ‌Loads data once the form is rendered and ready for use.

‌Trigger on Server: Loads data on the server during validation.

‌Trigger on Data Change: Specifies a component the value change of which will have the data stored in the Data Source component be refreshed. A new request will be sent again.

‌Trigger on Blur of Component: Specifies a component on which blur, data stored in the Data Source component should be refreshed. A new request will be sent again.

‌Trigger on Event: ‌Specifies the name of the event on which data stored in the Data Source component should be refreshed. A new request will be sent again.

‌Triggered Event: ‌If specified, an event with the specified name will be triggered once the data load was triggered.

Fetch

The Fetch Settings determine the source and the method for retrieving the External Data

Data Source Type: ‌Specifies a source type from which data will be fetched. Available options: URL, IndexedDB.

Settings when URL Settings

‌Data Source URL: The API endpoint to which a request is made to retrieve data.

‌Method: ‌The method to be used when making a request to the specified endpoint. Available options: GET, POST.

‌Request Headers: ‌HTTP request headers to be used when making a request to the specified endpoint.

‌Forward Headers: Forwards the headers passed to the server to the fetch endpoint.

​Form.io Authentication: ‌Passes Form.io Authentication headers with the request.

​Enable To Store Request Result in the Cache: ‌If checked, the result of each API call to the specified endpoint will be cached. That means, if the Data Source refresh is triggered again with the same URL, it won't make a real request to that URL, but rather take the result of the previous request with the same URL from the cache.

Uncheck this setting, if the returned data from the URL updates frequently and should be kept up-to-date.

Settings when IndexedDB is selected

Choose From Existing Databases?: Allows selecting an existing database.

Database Name: The name of the indexedDB database.

Table Name: The name of a table in the indexedDB database.

Existing Database Name: The name of the existing indexedDB database.

Existing Table Name: The name of an existing table in the indexedDB database.

reCAPTCHA

What is the reCaptcha component?

Form.io reCAPTCHA is a hidden component that utilizes Google's reCAPTCHA v3. This reCaptcha version returns a score for each request without user friction. The score is based on interactions on your form and can help determine if the score represents a human or malicious interaction.

How do I Use The reCaptcha Component?

To use this component, you must first setup a reCaptcha within the Google Developer portal. Once setup, ensure you copy the reCaptcha's Site Key and Secret key within your project.

  1. Go to your project on portal > Settings > Integration > Google reCAPTCHA

  2. Specify the Site Key and a Secret Key from your Google reCAPTCHA Admin Panel

  3. Save the Settings

As a result, your project will contain the following JSON:

 "settings": {
   "recaptcha": {
     "secretKey": "your_secret_key",
     "siteKey": "your_site_key"
   }
 }

Once the integration is complete add a reCaptcha to a form. The component is hidden on the rendered form but will be visible within the Form Builder. Open the component settings and choose whether you want the reCaptcha to execute when the Form Loads or Trigger on button click.

When the reCaptcha is executed and the form is submitted, the reCaptcha results can be found in the metadata of the submission.

Render From JSON

If you want to render form from JSON, you’d also need to do following:

  1. Add the following settings to the Form JSON:

     {
         "settings": {
             "recaptcha": {
                 "isEnabled": "true",
                 "siteKey": "your_site_key"
             }
         }
     }
  2. Before the form is rendered, set the Project URL to the URL of project you have your reCAPTCHA Secret Key set:

     Formio.setProjectUrl('<your_project_URL'); //for ex. https://examples.form.io/

You can now render the form using JSON:

Formio.createForm(document.getElementById('formio'), 'your_form_json').then(function(form) {
  // Provide a default submission.
  form.submission = {
    data: {
    }
  };
});

Type of Event: Sets the type of event to which the reCAPTCHA component would react to: Button Key, Form Load

Button Key: API Key of the button for the reCAPTCHA component to react to (only for 'Button Click' type of event).

Trigger on Form Load

When your form with Form Load reCAPTCHA emits ‘formLoad’ event, a verification request is sent to Google for action called ‘<your_form_name>Load’. Google’s response becomes the submission value of your Form Load reCAPTCHA component:

{
  "data": {
    "reCaptcha": { 
      "success": true,
      "challenge_ts": "2019-01-11T10:29:39Z",
      "hostname": "your_domain",
      "score": 0.9,
      "action": "<your_form_name>Load" 
    }
  }
}

Trigger on Button Click

When any button is clicked on your form, our renderer searches for Button Click reCAPTCHA component tied to a button with the same API Key as clicked one. If the renderer finds this reCAPTCHA component, a verification request is sent to Google for action called '<your_button_key>Click'. Google's response becomes the submission value of your Button Click reCAPTCHA component:

{
  "data": {
    "reCaptcha": { 
      "success": true,
      "challenge_ts": "2019-01-11T10:29:39Z",
      "hostname": "your_domain",
      "score": 0.9,
      "action": "<your_button_key>Click" 
    }
  }
}

Resource

The Resource component has been deprecated. Use the Select with the Data Source Type set to "Resource" instead which is a more robust and flexible way to reference resource data.

File

What is the File component?

A File component allows users to upload and download files to a form. In order to use the File component, file storage must be set up. This can be done from the project settings. See File Storage for the types of providers supported.

How do I use the File component?

Form.io does not host any uploaded files on forms. Instead, files are stored with the Storage Provider selected for the component which allows uploading and downloading files to and from it. Form.io does store a reference to the files which allows uploading and downloading files to and from the provider and seamless integration into your app.

Before a provider can be selected for the component, the provider must first be integrated into the Form.io project. Navigate to the following documentation on File Storage setup.

Once a storage provider has been set up, you can then select that provider within the File component Provider settings. Additional settings such as file display, enabling webcam for mobile devices, and file type validations can be set.

Storage Providers

The storage providers which the file will be stored and accessed from. Select the appropriate provider. All providers excluding URL and IndexedDB require integration configurations setup inside the project settings.

S3: file storage and retrieval using any S3 compatible service, specifically designed for Amazon Web Services S3

URL: Setup your own or use an existing service that can upload and serve files. For more information on how to set up the server, follow the link

Private Download: Makes the file download send a POST request to the download URL with the x-jwt-token header. This will allow your endpoint to create a Private download system.

Custom Request Options: Allows passing the custom xhr options.

File Form-Data Key: Key name that you would like to modify for the file while calling API request.

Azure File Services: upload files from your hosted forms directly to an Azure Blob storage

Google Drive: Upload files to an integrated Google Drive platform

IndexedDB - Upload your files to a predefined IndexDB API

Database: The name of the indexedDB database.

Table: The name of a table in the indexedDB database.

Base64 - Files are locally stored in your browser. This provider should only be used for testing purposes.

CSV - INFO COMING SOON.

Additional Settings

Directory: This field will append all files with the string so that they are in a directory on the storage provider. Must end in “/”.

File Name Template: Allows specifying a template for the name of the uploaded file(s). Regular template variables are available (data, component, user, value, moment etc.), also fileName, guid variables are available. Theguid part must be present and will be added automatically if not found in the template.

Upload Only: Allows only to upload file(s) and consequently the download, in this component, will be unavailable.

Display As Image(s): Instead of a list of linked files, images will be rendered in the view. The filter in the file explorer will be set to the Image Files type on upload.

Image Size: The image size in pixels for previewing images.

Enable Web Camera: Allows using an attached camera to directly take a picture instead of uploading an existing file.

Webcam Width: The webcam size in pixels for taking pictures.

File Types: Allows specifying file types to classify the uploads. This is useful if you allow multiple types of uploads but want to allow the user to specify which type of file each is.

File Pattern: Dictates which file extensions will be allowed to upload. Files not specified in this field will be prevented from being uploaded.

For more information on how to specify file patterns and sizes, follow the link

File Minimum/Maximum Size: Allows setting a minimum/maximum file size for uploaded files.

File Maximum Size: Allows setting a maximum file size for uploaded files.

Nested Form

What is a Nested Form?

The Nested Form component allows you to insert an existing Form or Resource (child form) into another Form or Resource (parent form). All fields contained within the child form, including all field settings, will display accordingly, in the Parent form.

How do I use a Nested Form?

Nested Forms are easy to use. Simply drag and drop the Nested Form component onto your Parent Form and select a Form a Resource from your Project. The Nested Form will display as an empty component in the builder but will display the Child form fully when rendered.

In the following example, I want to utilize a form and its set of fields multiple times throughout my project. Instead of recreating the same form with the same fields and settings, create a single form called Contact Information.

Next, let's add this form to one of the existing forms inside the project. The screenshot below shows a Parent 'Application' form. Instead of adding individual fields, we are going to use the Nested Form component to pull in our Contact Information form.

Add aNested Form component, click the Form tab and select the Contact Information from the Form dropdown.

When the form is rendered, not only do we see the two fields from the Parent form but also the fields included in our Nested form. All settings and configurations for the Nested Form fields are retained

After submitting the form, the Submission Data will merge the Child and Parent data together. Child data will still save to the primary child form as well as the Parent form primary submission.

Use Nested Forms to save time by constructing forms that you know will be reutilized through the course of your project and application. Use Nested Forms to integrate child forms into all different kinds of parent forms within your application, all while collecting and housing submission data into one primary source.

Nested Forms For Remotely Deployed Projects

If your project is remotely deployed with subdirectories, set up your application to perform an API call like the following:

 Formio.setProjectUrl(<project_URL>). 

This will help Formio understand where to fetch nested resources from and will set up base URLs properly.

Form: Select a child Form/Resource that you’d like to nest into the parent form

Save as reference: Check if you’d like to save only _id of the child form submission instead of storing all child submission object inside of parent submission. This will also help all changes you’ve made in child submission be reflected in parent submission. If not checked, the entire child submission object will be saved. Any updates or changes made to the child submission data will not be reflected in the parent submission.

Tagpad

What is the Tagpad?

The Tagpad component allows the form designer to add an image URL to the component. Additional components, like a Text Field, can then be added to the Tagpad image. This allows form users to 'tag' a point on the image and input data associated with the tagged point. Tagged points and corresponding input data will be saved with the submission data when the form is submitted.

How do I use the Tagpad?

Use a publically accessed image when using the Tagpad

Inside the Form Builder, drag and drop the Tagpad component from the Premium component grouping onto the form. Within the Tagpad settings, copy and paste your image URL to the corresponding field. Once set, the image will display in the Preview section of the component settings.

After adding your image URL, use the form builder to add additional components inside the Tagpad dropzone.

These components will display for the user when an area is 'tagged' on the image. The form user can then input field data to the corresponding dot tag which will be saved with the submission. Add as many dot tags as needed to the image. View or update input values for any saved dot by clicking the dot. Remove a dot tag and corresponding data by clicking the red trash can icon.

Tagpad visual guide

Width: Default image width

Height: Default image height

Dot Size: Default size of the dot tag

Dot Size Stroke: Default dot tag border width

Dot Stroke Color: Default dot tag border-color configured using HEX color identifier

Dot Fill Color: Default dot color set configured using HEX color identifier

Dot Custom Label: Default label of the dot tag

Dot Value Template: The HTML template representing the Dot values tagged by the form user. This template can be modified within the Template tab within the Tagpad settings. There are four variables that can be modified within the template:

  • Dot:

  • Index:

  • Array:

  • Instance:

Follow the link for Tagpad template examples

Sketchpad

What is the Sketchpad?

The Sketchpad allows a form designer to add a public image to the Sketchboad component. End users interacting with the form can then sketch on the image using a WYSIWG-type editor. Sketches made on the drawing will be saved with the submission data when the form is submitted.

How do I use the Sketchpad?

Use a publically accessed image when using the Sketchpad

Start by dragging over the Sketchpad component from the Premium component grouping onto the form. Within the Sketchpad settings, copy and paste your image URL to the corresponding field. Once set, the image will display in the Preview section of the component settings and on the form builder.

Once set, end users interacting with the form can click the image to open a module. Here the user can perform different actions like drawing on the image, adding object shapes, changing line thickness, and selecting the sketch color. These settings are controlled by the end user inside the module window. The form designer can also change the default values for the mentioned settings.

Image URL: Image that will display on the Sketchpad component

Set Size Automatically: The form renderer automatically sizes the image based on available form space

Default Zoom: How close or far the image will appear to the form user

Default Stroke Color: Default color of the drawing strokes using HEX color identifier

Default Fill Color: Default color of the shape fills using HEX color identifier

Default Line Width: Default width of the line strokes

Default Circle Size: Default line width of the circle shape

Review Page

What is the Review Page?

The Review Page component presents form users with a summary of their data before submitting the form. This component is code free and simple to configure, catering to non-developer users.

How do I use the Review Page?

To set up the Review Page, you will first need to add other components to the Form, the Review Page will populate data from those components in real-time. Once you have other components in place, drag and drop the Review Page from the Premium component group. Open the settings and click the Review Fields dropdown. This dropdown will populate all of the available fields within your form. Select any single input field from the available components. The selection order of the components will also dictate the order they appear on the Review Page.

Now that the Review Page is configured, Use your form to test out the summary. As the Form is filled out the form, the Review Page will output the data of the selected fields to the Summary section of the component.

Why should I use the Review Page?

Using the Review Page is a great way to give your users a chance to review their data before submitting the form which can help reduce user errors and make for a better user experience.

Review Fields: Multi-Select dropdown that will populate all of the available fields within your form. Select any single input field from the list. The selection order of the components will also dictate the order they appear on the Review Page.

Signature

The Signature component allows the end-user to digitally sign a signature pad with either their finger on a touch-enabled device or with the mouse pointer. When the form is submitted, the Signature pad will be converted into an image and stored with the form submission.

Provider: This dropdown will determine what kind of Signature pad to use.

Default: Standard digital signature that can be signed upon form submission

Box Sign: Selecting Box Sign will allow you to set up an eSign workflow.

Click Here for more information

Custom

Custom components allow users to create a custom field using the JSON schema of other component types. When complete, these custom components will be rendered using a front-end application. This is a very useful and flexible option to create special or complex form fields that might not be offered with the out-of-the-box form builder.

To use a custom component, create a JSON definition of the field with the information needed to render it. Create a custom field and paste the JSON object into it. This must be a valid JSON object.

{
  "type": "custom",
  "isNew": true,
  "key": "custom",
  "protected": false,
  "persistent": true
}

There are several properties that are required but you may add any additional properties that you would like.

Type: The type property will be used to select which component to render on the front end. It cannot be an existing field type.

Key: The key field is where the data will be saved to. This must be unique per field. For example, if key = 'customers' then the value of the field will be saved in data.customers.

Persistent: This will determine whether or not the value is saved to the main database. This is useful for using Remote Middleware, verify password fields or sending the data in an action but not saving it.

Protected: This will determine whether or not the field will be visible from the API. If it is a protected field then it will only be writeable but not readable.

Rendering: In order to render the custom component, the frontend application must register the component template. This is done in the config step with the formioComponentsProvider.

app.config([
  'formioComponentsProvider',
  function (formioComponentsProvider) {
    formioComponentsProvider.register('checkmatrix', {
      title: 'Check Matrix',
      template: 'formio/components/check-matrix.html',
      settings: {}
    });
	}
]);

The template will then be used to render the component. In addition, a controller may be added to the template to create more interactive form elements.

This is a working example of a custom component. It is a Matrix checkbox that changes the number of columns and rows based on two other form fields.Type: The type property will be used to select which component to render on the front end. It cannot be an existing field type.

Key: The key field is where the data will be saved to. This must be unique per field. For example, if key = 'customers' then the value of the field will be saved in data.customers.

Persistent: This will determine whether or not the value is saved to the main database. This is useful for using Remote Middleware, verify password fields or sending the data in an action but not saving it.

Protected: This will determine whether or not the field will be visible from the API. If it is a protected field then it will only be writeable but not readable.

Rendering: In order to render the custom component, the frontend application must register the component template. This is done in the config step with the formioComponentsProvider.

app.config([
  'formioComponentsProvider',
  function (formioComponentsProvider) {
    formioComponentsProvider.register('checkmatrix', {
      title: 'Check Matrix',
      template: 'formio/components/check-matrix.html',
      settings: {}
    });
	}
]);

The template will then be used to render the component. In addition, a controller may be added to the template to create more interactive form elements.

This is a working example of a custom component. It is a Matrix checkbox that changes the number of columns and rows based on two other form fields.

Data Table

The Data Table enables the user to fetch large sets of data from external sources and present that data to the end-user in a table format. Think of the Data Table as an advanced select component, allowing the form designer to specify which data points from the external data object source should appear as selectable rows within the table for end-users.

Select Field & Data Table Comparison

The Data Table and Select component are both utilized in similar ways. Each component can fetch data from external sources and present that data to the end-user as selectable options. The following example will highlight the difference between the two and why the Data Table might be a better solution for your use case.

Both components in this example are fetching data from the identical 'Department' Resource, which contains four distinct fields

Department ID | Department Name | Building Number | Email

When using a Select component, the form designer can fetch data from a Resource, however, only one data point from the Resource submission object can be used as the Select value. In the screenshot below we can see the Select component connected to the Department Resource and the form designer is limited to choosing one value that will display for the component.

The benefit of using the Data Table is the component can still fetch from a Resource, however, the form designer can choose which fields (or data points) will display for the end-user as the selectable option. This allows the user to make a more informed decision when selecting an option. The screenshot below shows the Data Table fetching data from the same Department resource, however, all four Resource data points are presented to the user as a selectable option.

The Data Table included within a form is intended for incorporating data from an external data source and presenting that data to the end-user as selectable options that can be sent to the server upon submission.

If you are looking for a visualized report displaying data from multiple form sources in a table grid format with pagination, filtering, and sorting capabilities, please see the Form.io Reporting Module documentation.

Some settings will be added or removed depending on if the Fetch setting is enabled.

Data Table as a Select Component

The Data table will fetch and present external data within the data table as selectable options for the end user. The Fetch Settings determines the source and method for retrieving external data that will populate within the Data table. When Fetch is enabled, data will not submit to the server unless configured to only submit rows selected by the end user.

Enable Fetch: If fetch is enabled, the DataTable will retrieve data from an external source.

Fetch Source Type: Retrieve the data from an internal Resource or external URL.

Submit Selected Rows: When the Submit Selected Rows option is enabled, the user can select the Data Table rows by clicking the row checkbox. The selection remains persistent across filtering, sorting, changing items per page, and pagination. After the form is submitted, only the data of the selected rows will be sent to the server.

Fetch Resource

Settings when Fetch Resource is enabled

Fetch Resource: Fetches submission data from internal Resources within your project.

Resource: The resource to be used to populate the data in the data table.

Components: Select the Resource fields that will display for the option row of the Data Table. Use the +Add Component button to add additional fields to the option row.

Default Sort Query: This sort query is used if the data table column sorting is not set.

Enable to Store Request Result in the Cache: Enabled by default, this setting stores requests and their results within the browser cache. When the Data Table attempts to request data from the same URL with identical parameters, cached data will be returned, enhancing performance. This option should be disabled If the data from the data source frequently changes and requires constant updates.

Fetch URL

Settings when Fetch URL is enabled

Data Source URL: A URL that returns data. You can interpolate form data using curly bracket notation.

Request Headers: Set any headers that should be sent along with the request to the URL. This is useful for authentication.

Transform Data: Write custom code to transform DataSource data.

Form.io Authentication: When checked, Form.io authentication headers are added to the request to ‘Data Source URL’. Mainly used if Data Table data is requested from a Form.io endpoint.

Custom Fetch Provider: The name of a custom fetch provider. If not specified, the default URL provider is used

Default Sort Query: This sort query is used if the data table column sorting is not set.

Enable to Store Request Result in the Cache: Enabled by default, this setting stores requests and their results within the browser cache. When the Data Table attempts to request data from the same URL with identical parameters, cached data will be returned, enhancing performance. This option should be disabled If the data from the data source frequently changes and requires constant updates.


Sortable: Sort columns in ascending/descending order.

Filterable: Selectively display rows of data based on specific criteria or conditions. Provided filter operations such as "contains", "matches", "less than", "greater than", "equals", "not equals" and etc

Cell Max Width: Set the static width of the Data Table column width.

Clip Cells: Truncates data in a cell if it exceeds the width available within the column

Items Per Page: Set the default rows of data per page.

Data Table as 'Add Another' input component

While not the primary use case of the Data Table, when Fetch is disabled, fields can be added to the Data Table for user input with 'Add Another' functionality.

Because the Data Table includes pagination, filtering, and sorting capabilities, it is not recommended for most 'Add Another' use cases, we suggest utilizing the Edit Grid or Data Grid.

Inline Editing: Actively edit the input fields without requiring the user to open the Data Table modal.

Show Add Button: Displays the button to add a new input row to the table.

Show Edit Button: Enables the user to edit an input row

Show Delete Button: Enables the user to delete an input row

Show Delete All Button: Enables the user to delete all input rows within the table.

Last updated