Getting Started
DevelopersDeployment GuideGet Help

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.

Data Source

Store external data to perform form or application logic

CAPTCHA

Secure your forms with CAPTCHA technology V3

File

Upload files from your mobile camera or local machine

Nested Form

Reuse forms by inserting child forms into parent forms.

Tagpad

Tag points on an image with associated fields

Sketchpad

Draw or add predfined shapes on images

Review Page

Summary of data input of fields on the form.

Custom

Use field JSON schema to create custom fields.

Data Table

Fetch data from external sources for user selection.

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 is selected

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

CAPTCHA

What is the CATPCHA component?

The Form.io CAPTCHA component is used to integrate CAPTCHA service providers into Form.io forms. CAPTCHA is a security measure designed to differentiate between human users and automated bots, helping to protect forms from spam and abuse.

How do I use the CATPCHA Component?

To use this component, you'll need to configure CAPTCHA with one of the supported providers:

After configuring a provider, copy the Site Key and Secret Key, then integrate these credentials into your project settings.

  1. Navigate to your Project Settings > Integration > CAPTCHA

  2. Specify the Site Key and a Secret Key from your provider

  3. Save the Settings

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

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

Once the integration is complete the component will be available to add to your forms.

  1. Drag and drop the CAPTCHA component on your Form

  2. Within the component Settings, select the CAPTCHA Provider

  3. Select whether the reCaptcha should execute when the Form Loads or Trigger on button click.

  4. Save your Settings

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

Render From JSON

If you want to render the form with a CAPTCHA component from JSON, add the 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 CAPTCHA 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: {
    }
  };
});

CAPTCHA Provider: Select the provider integrated into your project: Google reCAPTCHA: Utilizes Google's reCAPTCHA v3 which 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. The reCaptcha results can be found in the metadata of the submission.

      "challenge_ts": "2019-01-11T10:29:39Z",
      "hostname": "your_domain",
      "score": 0.9,

Cloudfare Turnstile: Upon submission, Cloudflare Turnstile CAPTCHA returns a cryptographically secured token within the metadata of the submission object. This token is sent with the form data, allowing the server to interpret and validate it to help protect against automated spam and abuse

      "token": "0.CAPTCHATOKEN-ZGg_8ytlSUI6K4e4s9"

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

Trigger on Form Load: When your form with Form Load CAPTCHA triggers a ‘formLoad’ event, a verification request is sent to the CAPTCHA provider for an action called ‘<your_form_name>Load’. The data object in the submission response will vary depending on the provider.

E.G. Google’s reCAPTCHA submission value response 

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

Button Key: Select the Button on the form that the CAPTCHA component will react to.

This is only allowed when the Button action is set to Event .

Trigger on Button Click

When any button on your form is clicked, the renderer searches for a Button Click CAPTCHA component associated with the same API key as the clicked button. If the renderer finds this CAPTCHA component, it sends a verification request to the provider for an action called '<your_button_key>Click'. The provider's response then becomes the submission value of your Button Click reCAPTCHA component.

E.G. Google’s reCAPTCHA Button Click response 

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

Trigger on Button Click

When any button on your form is clicked, the renderer searches for a Button Click CAPTCHA component associated with the same API key as the clicked button. If the renderer finds this CAPTCHA component, it sends a verification request to the provider for an action called '<your_button_key>Click'. The provider's response then becomes the submission value of your Button Click CAPTCHA component.

Visible Verification (Cloudfare Turnstile): If selected, space will be allocated for the Cloudflare Turnstile CAPTCHA widget to appear on the form and will create white space for the widget while the form is loading.

File

What is the File component?

A File component allows form users to upload and download files to a form. In order to use the File component, file storage must be set up in the project settings. See the File Storage help topic for the list of supported file storage providers.

How do I use the File component?

Form.io does not host any files uploaded through a form response. Instead, files are stored with the Storage Provider selected for the component. Form.io will store references to the files, enabling access to the file through the Storage Provider, and further integration of those files into the application.

Before a provider can be selected within the component, the file storage provider must first be integrated into the Form.io project. Refer to the File Storage help topic for more detailed instructions on establishing File Storage.

Once a storage provider has been set up, it should be selectable within the File component Storage settings. Additional settings such as file display, enabling webcam for mobile devices, and file type validations can be set.

How are files managed?

When the form user selects a file for upload, it is immediately sent to the configured storage provider, regardless of whether the form is submitted or not. The file will remain in storage even if the form user removes the attached file.

Beginning with Formio-Enterprise 9.3.0, when the form user removes the attached file, the file is deleted from storage.

Storage

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 to be set up in the project settings:

  • Base64: Files are locally stored in the browser. This should only be used for testing purposes.

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

  • URL: Set up a self-hosted solution, or use an existing service that can upload and serve files. For more information on how to set up the server, consider the ng-file-upload documentation.

  • Azure File Services: Upload files from hosted forms directly to an Azure Blob storage.

  • IndexedDB: Upload files to a predefined IndexedDB API.

  • Google Drive: Upload files to an integrated Google Drive platform.

  • CSV - INFO COMING SOON.

The following settings may be available depending on which Storage provider is selected:

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

  • Custom Request Options: Allows passing the custom xhr options.

  • File Form-Data Key: Key name that is used to modify for the file while calling API request.

  • Database: The name of the IndexedDB database.

  • Table: The name of a table in the IndexedDB database.

Additional Settings

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

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

Upload Only: Disables the download option and allows only the upload of files.

Display As Image(s): Instead of a list of linked files, images are 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 when 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, refer to the ng-file-upload documentation.

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 primary submission of the Parent form.

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.

Sketchpad Visual Guide

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?

The Review Page populates data from components that have already been added to the form. To set up the Review Page:

  1. Add other components to the Form as needed.

  2. Drag and drop the Review Page from the Premium Component group

  3. Open Settings for the Review Page component, then click the Review Fields dropdown. This dropdown lists all of available fields within the form.

  4. Select any single input field from the available components to add it to the list of fields that will be presented on the review page. The selection order of the components determines the order they appear on the Review Page.

Some complex components contain multiple input fields. If the form contains Data Grid, Data Table, Data Map, Edit Grid or Survey components, then the containing components are selectable for review, though the individual fields within that component are not.

Once the Review Page is configured, use the form to test out the summary. As the form is filled out, the Review Page outputs 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 form 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.

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.

As of server version 9.3.0, the Dynamic Wizard has been migrated to the community contrib repository. Click Here to access the repository for information on installation and integrating the Dynamic Wizard component into the Form.io Platform.

PreviousData ComponentsNextExisting Resource Fields

Last updated