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 to display data-source column value as drop down?

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 drop-down menu 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:


``SELECTMachine ListFROMmachine_data````



  1. In your Appsmith widget that displays the drop-down menu, click on the "Options" property and enter the following code:


{{
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.

If your column name has spaces in it, like "Machine List", be sure to wrap it in backticks (`) in your SQL query and in quotes in the code above.

That's it! The drop-down menu options should now be populated with the data from your table.