How to create a Tagfield using coral UI 3?

[abhi614]

Hi, 

We need to create a tagfield in a page(Not in dialog) which can accept multiple tags using coral UI 3. As of now we are using only a pathbrowser which allow only single selection of value. We want the users to choose/delete the tags. We need a functionality similar to the provided screenshot in coral UI. Can someone please suggest? 

Thanks & Regards,

Abhishek Gupta

[kchaurasiya]

@abhi614 Can you please explain more in details about your requirement.

As per my understanding AEM tags are used in dialog or page property dialog because this field is for authoring by the author. I do not think you can use this directly on the page.

For achieving the same you need use the UI code(Css/js) to manage the same on the page.

Thank You.

Keshav Chaurasiya

[abhi614]

Hi Keshav,

Thanks for the reply. We are creating a utility page where we are providing authors an option to select values from Dropdown fields, Path browser, Textfields using coral UI. Is it not possible to create tag field using coral UI in such a way to get user input on the form?

Thanks & Regards,
Abhishek Gupta

[kchaurasiya · Accepted solution]

@abhi614 You can create a component lets say formcontainer and whatever field you want to author those you can keep in the formcontainer component dialog and you can write the html for whatever input you want to take it from from end user. Tag field will not be part of page, As you can not take the tags inputs from the user because this will be used for authoring.For your reference please see the below snapshot and i am assuming this is your requirement.

Thank You.

Keshav Chaurasiya

[Bhuwan_B]

@abhi614 Check below URL, if it solves your usecase:

http://experience-aem.blogspot.com/2019/08/aem-65-tags-picker-select-tags-from-multiple-folders.html