Displaying PostgreSQL Categories in Retool Dropdown with "New" Option

💬 App Building
1

  1. My goal:
    I want to create a dropdown menu in Retool that allows users to either select from a list of unique categories fetched from my PostgreSQL database or choose a "Nieuw" (New) option to indicate they want to add a new category.

  2. Issue:
    In the select field i can choose the already available categories. But how to create a solution to add " New Category"

  3. Steps I've taken to troubleshoot:
    Created a query to select_category,
    SELECT DISTINCT category
    FROM treatments
    WHERE category IS NOT NULL AND category <> '';

in my form i have a select box where i can see all the available categories. But how i can add new ones.

2

Hey @Rob_Merks

I understand your issue.

To resolve it, you'll need to enable custom values for the Select or Multiselect component. You can do this from the Inspector panel of the component:

image
image1448×868 50.9 KB

Next, type the new option directly into the component input field:
image
image710×386 7.87 KB

Then, press Enter to add it as a new selectable value:
image
image1333×866 48 KB

This will allow the component to accept values that aren’t part of the predefined list.

2 Likes
3

If you want the selection of "new" to trigger some other interaction( like a modal that asks for more information about the new category other than its name) then a useful option is to append a "fake" category to your data list.

eg if the source of your dropdown is something like:
{{ category_query.data }}

you could append an option such like this:

{{ category_query.data.concat({id: -1, label: 'New category'}) }}

Then you can detect the select event and if the selected item has an id of -1 you know they clicked on "new category"

3 Likes