Hi everyone,
I am facing an issue with cascading dropdowns in a Reactive Web App.
I have two Dropdown Search widgets (using the OutSystemsUI component). Dropdown 1 is supposed to filter the options available in Dropdown 2.
Inside the "On Changed" event handler of Dropdown 1, I implemented the following logic to filter the list data for Dropdown 2:
1. ListFilter (to filter the master list based on Dropdown 1 selection)
2. ListClear (to empty the current Dropdown 2 UI list variable)
3. ListAppendAll (to push the filtered list back into the Dropdown 2 list variable)
The logic seems correct, and the underlying local list variable updates properly. However, the Dropdown 2 UI refuses to refresh and still displays the old, unfiltered data.
Any help or workarounds would be highly appreciated!
Thanks in advance.
Hi @Kane Loony ,Try debugging the Dropdown 1 OnChange action and check whether the filtered list is actually returning the expected records for Dropdown 2. If the filtered list itself is not correct, then the issue is most likely with the filter condition.
If possible, could you please share a screenshot of the OnChange action logic along with the ListFilter condition you are using?
RegardsAbhijith G
Hi @ABHIJITH G ,
I have debugged the Client Action flow, and the data results are exactly as expected. During debugging, I can see that after the ListFilter and ListAppendAll steps run, the local list variable successfully updates and holds only the correct, filtered data.
The issue is that despite the local variable having the correct data, the Dropdown Search UI widget component does not react or update to show these changes. It seems stuck with its old cached items.
As requested, I have attached the screenshot of my OnChanged flow below.
Thanks.
Hi,
If the options from the dropdown search 2 is based on the selection of dropdown 1, Should the filter condition have SelectedOptionList.Current.Value paramenter of OnChange handler ?
Regards,Nam
Hi @Nam Nguyen ,
In my case, Dropdown 2 doesn't filter by Dropdown 1's selected ID. Instead, when Dropdown 1 changes, Dropdown 2 just needs to filter and show records where the attribute = True, just like the picture ListFilter.
During debugging, this filter logic works perfectly and the local list variable updates correctly. The only problem is that the Dropdown Search UI widget doesn't refresh to show the new data.
May i know if CodeList is setted to Dropdown 2 as OptionsList ?
I see after Appending all the filtered data to CodeList, you have an assignment to the CodeList again, override the data ? Regards,Nam
Yes, CodeList is indeed set as the OptionsList for Dropdown 2.
Regarding the last assignment (CodeList = CodeList), that is actually just a common OutSystems workaround (assigning a list to itself) to try and force the UI to refresh. It doesn't override or change the filtered data, it's just meant to trigger a re-render.
However, even with that trick, the Dropdown Search UI widget still doesn't update.
While debugging, you could confirm whether the List is as expected even at the End node, right? If not, check that also. Because we need to make sure the list associated with the dropdown doesn't change after the expected filtered list assignment is done. (Also, ListClear + ListAppendAll for the same list is equivalent to assigning the filtered list directly to that list variable. You can replace the ListClear & ListAppendAll using a single assign node. This is not necessary but may help to reduce one node, FYI.)
My bad! It turns out OutSystems Reactive is smarter than I thought. Just using the standard ListAppendAll was actually already refreshing the Dropdown UI perfectly from the very beginning, without needing any "assign to itself" trick or workarounds.
I didn't realize it at first because my filter validation condition was incorrect, so i thought the list kept returning the wrong data. After double-checking the criteria carefully during debugging based on your advice, I fixed the filter condition, and the Dropdown UI updates instantly now!
Thank you so much for your patience and for guiding me to debug the logic properly. This case is now successfully resolved!