A tricky challenge with the OutSystems UI migration process for the Dropdown Tags widget
The release of OutSystems UI version 2.8.3 introduced new versions of the Accordion, Carousel, Date Picker, Dropdown Search, Dropdown Tags and Notification blocks. All of these blocks now use the new architecture that is aligned with industry best practices and offers new APIs which provide a wider range of customization for those components. This version also introduced a new pattern, the Date Picker Range, fixed multiple issues and contained several improvements.
To minimize the technical debt in your applications, it is advisable to migrate to new versions of OutSystems UI as soon as possible. Also, new versions will improve the stability and performance of the components. The migration process for every changed component is described in detail in the OutSystems Migration Path page. However, there are some edge cases where the component can lose functionality if not correctly adapted to the context where it is being used.
Dropdown Tags widget
The Dropdown Tags pattern “offers multiple choice options to the user when using a dropdown search”. In the project I am working on, we use this pattern as one of the inputs to filter a table. The component was also associated with a Reset button that, as the name suggests, would reset all the filters selected by the user. I was tasked with migrating the Dropdown Tags widget to the new implementation.
The problem
Before the OutSystems UI update, the SelectedItemsList parameter of the Dropdown Tags widget was used to store the list of selected records in a local variable. Whenever there was the need to programmatically reset the selected items of the widget, it was enough to clear this variable using the ClearList action, as presented in the flow below.
The migration notes suggest associating the value of the SelectedItemsList parameter to the now called SelectedOptions attribute. After performing these steps, we encountered some issues with the behaviour of the widget:
- the widget would close for every tag selected. After its closure, the widget would still appear on focus, disabling the possibility of opening it again. This issue could be bypassed only if the user clicked outside of the widget to remove the focus on it.
- the clearing filters feature would not work anymore for the dropdown tag widgets.
The solution
The new version of OutSystems UI introduced an action called DropdownClear. This action can be called to clear the selected items on the Dropdown Tags widget, so there is no need any more to use the SelectedOptions attribute in the dropdown tag widget to clear the selected records.
The combination of these two changes are enough to solve the problems that were described before. This solution is illustrated in the images below.
Conclusion
For the most part, these types of migration processes are easy to implement thanks to the complete documentation provided by OutSystems. However, one of the main takeaways of this challenge is to always be mindful about subtle and unexpected changes of behaviour when making a migration of this sort.
This solution was effective in my use case, but there might be other ways to tackle this challenge. Let me know if you have alternative solution or if you encountered other challenges while upgrading OutSystems UI.
