Dynamic Dropdown based on user-entered value?

Help me!
1

Our application includes a feature for admin users to create their own criteria for generating reports. The user can select a column name and then enter values to include/exclude records where the values match for that column in the database table. When reports are generated (via a separate backend service), the reporting application will use these filter records to know which database rows to include in the report(s).

When creating a new reporting filter, the user selects a database column name (Attribute name on the data entry page) from a pre-populated dropdown. The user must then enter desired values into a text array input field. Unfortunately, this approach requires the user to know exact text values that could include abbreviations, hyphenations, punctuation, odd spellings, etc. This can result in user error when the value isn’t entered exactly as it exists in the database table column.

Our users have requested that the Values text array be a dropdown that contains only the distinct values for the selected column name. (See the screenshot below.)

Screen Shot 2022-05-02 at 12.55.33 PM
Screen Shot 2022-05-02 at 12.55.33 PM1325×784 58.2 KB

I see from this documentation, that I can create a dynamic list of values for a dropdown: Custom dynamic dropdown in a form using smart collections - Developer guide

I can easily follow those instructions to make the Values dropdown list dynamic. This would include creating a new route that looks something like this:

router.get('/filterValues/:columnName',...

I could then inject columnName into a custom SQL query to retrieve all distinct values for that column. For example:

const query = `SELECT DISTINCT ${columnName} FROM my_table;`

But the issue is that I will need to know the current on-screen, user-entered value in the Attribute name field in order to construct the GET request for the dynamic type, smart value dropdown. Is there any way to accomplish this? In other words, can I use current value of an on-screen field within the URL definition for the dynamic/smart dropdown?

Thanks!

3

Hello,
Yon can’t personalize your form in the create section. To personalize a form and trigger the form values, you can create a smart action.

4

I’m not following what you mean. Can a smart action be triggered when a user enters a value in a form field?

I looked through the documentation and don’t see any examples like what I want to accomplish. Can you provide more details on how to implement what you are suggesting?

Thanks.

5

Yes of course. Actually, you want to personalize your create form but forest admin does not allow it. If you want to create a dynamic form you must to create a smart action instead using the default create form. With a smart action, you can personalize the form and add a hook on any fields. For your example, you can add a change hook to trigger the the attribute_name and change the dropdown values.
The documentation to create a smart action: link to the doc.
Is it clear :slight_smile: ?

6

It is clear now. Thank you for the explanation and link.

Unfortunately, I don’t think my user will want this implementation because it isn’t the best user experience to have one create function that uses a smart action menu selection but all other create functions use the +Add button. Is there any chance that Forest Admin’s roadmap includes dynamic hooks in create forms?

7

You are welcome.
I will forward the ticket to the product board to get a change to include in the road map the dynamic hooks in the create forms.