AEM Tag picker widget on a page

Question

I am working on a functionality where the user selects a Tag from a namespace and clicks a button.

Currently, we have a text box where user needs to enter the tag ID. But its not convenient for them to know the tagID.

Is there any way to create a Tags Widget (or a Path Browser) on a component HTML, similar to how it works in the dialog ?

I know Coral UI dependencies may be an issue, but just curious if we can achieve that. I've never done something like this.

Do you need this on the publisher and for the end user of your page or do you need this on the author? — Jens, Mar 25 '19 at 21:50
@Jens, it will be used by the authors mostly, but it can have usage on the publish as well. Any ideas ? — Riju Mahna, Mar 26 '19 at 02:33
are you looking for something like this: https://selectize.github.io/selectize.js ? — Ahmed Musallam, Mar 26 '19 at 14:07

score 0 · Answer 1 · answered Dec 06 '19 at 06:11

I hadwritten a similar answer here

AEM Tools: Tag Picker using Coral

I had overlaid the

cq/gui/components/common/tagspicker

in the apps folder, and then edited the piece of code in the render.jsp to pick the tags from the desired path.

AttrBuilder attrs = htmlTag.getAttrs(); . . . . .

attrs.add("data-basepath", cfg.get("tagsPath", tagSpace));

where tagSpace refers to the custom tag location inside the /etc/tags/customTagSpace

You can pass it inside an OSGI configuration or anything configurable, where inside the render.jsp you can pick up using scriptlets or other methods and then display it.

AEM Tag picker widget on a page

1 Answers1

Linked