Hi,
I'm using the dropdown server side widget and want to add a functionality that filters the results that are selected and revert that.
I've implemented it with some simple logic but when testing the dropdown closes. Attached an example of the implementation. The behavior can be replicated by:
I've also tried to use the function DropdownServerSideOpen to see if that would be a feasible solution (I imagine that we would see a glimpse) but also didn't succeeded. This logic has been disable and it's available on the screen action OpenDropdown.
Am I doing something wrong? Is there a different way to accomplish the desired behavior?
I would really appreciate some help on this. Thanks in advance :)
Hi @Patrícia Glória Ferreira,
Well, let me try to explain why your example is not working as expected.
At OutSystemsUI we've a body click event that will look at the current target in order to understand if it is a DropdownServerSide child, if yes, Dropdown should NOT close, otherwise, target is not a child of Dropdown, than Dropdown should close!
Simple, but the problem here resides on the way you implement the links showAll and showSelected. Since they are inside an IF statement that relates to ShowOnlySelected flag that is managing if we've one link or the other one, once body click event gets fired the validation will not find the link relationship at DOM since is not there already.
That said, some inputs about your example:- You do not have the need of having an InputWithIcon pattern inside the Search placeholder, you just need the Input;- In order to avoid changing DOM content you need to have a link containing an expression and manage the text accordingly;- In order to manage it's visibility you can add an IF as you did, or managing the link visibility attribute;
In order to help you with this I attached an OML with the solution for it, where you can check that there is no the need of the DropdownServerSideOpen client action once with this approach DOM link element will be there and the reference for it will not be loose due IF statement.
Hope it helps,
Let us know if you have any doubt about it!
Cheers,JR
Hi @Gonçalo Martins and @José Rio,
Thanks for the quickly follow up on this.
I'll do some tests with the inputs you gave. @José Rio I believe that the attached OML it's the same as the one provided by me. Was that a mistake?
Thanks again
Well, I can not say it was a mistake. It's something you had to get deeper context about the OutSystemsUI for example in order to understand why that was happening.
However this is not an issue at OutSystemsUI as well, but an edge case due to the way IF statements works on adding/removing content from the DOM accordingly.
The OML is the same indeed and you can find there an new screen with the improvements/fixes I mentioned at my previous comment.
I compare the wrong OML, my bad!
The solution you provided works perfectly, thank you!
Hi @Patrícia Glória Ferreira
First of all, thank you for bringing up this use case.What's happening is that in the initial state of the component, the links aren't present in the DOM yet and they're only rendered afterwards based on your condition. This is because there's code to prevent the OnBody click event (that makes the dropdown close when clicking outside) to be triggered on those clickable elements like links and buttons that only runs at the moment of the build.We'll try to provide a workaround and if possible we'll get back to you.
Cheers,GM