Category: Widget
Resource links
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.

Displaying Data-Source Column Value As Drop Down (Select Widget)?

Issue

I had a table with data I wanted to use in a drop-down menu, and had a query to retrieve that data. I needed to know how to populate the drop-down menu with the results of the query. After posting a question, I found a solution and was able to resolve the issue.

Resolution

To populate a Select widget with options from a single-column table, you can use a query to retrieve the data and then map the results to create the options. Here's an example using an Appsmith query:

  1. Create a query in Appsmith to retrieve the data from the table. For example, you could use this SQL query:
  2. In your Select widget that displays the drop-down menu, enter the following code as source:
{{
query_name.data.map(i => ({
label: i["Machine List"],
value: i["Machine List"]
}))
}}

Replace query_name with the name of your query.

This code maps each row from the query results to an object with a "label" and "value" property. The "label" property will be displayed in the drop-down menu, and the "value" property will be returned when the user selects an option.

The Select widget's options should now be populated with the data from your table.