dropdown

[hs0185191]

Hi everyone @Matthew_13 

,

I am working on a custom Workspace page in UI Builder.

What I am trying to achieve:

I have:

• A Dropdown component

• A Glide List component

The dropdown contains values from a choice field (u_choice_1) in my custom table 

When a user selects a value from the dropdown, I want the Glide List to filter records based on that selected choice value.

---

What I have done:

1. Created a Dropdown component.

2. Added an event handler on “Selected items changed”.

3. In the handler, I:

   • Set a client state OR

   • Used a client script with:

   api.setState("stateFilter", event.payload.value[0]);
   api.data.look_up_multiple_records_1.refresh();

4. I also tried using a multiple records data source.

5. I changed the operator from "is" to "is one of", and confirmed that backend filtering works correctly.

6. The correct choice values (1,2,3,4,5,6) are being passed in the console.

---

The Issue:

• The dropdown value is being captured correctly.

• The console shows the correct selected value.

• The backend table filter works.

• But the Glide List in Workspace is not updating properly.

• Sometimes it shows:

  Invalid table name [[{ _row_data ... }]]

---

My Questions:

1. What is the correct way to filter a Glide List dynamically from a Dropdown in UI Builder?

2. Should I use:

   • Client state?

   • Set component property (filter)?

   • Data resource?

   • Or look up multiple records?

3. Is refresh() required for the Glide List?

Any guidance on the recommended architecture would be appreciated.

Thank you!

[Dinesh Chilaka]

Hi @hs0185191 ,

You are doing everything correct, using the client state parameter to dynamically refresh the Glide List Values is the better way , but here the Glide List component expects the values in the format of {id,label}.

So what you need to do here, you need to execute one client script after your multiple records data resource successfully data fetched.

Create one client script and paste the following code.

Remember  api.data.look_up_multiple_records_1.results represents the data resource ,replace that with your data resource name.

function handler({api, event, helpers, imports}) {
    var results=api.data.look_up_multiple_records_1.results;
    results.forEach(function(result){
        result.id=result._row_data.uniqueValue;
        result.label=result._row_data.displayValue;
    });
    api.data.look_up_multiple_records_1.results=results;
}

Now Click on the data resource you configured, then click on the Events tab and click on add event mapping and then choose the Data Fetch Succeeded.

  

Finally add the event handler as the execute the client script as above image shows.Now you are able see the values dynamically based on the choice value on the drop-down.

If my response helped, mark it as helpful and accept the solution.