AEM Customization: Show Unpublished Reference Alert for Tagpicker

Recently, I published a blog post regarding AEM Customization: Show Unpublished Reference Alert for Content Path where I showed how to customize the Pathfield and Xffield resourceType. In doing this, I was able to showcase how to create a notification for the content author as to whether the selected content path is published or not. I found it to be a useful feature for one of our clients while they were authoring a number of AEM content pages. After the successful delivery of this feature, the client requested that we implement a similar kind of feature while selecting AEM tags in cq:dialog.

Unfortunately, AEM does not have the OOTB functionality to show unpublished notifications for selected AEM Tags while authoring the components. In this blog, I am going to show how you can extend the functionality of tagspicker resourceType to show unpublished reference alerts while selecting AEM tags.

Steps to extend the functionality of tagspicker resourceType.

1. First, open CRXDE Lite console i.e. http://localhost:4502/crx/de/index.jsp
2. Create one node named clientlibs with the following properties. After that, create one folder named js inside clientlibs node and also one file named js.txt.

   <?xml version="1.0" encoding="UTF-8"?>
   <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" 
        jcr:primaryType="cq:ClientLibraryFolder" 
        categories="[cq.authoring.editor]" />

   The structure should look as follows:

3. Now, create one file named unpublished-reference-alert-for-tags.js  inside /clientlibs/js  folder and paste the following script:

   (function ($, window) {
       // cq:tag path validation only for cq:dialog
       // Tagfield : cq/gui/components/common/tagspicker
       $(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
           selector: ".js-cq-TagsPickerField .js-coral-pathbrowser-input",
           validate: function (element) {
               var tagPath = element.value;
               if (tagPath !== '' && tagPath != null) {
                   checkReplicationStatus(tagPath);
               }
           }
       });
   
       // Check when coral-Pathbrowser-picker dialog is open.
       $(document).on("click", ".coral-ColumnView-item.is-active", function () {
           var selectedPath = $(this).data("value");
           checkReplicationStatus(selectedPath);
       });
   
       // Check the replication status of the selected tag.
       function checkReplicationStatus(tagPath){
           const CONTENT_PATH_PREFIX = "/content/cq:tags/";
           const INFINITY_JSON = ".infinity.json";
           const CQ_LAST_REPLICATION_ACTION = "cq:lastReplicationAction";
           const ACTIVATE = "Activate";
           if (tagPath.indexOf(CONTENT_PATH_PREFIX)  !== -1) {
               var tagPathUrl = tagPath.concat(INFINITY_JSON);
               $.getJSON(tagPathUrl)
                   .done(function (data) {
                       var lastReplicationAction = data[CQ_LAST_REPLICATION_ACTION];
                       if (lastReplicationAction !== ACTIVATE) {
                           var message = " You have Selected Unpublished Tag : " + tagPath.bold();
                            $(window).adaptTo("foundation-ui").notify('', message, 'notice');
                       }
                   });
           }
       }
   })($, window);

    

4. Next, modify the js.txt  file as follows:

Once you are done with all the above-mentioned steps, your next step is to test the functionality of tagpicker resourceType.

Inspired Digital Experiences for Manufacturing & Automotive

Whether you’re just beginning your digital transformation journey or are well on your way, we invite you to explore our partnership with Adobe and our diverse capabilities in manufacturing and automotive.

Download Lookbook

You can go to any page and drag/add components into a layout container whose cq:dialog has the tagpicker field. Select any tag that has not yet published. For testing purposes, you can create a new tag.

While authoring the component you will get the following result:

To ensure this would help, I tested this extended functionality on AEM 6.5. It will work only work for cq/gui/components/common/tagspicker resourceType.

Download this package for reference, and don’t forget to drop a comment if you need more help on this. In case you missed my previous blog, then please visit AEM Customization: Show Unpublished Reference Alert for Content Path.