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.
   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   <?xml version="1.0" encoding="UTF-8"?>

   <jcr:rootxmlns: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]"/>

   <?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]" />

   <?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:
   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   (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.

   functioncheckReplicationStatus(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);

   (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);

   (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.

Build an AI-First Enterprise

From early pilots to enterprise-wide deployment, our award-winning AI consulting and technical services help you build the right foundation, scale responsibly, and deliver meaningful business outcomes.

Learn More

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.