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
  • Contact Us
Powered by GitBook
On this page
  • Use Case
  • Create a Resource (Value Database)
  • Configuring Radio/Select Box Data Source
  • Updating Resource Values
  • Alternative Data Sources

Was this helpful?

  1. FAQ
  2. Tutorials & Workflows

Dynamic Radio and Select Box Values

PreviousCustom ComponentNextOverride CKEDITOR

Last updated 1 year ago

Was this helpful?

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

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

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

  2. Copy the Submission API endpoint for the Resource

  1. Click the Access tab for the Resource

  2. 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 }}

  1. Create another Form called Employee Information

  2. 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 }}

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

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