Skip to main content

Work with Data in UI

In the previous lesson, we learned how to connect a database and display data in a Table widget.

Now, in this lesson, we will focus on updating data directly from the UI. Using widgets like Input, Datepicker, and Button, we will update user details and save the changes to the database.

What will I learn? 📝

By the end of this tutorial, you will learn to:

  • Bind widget data to a database.
  • Display and edit table data using a form.
  • Update user details from the UI and save changes to the database.
  • Trigger queries or JavaScript functions based on user actions.

Before proceeding, ensure that you have completed Lesson 1: Connect and Display Data, where you will learn how to connect your app to a database, fetch data, and display it using a Table widget.

  1. Open your application and, from the Entity Explorer, click the UI tab. The UI tab opens a list of available widgets in Appsmith, which can be used to display data and design the app.

  2. Click + New UI element and drop a Form widget on the canvas to the right of the Table widget. The Form widget allows you to collect details from users, which can then be stored or used to update existing records in the database.

  3. Rename the Form title to User Details.

  4. To display and edit user details, add an Input widget for the user's name, a Datepicker widget for the date of birth, and an Image widget for the profile photo inside the form.

Configure the properties as shown below:

WidgetNamePropertyValueDescription
InputnameInputDefault Value{{usersTable.selectedRow.name}}Displays the user's name and allows editing.
DatepickerdobInputDefault Date{{usersTable.selectedRow.dob}}Displays the user's date of birth for selection and modification.
Date FormatLLFormats the date in a user-friendly format.
ImageprofileImage Source{{usersTable.selectedRow.image}}Displays the user's profile photo.

With {{}} (mustache binding), you can dynamically display and update data from various sources, such as widgets, queries, and APIs, in other components.

  • usersTable: The name of the Table widget from which we want to fetch the user's data.
  • selectedRow: The reference property of the Table widget that provides access to the currently selected row's data in usersTable.
  • The name, dob, and image are the selected user's properties retrieved from selectedRow.

  1. Select the Queries tab on the Entity Explorer on the left side of the screen, then click the + New Query / API button to create a new query.

  2. Select the Users datasource from the list of options, then rename the query to updateUsers.

  3. Update the SQL command in the query editor to update the users table with the details edited in the Form.

UPDATE public."users" 
SET name = {{nameInput.text}}, 
    dob = {{dobInput.selectedDate}} 
WHERE id = {{usersTable.selectedRow.id}};

In this SQL command, we are dynamically updating the users table with the edited values from the form. The bindings inside {{ }} reference the widget properties:

  • {{nameInput.text}} retrieves the updated name from the Input widget.
  • {{dobInput.selectedDate}} retrieves the selected date from the Datepicker widget.
  • WHERE id = {{usersTable.selectedRow.id}} ensures only the selected user’s record is updated.

  1. Navigate back to the canvas by selecting the UI tab in the Entity Explorer.

  2. To update the database when the Submit button is clicked:

  • Select the default Submit button on the form and rename it to Update.
  • In the onClick event, set the action to Execute the updateUsers. This runs the query to update the database with the modified details.
  • In the onSuccess callback, set the action to Execute a query > getUsers. This refreshes the table data to reflect the updated user details.

Now, select a row in the table widget to display the user's details in the form. After making the necessary updates, click Update to save the changes to the database and refresh the table with the updated data.

caution

The databases used in tutorials are public and shared by all Appsmith users, so ensure that you don't input confidential information during testing. The databases are automatically reset every day, so any updates made to these databases are temporary.

Next steps​