JSON Form Data Store

Introduction

The JSON Form Data Store feature allows users to save and load data into a Joget form using the JSON format. This feature lets data be loaded into a form through a JSON URL.

How does it work?

Load Data From

To load data into a form using a JSON API, follow the steps below:

1. Navigate to Settings > Advanced and under Load Data From, select JSON API. 
2. Select Next and enter the JSON URL. The URL includes the parameter id=eq.#requestParam.id# which is from the Form URL in the runtime.
3. Under Call Type select GET and enter the API Key in the Request Headers. 
   
4. Enter appropriate information for the Form the access the data such as the Base JSON Object Name and Primary Key.
5. Under Field Mapping, enter the Field Name and JSON Objet Name. The Field Name refers to the ID of the fields in the form, while the JSON Object Name refers to the property name in the JSON returned by the API.
6. In the runtime, open the form. You will see the data populated into the form fields.

Save Data To

To save data into a form using a JSON API, follow the steps below:

1. Using the same form, navigate to Settings > Advanced and under Save Data To, select JSON API. 
2. Select Next, enter the JSON URL, under Call Type select POST, for this example we will use Custom JSON Payload as Body Type.
3. Enter the Custom JSON Payload. To include field values in the payload, use the format "{fieldId}". For example, if your form has a field with the ID name, you can reference it as "{name}" in the JSON payload.
   
4. In the runtime, open and submit the form.

Configuration Settings

When configuring a JSON Form Data Store, you will be presented with the following form:

Configure Load Data From

Configure the properties by filling in the following fields:

• JSON URL: The URL from which JSON data will be loaded. This field is required when JSON API is selected as the datasource. For example, https://dummyjson.com/products/1.
• Call Type: The HTTP method for sending and receiving API requests.
• Passover Current Request Cookies: Option to pass the current request cookies.
• Base JSON Object Name for Multirow Data: The name of the object that contains an array for multirow data.
• Request Headers: Add names and values to the request header.
• Primary Key: The unique key used to identify records.
• Manual Field Mapping: Check if you want to assign the records to the form fields manually.
• Field Mapping: Map JSON data with form fields.
• Field Name: The form field ID.
• JSON Object Name: The JSON property name.
• Debug Mode: Show relevant debug entries in the server log for debugging purposes.
• Handling For Field Workflow Variable?: Check to update workflow variables based on form fields. Not applicable to grid elements.
• Handling for Uploaded Files?: Check to store uploaded files in app_formuploads based on the form properties table name.

Configure Save Data To

Configure the properties by filling in the following fields:

• JSON URL: The URL from which JSON data will be saved. This field is required when JSON API is selected as the datasource. For example, https://dummyjson.com/products/add
• Call Type: The HTTP method for sending and receiving API requests.
• Body Type: Option on how the data packages and send.
• Request Headers: Add names and values to the request header.
• Passover Current Request Cookies: Option to pass the current request cookies
• Use Different API For Update: Selection to use different API when updating the Form. 
  JSON URL (For Update): The URL from which JSON data will be updated. 
  Call Type: The HTTP method for sending update JSON data.
  
• Debug Mode: Show relevant debug entries in the server log for debugging purposes.
• Handling For Field Workflow Variable?: Check to update workflow variables based on form fields. Not applicable to grid elements.
• Handling for Uploaded Files?: Check to store uploaded files in app_formuploads based on the form properties table name.

Download sample app