Hello Everyone,
I have a list which is input into a dropdown tag. When a user searches something on the dropdown, if it's not in the input list I want to make a button visible outside. But the dropdown tag widget is only returning the selected items List.
Is there any way to achieve this requirement?
Thanks in advance
Vignesh
Hi Vignesh,
From the mentioned use case, what I could understand is that you want to show a button when the search result option list is empty? If so, then refer to the attached oml file for the solution.
JS to conditionally set boolean local variable value to show/hide button
var searchInput = document.getElementById($parameters.DropdownWidgetId).querySelector('.vscomp-search-input'); searchInput.addEventListener('input', function () { setTimeout(function() { if (document.querySelector('.has-no-search-results')) { $actions.OnSearchResultChange(true); } else { $actions.OnSearchResultChange(false); } }, 300); }); document.querySelector('.vscomp-search-clear').addEventListener('click', function () { $actions.OnSearchResultChange(false); });
See this demo screen: DropdownTagsTask
I hope this helps you!
Kind regards,
Benjith Sam
Hi Benjith Sam,
I have a similar use case that I might need your help. Instead of the button that appears when list is empty, How can I add an option(Refer Screenshot) in the dropdown itself to add an element to the same list if there are no elements returned during the search.
Inshort, please help me place the button you used outside the dropdown to inside, when the list is empty.
Thanks in advance,
Regards,
Rashid
Hi Benjith,
Thank you for your reply. This is the exact thing I want. But my dropdown tag is different from yours
It has only one handler, also the look and style is different. The OutSystemUI is updated. Why the dropdown tag is different ?
Probably you are using the old OutSystemsUI version. Can you check the same?
I'm using OutSystemsUI Version 2.8.3
Hi Benjith ,
This is the exact requirement I want. Thank you for the solution
Vignesh Maliyekkal
You're welcome, Vignesh,
Glad to help you :)
May be, You can achieve this requirement through forge component.
(Multiple Selection Dropdown Widget (Reactive And Mobile) )
Multi Select Dropdown Component
Thanks,
Akash.
Hi Akash,
Thank you for your reply. I'll try with this component