Skip to main content

Submit Form Data

This page shows you how to display and submit data using JSON Form and Form widget.

Using Form​

Follow these steps to set up a Form widget and configure the query:

  1. To allow users to submit their information, drag the relevant widgets into the Form widget (example: Text, Inputs, Select) and configure their properties.

Example: suppose you have a users database and you want to display specific data based on user selections. Add the following code to the Input widget's Default value property:

//To display the email field when the user selects a row in Table widget, use:
{{Table1.selectedRow.email}}

//To display the email field when the user selects a item in List widget, use:
{{List1.selectedItem.email}}

The above code displays the email based on user selections. Similarly, you can populate other widgets with data.

  1. Create a query to either insert new data or update existing data using the reference properties of the Form widget.

PostgreSQL Example: 

UPDATE public.users
SET 
  phone = {{Form1.data.PhoneInput1}},
  email = {{Form1.data.Input1}}
WHERE id = {{Form1.data.Textid}};

The above query updates the phone and email fields in the users table using the form data. It targets the user record with the provided ID.

  1. Set the Button's onClick event to execute the update query, and the onSuccess callback to trigger the fetch query that refreshes the data with the updated information.

    Submit form data using Form
    Submit form data using Form

Using JSON Form​

Follow these steps to set up a JSON Form and configure the query:

  1. To display data based on a user's selection, you can add the following code in the Source Data property of the JSON Form:

Example: 

//To display data when the user selects a row in Table widget, use:
{{Table1.selectedRow}}

//To display data when the user selects a item in List widget, use:
{{List1.selectedItem}}

Similarly, you can populate other widgets with data. Based on the data, the JSON Form automatically identifies the appropriate field type for each value. For instance, it sets age to a Number Input. In addition, you can add or customize field types using the Field Configuration property.

  1. Create a query to either insert new data or update existing data using the formData reference property.

PostgreSQL Example: 

UPDATE users
SET 
  phone = {{JSONForm1.formData.phone}},
  email = {{JSONForm1.formData.email}}
WHERE id = {{JSONForm1.formData.id}};

The above query updates the phone and email fields in the users table using the JSON form data. It targets the user record with the provided ID.

  1. Set the onSubmit event to execute the update query, and the onSuccess callback to trigger the fetch query that refreshes the data with the updated information.

    Submit form data using JSON Form
    Submit form data using JSON Form