Extending fields in Tag Component in AEM 6.5.5 | AEM Community Blog Seeding

[kautuk_sahni]

Extending fields in Tag Component in AEM 6.5.5 by AEM Queries & Solutions - Aemsimplifiedbynikhil

Abstract

Explore a single platform for the entire AEM Community. Reach New Heights in Adobe Experience Manager.

Sometime back I had one requirement where I needed some extra fields as part of tagfield dialog along with the Title and Description.

So to achieve such scenarios we can overlay the existing OOTB tagfield component and use the tagedit option to add different fields as part of dialog of tagpicker.

Just navigate to /libs/cq/tagging/gui/content/tags/tagedit and this node will contain two sub-nodes i.e head and body. So if you open and explore the body node you will find out the fields title and description getting picked up from here.


OOTB path of tagfield
Now we will overlay this node to our apps folder structure and once done we can find the same at /apps/cq/tagging/gui/content. So once you have a copy of OOTB tagfield in your app structure then try adding some extra fields to the body node as below:


overlayed app path


Once we are done with overlaying the node structure in apps folder. Now we will overlay the corresponding Javascript file to load and retain the fields in the tagfield dialog and JCR.

Navigate to /libs/cq/tagging/gui/components/tagedit/clientlibs/tagedit/js/tagedit.js and overlay this Js file to apps folder, this will be created parallel to the previous one.



overlayed path in apps
Now open the overlayed tagedit.js and add the corresponding fields retention code in js, similar to existing title and description field. For reference I have added the below code to render the newly added fields of tag dialog:



Here the highlighted fields are the extra fields that added as part of dialog and here in js i am rendering it.

By following above steps we can create our own custom fields in tagpicker and utilise it saving any data as part of tagfield as per our business requirement.

Read Full Blog

Extending fields in Tag Component in AEM 6.5.5

Q&A

Please use this thread to ask the related questions.