Skip to main content

Update data

This page shows how to update table data using the Form and Modal widgets.

Prerequisites​

A Table widget connected to a fetch query. To connect data to a table, see the Bind Data to Widgets guide guide.

Configure Form and Modal​

This section guides you on how to open a Modal by clicking a button in a Table and configure a Form inside the Modal.

  1. To open a Modal based on Table row selection, select Add a new column and then click on the gear icon ⚙️ from the column's properties pane.

  2. Set the Column type as a Button and set the onClick event to show the Modal. If you want the Edit column to be visible at all times, you can use the Column freeze property to freeze the column.

info

Modal widget remains hidden on the canvas and becomes visible only when an event is triggered.

  1. You can access and edit the Modal widget from the entity explorer.

  2. Drag a Form or a JSON Form widget within the Modal, and add the required widgets. If you prefer a custom UI, use the Form widget; for a basic form setup, use the JSON Form. Additionally, you can configure the appearance of the form using the styles properties.

  3. To display data from the triggered row in the table, connect the data to the widget's Default value property using mustache syntax {{}}:

Example: To display the user's name, add the following code in the Default value property of the Input widget:

{{Table1.triggeredRow.name}}
// 'name' refers to the column name

Learn more about the triggered row property.

Submit Form data​

This section shows you how to set up Form validation and update Form data.

  1. To validate user inputs, use properties like Regex, Valid, and Required. The submit button remains disabled until all widgets meet the defined validation criteria. You can find these properties under the Validations group in the Widget reference.

See validation examples for the Input widget.

  1. Create an update query using the data reference property of the Form widget and triggered row property of the Table widget.

Example: If you have a user table and want to update a record based on the user's ID, you can use the following query:

-- For JSON Form: {{JSONForm1.formData.name}} 

UPDATE public.users
SET 
  phone = {{Form1.data.PhoneInput1}},
  email = {{Form1.data.Input1}}
  dob = {{DatePicker1.formattedDate}}, -- To get formatted Date
  gender = {{ Form1.data.SelectGender }},
  image = {{ Form1.data.InputImageURL }} -- To add image from Filepicker widget use: {FilePicker1.files[0].data}}
WHERE id = {{Table1.triggeredRow.id}};

You can refer to the datasource reference for specific instructions on setting up update query for your selected datasource.

  1. Set the Submit Button's onClick event to execute the update query.

Refresh Table and close Modal​

When data is updated in a datasource, the Table widget does not automatically reflect the changes. To update the Table data, follow these steps.

  1. Set the Submit Button's onSuccess callback to trigger the fetch query, which retrieves the updated data and displays it in the Table.

  2. Create a new onSuccess callback by clicking the + icon and set it to close the Modal.

  3. Create a new onSuccess callback to show the success alert.

If you want to update data directly from the Table, see Table Inline Editing.