How to use JSON Form widget

This article provides comprehensive information on utilizing the JSON form widget, a powerful tool that dynamically generates forms from JSON data. This eliminates the manual effort typically required for form creation, making it efficient and flexible for various data-driven applications.

Data Source Integration

The JSON form widget seamlessly integrates with your data source or widget, facilitating the addition of new records and editing of existing ones. By inputting your JSON object or calling the necessary widget or API data in the Source Data field, you can establish a connection. It's important to note that this widget has a limit of processing up to 50 strings in the provided JSON object.

To populate the JSON Form with data, ensure that your JSON follows a structured format, as shown in the example below:

{
  "name": "John",
  "date_of_birth": "20/02/1990",
  "age": 29,
  "employee_id": 1001
}

You can click on an individual row in the Table and update data in the form fields.

{
  {
    tbluserData.selectedRow;
  }
}

Based on the JSON data provided, the JSON Form automatically identifies the appropriate field type for each value. For example, if the data contains the field age, the form sets the field type to a Number Input. Additionally, you have the flexibility to add or customize field types using the Field Configuration property.

If you want to create dynamic elements in the form, you can use JSObject, which can help you create fields, based on the number provided.

Example of JSObject function:

myFun1: (number) => {
  const generatedData = {};

  for (let i = 1; i <= number; i++) {
    generatedData[`User ${i}`] = {
      name: "",
      date_of_birth: "",
      age: 0,
      employee_id: 0,
    };
  }
  return generatedData;
};

Example of the Source Data:

GenerateUser.myFun1(5);

Auto Generate Form boolean

When enabled, the form layout updates automatically when the field types inside the Source Data are changed. With this, the Field Configuration property also gets automatically updated to reflect any changes in the Source Data property.

However, it's important to note that enabling this feature overrides any custom configurations that you are providing through data transformations using JavaScript.

Generate Form string

When the Auto Generate Form property is disabled, this button becomes visible. You can use this button to manually regenerate the form layout. With this, the Field Configuration property also gets updated to reflect any changes in the Source Data property.

Field Configuration list

Contains all the generated form fields. You can rearrange the items and configure them by clicking on the ⚙️ gear icon. Alternatively, the eye icon allows you to hide specific fields.

Clicking the gear icon ⚙︎ enables you to customize each form field extensively. You can select any one of the following options from the Field Type property to update the widget type for that field on the JSON Form:

• Array
• Checkbox
• Currency Input
• Datepicker
• Email Input
• Multiselect
• Multi-line Text Input
• Number Input
• Object
• Password Input
• Phone Number Input
• Radio Group
• Select
• Switch
• Text Input

Each field type offers unique sets of customizable events and configurations. For instance, the Number Input field can have a min and max value, whereas the Select field includes the options property.

Most of the field properties are similar to those found in widget properties. To explore more about these properties, you can refer to the widget reference guide for more information.

For more information you can read the appsmith documentation