1593
Views
6
Comments
Solved
Reactive/Mobile Dropdown Tags: how to clear the selected items

I'm looking for a way to clear the selected items in the Dropdown Tags element.

Dropdown tags uses the Choices library (https://github.com/jshjohnson/Choices).

Using the standard Choices library (outside OutSystems), I managed to clear the choices field by either resetting the form, or calling .removeActiveItems() on the choices object in JavaScript.  You can find the CodePen with that attempt here

The first option: using a Form and a button with type="reset" doesn't clear the DropdownTags field in OutSystems.

The second option, calling .removeActiveItems() on the choices object, might work in OutSystems, if I would know how to reference the choices object given the Widget Id of the DropdownTags component.

Anyone have an idea how to do this?

Is there another way to do this?

Solution

Hi Steven,

On the button just do a ListClear on the variable that you use on the input SelectedItemsList. In this example would be SelectedDropdownItemList

Regards,

Marcelo

Hello Steven,


I think you can do this by passing an initial empty list to the dropdown tags widget, and then creating a button that clears this list. When it's cleared, it'll change, so it'll trigger the OnParametersChanged, which will try to serialise this new empty list and therefor clear your current tags. 


Attached an example .oml, hope it helps

DropdownTagsClear.oml

I'm do the listclear in the onchange event of the dropdown tags and it isn't clearing list?  Has anyone else attempted to do do something similar in their use cases with any success? 

I can confirm that ListClear clears the list. But the DropDown stays intact with all items (but they were cleared).


But if you Refresh your server call where you get data, then it works.

Very odd behaviour... Why would I need to make an extra call?

OutSystemsUI now has a Client Action named DropdownClear which will clear the content of the DropdownTag. It requires the WidgetId of the Dropdown, you can get the Widget Id as part of the DropdownTag OnChange event.

Using JS you can try the function DropdownClear by passing the widget Id:

$actions.DropdownClear($parameters.DropDownId)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.