How to add items to the dropdown tags UI component of OutSystems

Hello Team,

I am facing issue to add manual values to the DropDown Tags UI Component.

In the above component the current behavior is, We can select the values from dropdown and that selected values are appear as tags in the above part.

But suppose , If we manually type some word into the search field and that is not present in the Dropdown List then I need to capture that value on pressing of "ENTER" key event and save it to the above drop down list so next rime when we are searching for that particular filed it should appear in the list.

I tried with some key events on the component but not working.

I have created clone of that component and on the selectabletags I have added some events but its not calling those events.

Below is the actual UI on the browser, Few tags are already there (Which are in the drop down) but on the second line I am trying to add some random word but unfortunately its not considering any event.

 Please provide some solution to achieve that.

Champion

Hello Vishal

To achieve this you will need to change the approach as it doesn't seems to achieve with the "TagsDrops".

You can give a checkbox near to the Dropdown Says.. Others or Option Not Found. If that checked, you can open a textbox and ask to put the Value and same you can save in the database using from Dropdown Values. So, next time it will be there. 


Or you can do same with the Tag Selection Add well, Add one Value as "Add Tag" if user clicks on it, check in OnChangeEvent, if Value is "Add Tag" you can open Pop-up and ask user to Put New Option, then save the same in Database. 


I hope this will give you a direction to achieve the goal.

Hello Vishal,

Could you please refer the below link where the requirements was near about same as yours.

https://www.outsystems.com/forums/discussion/69332/help-with-adding-new-items-to-dropdown-tags/

Thanks & Kind Regards,

Sachin

Thanks @Manish Gupta  and @Sachin Waghmare ,

Like you both says , We can achieve this but one question, Can we achieve this from the same search box?

Means when we type something in the search filed and if not found then we press "ENTER" key and it will store it into same dropdown. Will it be possible without using any extra filed or widget.

If not possible then you both have good options and I will implement like that.

Really thanks for the solution.

Champion

Hi Vishal

I have tried with lots of methods but didn't found this workaround to add a new element by pressing enter. See here is all possible options with Dropdown Tag: https://github.com/Choices-js/Choices#additemtext 


Here, add item text seems to me could work but I am not getting a way to handle this. So, the option left to add new value is with the additional widget only. 

Thanks Manish for quick reply,

I will go through the link which you have shared with me and implement the solution as you suggested.

mvp_badge
MVP

Hi Vishal,

For the mentioned use case, I do have an approach to suggest.

Steps to follow:

  1. Define the OnRender event hander to the respective screen 
  2. Introduce a JS node within the render event handler flow and include the below-mentioned JS

JavaScript Snippet:

var searchInpt = document.querySelector('.choices__input.choices__input--cloned');

searchInpt.addEventListener('keyup', function(e) {
   if (e.keyCode === 13) {
       $actions.AddDDOption(this.value);
   }
} ,false);

Note: The OnRender action flow gets executed on every screen state change, but I don't think this implementation will have a significant performance impact. Somehow, the Dropdown search Input control is not getting registered with the event handler if the same JavaScript is defined in the screen OnReady event handler flow, i.e. I'm encountering node cannot be found console warning. 

See this sample app DropdownTagsTask

Refer to the attached .oml file.


I hope this helps you!


Kind regards,

Benjith Sam

RWALabDDSearchTask.oml

Thanks @Benjith Sam ,

Given solution is almost satisfying the criteria but I think still some updation needs to be done.

As you said I have added same JS to OnReady but its adding more than one element on single click(Same element twice or thrice).This is the only issue I found with the this solution.

But rest of that, Everything is perfectly fine and fulfilling my criteria.

Really thanks for this valuable solution.

mvp_badge
MVP

Hi Vishal, I have defined the JS code in the Screen OnRender handler flow. If you check the sample implementation (DropdownTagsTask ), you can observe that on the single return/enter keypress, if the entered dropdown search value is a new option, then it gets created in the respective entity as a single record (not multiple times). 

If possible, could you share the sample .oml file? Then, we can help you to figure out why the value is created multiple times on a single return/enter keypress. 


Glad to help you :)


Kind regards,

Benjith Sam

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