Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How Do I Populate a Select Widget with the Values From Table B in SQL Which, When the Form Is Updated, Writes the Value Into Table A?

Issue

I am creating a form in a modal to update user details. One of the input fields is related to another table and needs to be populated by a select widget that fetches values from that table. I want the widget to display the existing value from the related table when the form is opened and write the selected value back into the original table when the form is updated. Can anyone help me achieve this in Appsmith?

Resolution

To create a Select widget in Appsmith that fetches values from the "Contracts" table and writes the selected value back into the "Users" table, follow these steps:

  1. In the modal form, add a Select widget to represent the contract type. Populate this widget's options by creating a query that retrieves all "ContractID" and "Contract_Name" values from the "Contracts" table. You can set these values as {{QueryName.data.map(row => ({ label: row.Contract_Name, value: row.ContractID }))}}.
  2. To show the current "Type_ContractID" for the user when the form opens, create a query that fetches the related "Contract_Name" from the "Contracts" table based on the user's existing "Type_ContractID." Use this value to set the default selection in the Select widget.
  3. Once the form is updated, the Select widget's selected value should be written back into the "Type_ContractID" column in the "Users" table. You can achieve this by binding the widget's value to an update query that writes the selected value back to the appropriate column.

Check out this sample app, which demonstrates how to conditionally populate the values of a Select widget. The options displayed in a second Select widget are dynamically set based on the selection in the first widget. Feel free to fork the sample app to explore the implementation details. Let us know if this helps!