←
menu

Tag...You’re It

By: Chris McIlvoy / June 21st 2023 / AEM, Tags
Tag...You’re It

Oh, do we love tags. Tags in Adobe Experience Manager (AEM) are much more than a simple string array (very slight-diss to WordPress).

A typical Content Management System (CMS) tag implementation:

tags = {"apple", "watermelon", "jackfruit"}

Tags in AEM are a first-class object.

Content authors can use tags to classify & categorize pages, assets, and other items in AEM.

There are a ton of great posts around tag functionality; so, we will focus on overlaying the tag edit form.

First of all: Why would we need to extend tag form?

An example requirement could be to maintain a value(s) such as a unique ID or GUID (globally unique identifier) on the tag.

Tag edit form available fields out-of-the-box are:

Default Tag Authoring

Overlay

Step 1

Let's get started by navigating in crx\de to the tag edit form

/libs/cq/tagging/gui/content/tags/tagedit

A simple right-click and select overlay, and we are good to move to /apps/.. now and extend

We can add our custom field under the rather short 🥴 path:

/apps/cq/tagging/gui/content/tags/tagedit/jcr:content/body/items/form/items/wizard/items/editStep/items/fixedColumns/items/fixedColumn1/items

And voila!

Overlayed Tag Authoring

Step 2

Now, we need to ensure the value we added is passed when the form is saved. There is a XHR call to the tag such as:

http://localhost:4502/content/cq:tags/favorites/dogs/aussies.json?_ck=1684444491284

Typical tag JavaScript Object Notation (JSON) response:

{
 "jcr:primaryType": "cq:Tag",
 "jcr:mixinTypes": [
"cq:ReplicationStatus"
 ],
 "jcr:createdBy": "admin",
 "jcr:title": "2mm",
 "cq:lastReplicationAction": "Activate",
 "cq:lastReplicatedBy": "ct-admin",
 "jcr:created": "Sun Oct 09 2022 10:36:16 GMT-0400",
 "cq:lastReplicated": "Mon Feb 27 2023 20:52:36 GMT+0000",
 "jcr:description": "2 mm",
 "sling:resourceType": "cq/tagging/components/tag"
}

This call is in the clientlib file:

/libs/cq/tagging/gui/components/tagedit/clientlibs/tagedit/js/tagedit.js

After a quick review of the source code, we can see some interesting comments: The "jsp" shows the age of this source code!

// TODO find a way to eliminate this ajax and perform the prefilling
in some jsp itself
$.ajax({
    type: "GET",
    url: requestPath + ".json" + '?_ck=' + Date.now(),
    contentType: "application/json"
}).success(function (res) {
    var title = res["jcr:title"];
    var description = res["jcr:description"];
    $("#tagtitle").val(title);
    $("#tagdescription").val(description);
    $("#custom-guid").val(description);
...
});

This populates the value from AEM (JCR) to the form. Now, we need to edit the same file again to send it to AEM (JCR). Oh wait! The code uses jQuery form to serialize; so, we should be good. 👍

data = wizard.serialize();

This should allow content authors to be able to maintain custom fields beyond out-of-the-box properties.

We love helping customers regarding how AEM is vastly ahead of the field in content management. This illustrated example is just one of many.

Contact C\T to learn how we can help your team efficiently leverage and fully extend AEM to its vast potential.