Dynamic Radio and Select Box Values

The Radio / Select Box component presents a set of values for end-users to select from within a form. Typically, these components are configured with static values, requiring manual adjustment of the component settings whenever new options need to be added or modified.

This documentation will illustrate the process of setting up the Select Box and Radio components to retrieve dynamic values from an external source, specifically a Form.io Resource. This functionality enables the Form Builder to effortlessly update numerous Radio or Select Box components across various forms embedded within your application by simply modifying the Data Source connected to these components

Use Case

This example will utilize two different forms, an HR Employee form and a Job application form. The HR employee form contains a Radio component with different contact value options. Similarly, the Job application form contains a Select Box with the same type of values. Keeping the Use Case in mind, imagine that these components are not limited to just two forms but are utilized in a multitude of forms throughout your application. With this static value configuration, the form builder must manually update the values for each component incorporated into the forms.

Manually updating these values also presents the potential for the Form Builder to make a mistake while updating the values. This could cause issues for workflows such as server-side logic or specific database configurations that rely on specific IDs or Value names from the components. Utilizing a Dynamic Data Source alleviates these potential issues and ensures a quick update while maintaining component continuity across all of the forms.

Create a Resource (Value Database)

Create a Resource to store the data values from which the Radio and Select Box components can retrieve their information.

1. Within your Project, create a new Resource. For this example, we will be using a Contact Method Resource to provide values for the Radio and Select Box components within the example forms.

2. Add a TextField to the Resource that will support the values

3. Click the Use tab to make submissions against the Resource establishing the Contact Method values. These values will be changed later in the workflow. E.G. Home Phone | Email | Fax

4. Within the Resource, click the more settings tab (...) and select the Form API button

5. Copy the Submission API endpoint for the Resource

6. Click the Access tab for the Resource

7. Set the Everyone Role to the Read All permission This will ensure that the Resource values can be retrieved when the Form is interacted with externally.

Configuring Radio/Select Box Data Source

Two forms will be created that will contain the Radio and Select Box components. These will be configured to support Dynamic Values from the Resource created in the previous step.

1. Create a form called Job Application

2. Add a Select Box component called Contact Method

   • Within the component settings, click the Data tab

   • Click the Data Source Type and set it to URL

   • Add the Resource Submission Endpoint to the URL field https://myproject.form.io/contactmethod/submission

   • Modify the Item Template and ensure the API property name of the Contact Method field is set. It should look something like this: {{ item.data.contactMethod }}

3. Create another Form called Employee Information

4. Add a Radio called Contact Method and follow the same workflow

   • Within the component settings, click the Data tab

   • Click the Data Source Type and set it to URL

   • Add the Resource Submission Endpoint to the URL field https://myproject.form.io/contactmethod/submission

   • Modify the Item Template and ensure the API property name of the Contact Method field is set. It should look something like this: {{ item.data.contactMethod }}

5. View the Forms within your application to

Updating Resource Values

Back to the original use case, let's pretend instead of 2 forms, we have 50 forms with these components. As the Form Builder, we are tasked with removing a Value, modifying a value, and adding a value to all Contact Method fields. Instead of modifying these values manually, we can update the values directly within the Data Source, causing all connected instances of components to dynamically update.

1. Navigate back to the Contact Method Resource

2. Click the Data tab and make the following modifications to the submissions

   • Update the Home Phone value to Cell Phone

   • Delete the Fax submission

   • Create a new value called Text Message by using the Resource

3. Navigate back to your application and refresh your form to pull in the changes.

Job Application Form Dynamically updates dynamically

Employee Information Form dynamically updates dynamically

Alternative Data Sources

Alternative API JSON endpoints can also be utilized as the Data Source. In this example, a second Select Box component is added Job Application form that will retrieve data from an API endpoint containing a JSON data object of US States.

1. Add a Select Box component called Contact Method

   • Within the component settings, click the Data tab

   • Click the Data Source Type and set it to URL

   • Add the API Endpoint containing the JSON object of US States to the URL field https://gists.rawgit.com/mshafrir/2646763/raw/states_titlecase.json

   • Modify the Item Template and ensure the name property of the JSON object is included {{ item.name }}

   

   • Alternatively, you can set the Item Template to pull in the State abbreviation by configuring the Item Template to include the abbreviation property of the State instead of the name {{ item.abbreviation }}

2. Navigate back to your application and refresh your form to pull in the changes.