How to Load Remote Data for Dropdown Lists in React Form Builder and Understand the Form Renderer Schema?

This article explains how to configure the React Form Builder component to load remote data for dropdown list fields and provides an in-depth overview of the form schema structure used by the Form Renderer component to render forms accurately.

Understanding Remote Data Loading in Dropdowns

In the React Form Builder, dropdown list components can be configured to fetch data from remote sources via a URL. The URL used to fetch data in this example is:

https://ej2services.syncfusion.com/js/release/api/test

This URL returns JSON data that populates the dropdown options dynamically.

Configuring Dropdown List with Remote Data in Form Builder

In the Form Builder component, follow the steps below to configure remote data for a Dropdown List field:

1. Drag and drop the Dropdown List form field onto the central design canvas.
2. The Property Panel opens in the right pane. In this panel, set the following properties:
   Name: values
   Label: Values
3. In the Options section of the Property Panel, select the Remote URL radio button to define the data source.
4. Set the Endpoint URL to:

https://ej2services.syncfusion.com/js/release/api/test 

6. Click the Save button in the Query Configuration section.

Schema Structure Overview

After configuring the remote data source for the Dropdown List, the Form Builder generates a JSON schema that defines the form’s properties, layout, and settings. The key parts of the schema include:

• properties: Defines each form field, including dropdown fields with remote data options.

  • The options object within a dropdown field specifies:
    • type: Indicates the data source type, e.g., “url”.
    • url: The API endpoint to fetch data.
    • adaptorType: Describes how the data is adapted; commonly “WebApiAdaptor”.
    • dataPath: Path to extract relevant data from the API response (e.g., “results.Country”).
    • Other metadata such as headers, persistence settings, and IDs.
  • The widget property defines the UI component type, like “dropdown”.

• layout: Describes the visual structure and placement of form fields.

• settings: Contains form-level configurations like form name and width.

The example form schema will look like below.

{
 "properties": {
   "values": {
     "id": "dropdown_1793962724937_73",
     "name": "values",
     "type": "string",
     "label": "Values",
     "options": {
       "type": "url",
       "url": "https://ej2services.syncfusion.com/js/release/api/test",
       "headers": [],
       "adaptorType": "WebApiAdaptor"
     },
     "widget": "dropdown"
   }
 },
 "layout": [
   {
     "type": "field",
     "propertyId": "values"
   }
 ],
 "settings": {
   "name": "Untitled Form",
   "width": "100%"
 }
}

Form Rendering Behavior

The Form Renderer component consumes this JSON schema to generate the actual form UI. It interprets the properties to create input controls, uses the layout to arrange fields, and applies settings to finalize the form appearance and behavior.

Additional Resources

• Official React Form Builder Documentation: https://ej2.syncfusion.com/react/documentation/form-builder/getting-started
• Live Demos of Form Builder: https://ej2.syncfusion.com/react/demos/#/tailwind3/form-builder/default
• Official React Form Renderer Documentation: https://ej2.syncfusion.com/react/documentation/form-renderer/getting-started
• Live Demos of Form Renderer: https://ej2.syncfusion.com/react/demos/#/tailwind3/form-renderer/default

By understanding this schema and how remote data is integrated, developers can efficiently create dynamic and data-driven forms using Syncfusion’s React Form Builder and Renderer components.