Implementing a Dropdown Colour Picker for AEM Dialogs

an abstract splash of red, yellow, blue and pink hues on a canvas

Introduction

Most organizations use a set of brand colours on their website. A dropdown colour picker for AEM helps implement this by restricting the colour choices available to authors. However, once this list of colours increases and goes beyond a particular number, it becomes difficult to keep track of exactly which colour each name refers to.

four different colour labels shown in basic colour picker dropdown component in AEM dialogs
Fig. 1: Standard dropdown implementation in AEM.

Requirement

Find a quicker and simpler way to select colours so that authors don’t have to rely on trial-and-error.

Analysis

A full colour picker would help the author preview the colour they are about to choose but would fail to restrict them to the set of brand colours. It would be ideal to have the best of both worlds: the choice-restriction of a dropdown, and the preview capability of a colour picker.

Proposed Solution

A dropdown with each option has the respective colour as background (fig. 2). This fulfils both the requirements and has the best of both worlds.

Absolute blue, Mars Red, Verdant green and bear brown hues shown with labels in a dropdown colour picker dialog box
Fig. 2: The required dropdown in a colour pick dialog box after implementation.

Discovery

Component dialogs’ behaviour and styling is handled by the ‘cq.authoring.dialog’ clientlib by default. This makes it quite easy to modify default dialog behaviour, since all that’s needed is to create a clientlib with ‘cq.authoring.dialog’ category.

Implementation

NOTE: The following has been implemented and tested in AEM 6.2

To add background colours to each option in the dropdown, store the hex value of the colour as the value of each option in the dropdown, and finally set the background through JS.

  1. Add a class colorfulDropdownto the select field in the component dialog:

    code lines to add the colourful dropdown class to a slected field in an AEM 6.2 component dialog
    Fig. 3: Adding the class “colorfulDropdown” to the selected field.
  2. Create a clientlib like so: “/etc/designs/argilDX/colorPickerClientLib” and add a category with value “cq.authoring.dialog” :

    demonstration of the creation of client library and category addition for dropdown colour picker implementation
    Fig. 4: Create a clientlib and add a category with value.
  3. Create a file called “js.txt” under your new clientlib and add the following lines:

#base=js

drop-down.

jscolorPickDropdown.js

javascript file creation in the client library for addition of colour pick dropdown
Fig. 5: “js.txt” file creation and addition of colour pick dropdown under the new clientlib.

4. The following files should be placed under the clientlib folder in the “js” folder

drop-down.js

//To set the color of the select button on dialog load
$(document).on("foundation-contentloaded", function(e) {
    bgColorSelect.colorfulSelector();
});

//To change the color of the select button on option select
$(document).on ("click", ".colorfulDropdown ul", function(e) { 
    bgColorSelect.colorfulSelector(); 
});

colorPickDropdown.js

let bgColorSelect = {
       colorfulSelector : function() {
    	//The dropdown itself
        let dropdown = $('.colorfulDropdown ul');
        //The select button for opening the dropdown
        let selectButton = $('.colorfulDropdown button');
        //The list of options
        let optionList = dropdown.children();
        if (optionList.length > 0) {
          for (let i = 0; i < optionList.length; i++) {
           //The color's hex valuestored as an option
           let optionValue = optionList[i].getAttribute("data-value");
           if (optionValue) {
             //Set the background of the option
             $(optionList[i]).css("background-color", optionValue);
             //Make the border white
             $(optionList[i]).css("border-style", "solid");
             //Make the select button the same color as the selected option, 
even when the dialog has just been loaded
             if($(optionList[i]).hasClass("is-highlighted") || 
$(optionList[i]).attr("aria-selected")==="true"){
              $(selectButton).css("background-color", optionValue);
            } 
          }
          else {
            //If the option has no value, make the background transparent
            $(selectButton).css("background-color", "transparent");
          }
        }
      }     
    }
};

How to Use:

  1. Download the package here
  2. Open ‘/crx/packmgr’
  3. Upload and install the package. Make sure ‘Force Upload’ is checked
  4. Drop the Color Pick Dropdown component (in Home group) on to any page and open the dialog
  5. You can see the dropdown colour picker for AEM in action

If you’re interested in other OOTB solutions customized to make your life easier while working on AEM, drop us a message.

Ensure Service User – An ACS AEM Commons Utility

Ensure Service User – An ACS AEM Commons Utility

Prior to AEM 6.2, developers used administrative resource resolver to access JCR programmatically. Now, Ensure Service User in AEM will make the process less error prone and easier to manage.

Problem Statement: 

Let us assume that a developer needs to access the resource from content path programmatically. Before AEM 6.2, administrative resource resolver was one of the ways to achieve the same. In addition to providing access to the content path(s), administrative resource resolver provides access to the complete repository thereby making the application prone to making undesired changes (e.g. nodes under /libs, /apps etc.). 

Since AEM 6.2, administrative resource resolver has been deprecated by Adobe and to address the above issue Adobe introduced “Service User”.  

Service User: 

A service user is a JCR user with no set password and limited privileges necessary to perform a specific task. No password requirement means that it will not be possible to login with a service user. 

JCR is accessed using service users instead of the administrative resource resolver. 

Below are two plus points about Service User. 

  • A service user per bundle with a limited set of permissions. 
  • Does not have password so no one can login. 
Problems With Service User: 
  • Manual activity on every server. 
  • Assign permission on every server. 
  • Management of these permissions is prone to error. 

Again, there is lot of manual work for developers to set up service user in different environments. 

To overcome this problem, ACS Common provides a different way to bootstrap AEM projects with different functionality, a set of reusable components and AEM development kit.  

Here, we are going to discuss great utilities of ACS common named “Ensure Service User”.  

 

Ensure Authorizable or Ensure Service User: 

Ensure Service User is provided by ACS commons. Here is some points about Ensure Service User. 

  • Create once and use everywhere. 
  • Define service user and their ACL in OSGi configuration. 
  • Less error prone and easy to maintain. 
  • You can manage the group and hierarchies for service user. 
  • Available since version v3.8.0. 

 

How to use: 

Here step by step procedure are described to use “Ensure Service User”. 

  1. Create an OSGi configuration for service user using factory configuration 

com.adobe.acs.commons.users.impl.EnsureServiceUser-meetupUser.xml 

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"   xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"   jcr:primaryType="sling:OsgiConfig"   principalName="meetup-service-user"   type="add"   ensure-immediately="{Boolean}true"   aces="[type=allow;privileges=jcr:read\,rep:write;path=/content]"/> 

Here please note followings points: 

Principal Name: 

Principal name is name of your service user. It can be just principal name or principal name with relative path or principal name with absolute path.  

Remember, service users may only exit under /home/users/system” path. 

For example: 

     1. Your Inputmeetup-service-user  

Service User will be created under path: “/home/users/system/meetup-service-user” 

     2. Your Input: /my-company/meetup-service-user or my-company/meetup-service-user or /my-company/meetup-service-user 

Service User will be created under path: “/home/users/system/my-company/meetup-service-user” 

     3. Your Input: /home/users/system/my-company/meetup-service-user 

Service User will be created under path: “/home/users/system/my-company/meetup-service-user” 

Note: 

  • If a system user exists with the same principal name at a DIFFERENT location, this tool assumes that service user is correct and not attempt to move it to the specified location in this configuration. 
  • If a principal name is specified for an AEM or ACS AEM Commons provided system user, the ensure user process will fail. This list may not always be exhaustive and up to date and meant to help protect against collisions. 
Type:  

ACS AEM Commons provide the facility to add or remove Service User. Here we are creating the service user. 

Option “add”: Ensure the existence of service user. 

Option “remove”: Ensure that service user is removed. 

Ensure-Immediately:  

Two options are available, we can set it either true or false. By default, it is true. 

Option “true”: When set to true, the insurance is performed whenever this bundle is loaded. 

 

Aces:  Array of ACE (access control entry) definitions to ensure for the principal. 

Format: type=allow;privileges=jcr:read,rep:write;path=/content/foo;rep:glob=/jcr:content/* 

  • type: allow OR deny, it is required property. 
  • privileges: comma delimited list of valid JCR privileges, it is required property. 
  • path: absolute content path which the ACE will be applied, it is required property.

  

     1. Service user mapping with OSGi Service. 

Map your service user with Resource resolver service. 

org.apache.sling.serviceusermapping.impl.ServiceUserMapperImpl.amended-meetupUser.xml 

<?xml version="1.0" encoding="UTF-8"?><jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"  jcr:primaryType="sling:OsgiConfig"  user.mapping="[com.argildx.argildx-meetup:ResourceResolverUtil=meetup-service-user]"/> 
     2. Use this service to get resource resolver instance. 
public class ResourceResolverUtil { 

  /** The resource resolver factory. */   

@Reference private transient ResourceResolverFactory resourceResolverFactory; 

  /** Gets the resource resolver. 

   * @return the resource resolver  */ 

public ResourceResolver getResourceResolver() { 

    ResourceResolver resourceResolver = null; 

    try {      final Map<String, Object> authInfo = Collections.singletonMap(ResourceResolverFactory.SUBSERVICE, (Object) "ResourceResolverUtil");       

resourceResolver = resourceResolverFactory.getServiceResourceResolver(authInfo);     

} catch (LoginException le) { 

}     

return resourceResolver;   

}} 

 
Demo: 

A working demo present on bitbucket can be viewed on the following  link: https://bitbucket.org/argildx/aemdev-meetup-s1/overview 

Ensure Service User – An ACS AEM Commons Utility

Bulk Editor Extension for AEM

Bulk editor extension for AEM

Bulk editor is a highly functional tool for efficient editing of multiple node properties in AEM. It lets you add new properties and edit the existing ones. The searching of nodes is also optimized with the use of GQL (Google Query Language). 

At Argil DX, we were using the bulk editor for quick data updates when we came across two obvious and relevant issues:

  • Bulk editor’s inability to add multi-value node properties 
  • Only ‘String’ datatype is allowed 

Seems like Adobe has also stopped any further development for the bulk editor post AEM 6.4

An Extension that Makes the Existing Bulk Editor More Functional

We thought of making some minimal (but important) changes to the existing code base to rectify the above-mentioned issues.

Post-Modification Look 

Image 1: Bulk editor after modification. 

 

Here you can see the changed interface for “Column Properties”. Now you can add “Property Name” along with the data-type (selectable from the dropdown) and continue editing the existing ones (Refer img-2). 


Image 2: A view of the new interface for column properties. 

 

To add multi-value properties, you’ll just have to surround your data (comma separated values ) with ‘[‘ and ‘]’ (Refer “prop1” in img-3). 



Image 3: A screenshot of the multiple value adding process. 

 

The exported .tsv file looks like: 


Image 4: An exported .tsv file. 

If you wish to import a new .tsv file, design it similar to “img-4”. 

NOTE: 

  • For import functionality, append “?hib=false” to the URL (http://<host><port>/etc/importers/bulkeditor.html?hib=false) 
  • CRX might not show the changed datatype, but the changed datatype is reflected whenever used 

This modified version of the bulk editor is a part of the already extensive ADX-Tools.

To download the ADX Tools package submit a request and we will deliver the package to your inbox within 15 working days.

Get free consultation for all your AEM related queries
Related Blogs:

We at Argil DX are dedicated to improving your AEM experience and usability. Get in touch with us to know more about our services and AEM expertise.

To download the ADX Tools package submit a request and we will deliver the package on your email within 15 work days.

Stepping up the CX Game in Retail

The implementation of AI and ML in Retail industry

Well, we can certainly help shoppers choose better. 

How, you ask? The answer is connected experiences powered by Artificial Intelligence (AI) and Machine learning (ML).

Blurring the Online and Offline Retail Experience

For businesses, the true value-add of AI and ML is that it can reduce over-promising and ensure you’re working on what best delivers an improvement to your website, apps, in-store digital devices like touchscreen kiosks and point of sale, and the shopping experience you offer. Smart use of data and ML can improve your operations at every point of delivery, from the moment customers arrive at and search your physical or online stores to prompting them to make purchase decisions and following up with reliable service and information. By augmenting customer journeys through a strategic application of AI and ML, you can achieve a retail singularity – a seamless connection between your online and offline retail presence. This is all about building a connected experience for delightful customer journeys that elevates your brand value.

Try the AI and ML Empowered Tool

F-AI-shion Police, developed at Argil DX, is a tool that will help you strengthen your relationship with potential customers. When customers visit any of your touchpoints looking to buy products (apparel in this case), this tool will provide that much needed opportunity for you to showcase the most relevant products available with you. This is one of the easiest and surest methods in the sales book to retain customers – by showing them the products (exact model or similar ones) that they are looking for.Using AI/Ml for enhancing shopping experiences

Make them come back for more with an engaging user experience

Customer retention is not something many companies are good at no matter how brilliant their product is.  Bring back the “lost sheep” with our connected abode of experiences that uses the power of neural networks. Let the tool recommend what is best for your customers in the most customized manner possible.

“It’s critical for us to give a good experience prior to [a] trip, making sure we give them information on places they’re interested in.”

Marlies Roberts,VP Marketing Operations, Overseas Adventure Travel

When it comes to fashion, your customers must really feel enticed by your products and the shopping journey so much so that they virtually try out what they feel is best for their outfit of the day (“OOTD” as millennials are calling it).

What our tool does is, it just clicks a snap of you. Intelligently detects what you are wearing and even more intelligently shows recommendations based on your clothes. If the recommended product is liked by the user, they will be notified how amazing they’ll look donning it.

Yes. 

Great, but will this work on top of Adobe Experience Cloud? 

Good news! We have developed this tool on the already existing We-Retail project. So, yes, it will work seamlessly with your AEM website. Moreover, the suggestions of related products come from Adobe Target Recommendations. We all know how well the tools of the Marketing Cloud integrate with each other.

User Journey
user journey for F-AI-shion Police
Gif depicting the user journey in F-AI-shion Police.
Final Thoughts

Cutting-edge technology brings retail closer to customers. Retailers are already focusing on digital strategies to create enhanced customer experiences. With the right technology, you can identify new customers, segment them and build campaigns to convert them. Machine learning is now the right technique more than ever.

Watch the video below to get a better understanding of our F-AI-shion police tool:

Generate Live Usage Report of Multiple Components with a Click

Component Usage report tool in AEM

Enriching the features of OOTB Live Component Usage in AEM by providing enhanced features and functionality.

Content authors or editors usually find themselves in scenarios where there is a requirement for live usage report of components on the content pages. With OOTB Live Component Usage, we can get the report of a single component’s live usage. Wouldn’t it be better if we could get multi-site and multi-component live usage report, and export this report for further usage? Also, wouldn’t it be great if you could check the live usage of nested components present in either iparsys or template level in AEM? The New Components Usage Report is an easy-to-use console optimized to fetch results quickly and generate detailed reports.

Purpose:
  • To provide editors or admins the option to select multiple projects to get live report of multiple components.
  • To improve the available features of OOTB Live Usage by adding comment option for each component.

 

Implementation:
  1. The administrator will have to configure the projects for which the authors or editors can generate the live usage report. Go to system console (<host>:<port>/system/console/configMgr) and search for ‘ADX-Utilities Components Usage Project Name Service’. Admins can add any number of projects in the field ‘Project names’ (multi-field) in the format /apps/projectName.component usage report tool in AEM
  2.  The users can select any number of projects from the dropdown available in the tool. And click on ‘Show Components’ to get the list of components present in the project(s) selected.component usage report tool for AEM
  3. It will open a user-friendly component selector in which the editor can choose any number of components for which they want the live usage report. Editors will also have the ability to give comments respective to the components.
    component usage report
  4. The users can enter various content root paths and click on ‘Generate Report’. A key highlight of the tool is that the report will also include results of nested components such as embedded components in templates, components present in iparsys or experience fragments. To include the report of embedded components present in a container, the admin has to enter the details of those components in a configuration ‘ADX-Utilities Embedded Component Report Service’.
  5. For listing embedded components as stated in the above point, the list of embedded components should be added in the field ‘Component names’ (multifield) in the format,
    Embedded Component Resourcetype(projectName/pathToEmbeddedComponent) = Container Component Resourcetype(projectName/pathToContainerComponent).
  6. A detailed report is provided for the components selected giving relevant information about the usage. The results can be sorted or filtered based on any keyword.
  7. Users have an option to export the report as csv.

 

Key features of the tool:
  • Multi-site multi-component live usage report
  • Option for editors or authors to give relevant comments
  • Export to csv option
  • Easy-to-use component selector
  • Detailed result for nested components i.e. embedded components at template level, components present in iparsys or experience fragments, etc.

 

The video demonstration of the tool can be viewed at:

Related Blogs:

We at Argil DX are dedicated to improving your AEM experience and usability. Get in touch with us to know more about our services and AEM expertise.

To download the ADX Tools package submit a request and we will deliver the package on your email within 15 work days.

 

Selective Content Packaging: Simplifying Package Creation in AEM

ADX Package creation tool for AEM

Selective Content Packaging in ADX Tools is a wizard that helps you complete package creation in AEM in a simple manner. Backing up pages before updating them during a package deployment is an advisable practice. You can always use the backup to restore your pages if anything goes wrong (you never know).

But the list of paths for package creation is usually long, and manual package creation with such a list becomes tedious and time-consuming for content authors.

Purpose:

Create an AEM package from paths (filters) present in an Excel file.

Implementation:

Argil DX presents Selective Content Packaging with a user-friendly console to help users create AEM packages in a simpler and quicker manner through the following input fields:

  • Name – name of the package
  • Version – version of the package
  • Group – group of the package
  • Access Control Handling – permissions to handle the nodes
  • Excel file – file containing fields such as Path, Include child node, Include Image Renditions

 

All of the fields have default values except the Excel file.

ADX Selective Content Packaging Tool

A sample Excel file can be downloaded using the ‘Sample’ button present after the description of the file field.

 

The Excel file contains 3 fields:

  1. Path – the absolute path of the node
  2. Include Child Node (Yes/No) – asking for tree activation on the specified path
  3. Include DAM Renditions (if applicable) (Yes/No) – AEM workflows automatically create DAM renditions on every server (unless altered), but users can opt not to include them by entering ‘No’ in this field.

 

Selective Content Packaging in AEM

 

The tool also has a history page with a record of all the packages created using it. We can see the logs of operations as well as download the old package.

Selective Content Packaging in AEM

The history icon is present on the top right corner of the tool.

Advantages of the tool:
  • Easy-to-use console for package creation
  • Packages and their respective logs are accessible from remote locations
  • Create space-saver packages by eliminating renditions of assets
  • Easy searching and sorting in logs
  • History page for package creation

 

The video demonstration of the tool can be viewed below:

Related Blogs:

We at Argil DX are dedicated to improving your AEM experience and usability. Get in touch with us to know more about our services and AEM expertise.

To download the ADX Tools package submit a request and we will deliver the package on your email within 15 work days.

 

Delete Multiple Unwanted Packages in AEM Instances at Once

Package purging in AEM using ADX Tools

How many of us would prefer to work with a faster AEM instance without spending a dime on the infrastructure? All of us would.

So, to take away all your hassles related to bulk package deletion, we present you with the Package Purging Tool. This will let you delete multiple unwanted packages in AEM.

Purpose:

To get a list of packages which are consuming maximum size on an AEM instance and to have the ability to delete multiple packages at once.

Implementation:

At Argil DX, we have made a tool to delete multiple unwanted packages in AEM with a single click of a button. This tool provides a simplified console to monitor and manage AEM Packages, the list of packages will be sorted by size and collected according to their package group.

To delete package(s), just select their respective checkboxes and click on ‘Delete’ button and all the selected packages will be deleted in a moment. Along with delete operation, we can also download any package for backup before deleting it.

Package purging in AEM

Package Purging Tool provides various details of a package viz.

  • Name-Version
  • Group
  • Last Modified Time
  • Last Replicated Time
  • Created By
  • Is Installed
  • Size

A user can further search or sort packages within the list through any of the above-mentioned details.

Package purging in AEM

Packages are listed in two sections – the first section named ‘All’ contains all the packages and the second section contains the packages collected based on their package-group. The number against the name of each set represents the number of packages in it.

For reporting and documenting purposes, package lists can be exported in PDF and Excel formats by clicking on the ‘Excel’ and ‘PDF’ buttons on the top of every list.

Package Purging in AEM

Steps to purge packages :

1. Select Package(s) by clicking on checkbox(es).

Package Purging in AEM      2. Click on the delete button.

Package Purging in AEM       3. On the confirmation screen validate and click on “Delete” button. Sit back and relax, packages will be deleted within a few moments.

Package purging in AEM

Tool Guide

            A tool guide at the top-right helps users understand the tool and use it effectively.

Package Purging in AEM

Package Purging in AEMPackage Purging in AEM

You can find the demonstration video of the same below

Related Blogs:

We at Argil DX are dedicated to improving your AEM experience and usability. Get in touch with us to know more about our services and AEM expertise.

To download the ADX Tools package submit a request and we will deliver the package on your email within 15 work days.

Selective Replication: Bulk Content Replication Made Easier

Selective Replication: Bulk content replication made easier with the use of ADX Tools extension in AEM

Selective Replication tool, which is one of the tools in the ADX Tools package, simplifies bulk activation, deactivation and delete operations for AEM users.

Selective Replication Tool augments AEM Activation Tree with some useful additional features. AEM Activation Tree is a replication console to activate the entire tree in one action. Selective Replication tool adds to the utilities of bulk activation, deactivation and delete operations. The task gets even simpler when there is an option to selectively choose the root paths to replicate, with an added advantage of selecting the replication agents. To further apply the feature of selectivity, users have the option to include or exclude child node or DAM assets.

Purpose:

To perform bulk activation, deactivation or delete operations on a path-task list uploaded via Excel with the ability to select relevant replication agents.

Implementation:
  1. The simplest part of the tool is its input, which is uploading an Excel file containing the path-task list. A sample excel file can be downloaded using the ‘Sample’ button present in the description.

selectivecreplication
ADX Tools in AEM: Selective Replication

Excel file contains the following fields:

  • Path – root path for operation
  • Include Children – option to include child nodes of content or not
  • Include DAM Assets – option to include DAM assets of content or not
  • Action Type – defining the type of action (Activate, Deactivate, Delete)2. The tool gives an option to select multiple replication agents from the available list.

 

  1. We can get detailed replication logs with the option to export it as an Excel file or pdf.

  1. Users also get the option to see the history of the operations performed by clicking on the history icon present on the top right corner of the tool along with the tool guide.

 

Each of the individual logs can be viewed by clicking on the respective Logs icon. This action will retrieve the history of that particular operation.

 

Key Highlights of the tool:
  • Option to selectively choose the root paths for replication
  • The advantage of choosing relevant replication agents
  • Simple path-task list input via Excel
  • Include or exclude child nodes/DAM assets
  • Detailed replication logs of each root path
  • History of replication actions performed via this tool

 

The video demonstration of the tool can be viewed at:

Related Blogs:

We at Argil DX are dedicated to improving your AEM experience and usability. Get in touch with us to know more about our services and AEM expertise.

To download the ADX Tools package submit a request and we will deliver the package on your email within 15 work days.

 

Advent of Add-on Advantages in AEM: ADX Tools

Add-ons and extensions in AEM, AEM features that enhance the authoring experience and usability in AEM

Adobe Experience Manager (AEM) provides a  multitude of OOTB features to comfort the lives of users in various fields. Enriching those features by providing user-friendly consoles for specific tasks would be like an icing on the cake! This is the concept behind ADX Tools – a collection of user-friendly wizards that enhance AEM functionalities.

During release activities, there are many scenarios where admins or editors wish for an easy to use console as experiencing a productive workday feels euphoric for everyone! Sometimes, the administrator also wishes for wizards to ease up their tasks for the maintenance of AEM.

As a popular saying goes,

‘Good things come in small packages’,

ADX Tools is an amalgamation of a myriad of features in AEM developed at Argil DX, that would garnish the OOTB AEM features giving users a friendly console and quick results to save time. It is a package providing various wizards to cater to the requirements of admins or authors to make some of their tasks easier.

Let’s take a sneak peek into the utility of the tools and problems that they resolve!

Packages in AEM can become obsolete after some time and admins will accept that they consume a lot of repository space. Sometimes, it is difficult to debug the problem of growing repository size. Package Purging Tool is a silver lining in the cloud for admin as it provides a console to deal with this issue and helps purge packages in bulk.

AEM Tree Activation can be enhanced by adding some easy-to-use features and providing answers to various queries of replication. Many questions revolve around selecting the replication paths or getting a console for bulk activation, deactivation or delete operations and choosing relevant replication agents. Selective Replication Tool is a one-stop solution for all the replication activities.

There are instances when AEM admins want to manage AEM users conveniently from a single console i.e. be able to disable the users who are no longer required to login into the system or delete the users who have left the organization or enable some users who have just switched the projects. Also, admins might want to look at the percentage of users logged into the system since a specified time. User Status Report will give a detailed list of active, inactive, disabled or system users based on their login time.

It is usually a tough task to create packages by adding a huge list of filters manually and managing the child nodes and DAM renditions. Selective Content Packaging automates this task and simplifies the burden of content authors to create packages from an excel file as input. It also gives detailed packaging logs and history of packages created.

During release procedures, admins require a list of pages that have been modified or reauthored since the last release to be able to package them. Or a list of pages that have been modified but not replicated yet. Content Report is an answer to all such reporting queries to make the lives of content authors simpler in terms of managing the project.

OOTB Live Usage Report shows the live usage of components on pages. Sometimes, due to heavy content on the site, the response is slow. Wouldn’t it be easier for authors to get live usage of multiple components belonging to multiple sites all in one single click? The New Components Usage Report is a console for providing multi-site, multi-component report with many more interesting features.

 

So, ADX AEM Tools is a consolidation of some additional features that enriches the OOTB features in AEM and can provide a real deal of ease for users.

Downloading and installing the ADX Tools is fairly simple. You can watch the step-by-step video of the ADX Tools installation.

Related Blogs:

At Argil DX, we are dedicated to improving your AEM experience and usability. Get in touch with us to know more about our services and AEM expertise.

To download the ADX Tools package, submit a request and we will deliver the package to your inbox within 15 working days.

Sling Dynamic Include (SDI): Dynamically Include Page Components

Sling Dynamics Include in AEM

In CQ or AEM, most of the pages remain static. Hence, caching of the pages is very useful with dispatchers or any other available AEM plugins/connectors. Imagine a scenario where homepage of news agency must show the hot news which is different for different regions, however, because of caching it is displaying the same news in all the regions. Strange! To rescue from these, live scenarios, the application may require certain elements/components of the page to be dynamically included. In AEM, Sling Dynamic Include (SDI) provides this functionality.

 

Let’s elaborate SDI integration with AEM 6.4, Dynamic Include 3.0.0 and Dispatcher 2.4.

 

Please note that Step 1 and Step 2 need to be performed on publish instance.

 

Step 1:

 

Install Sling Dynamic Include Bundle using the following steps:

  1. Download the Dynamic Include bundle.
  2. Open the bundles using http://<host>:<port>/system/console/bundles
  3. Click on install/update button in the right corner of the screen

      4. Check the Start Bundle checkbox and browse the location where the bundle is downloaded and Click on install/update button

Once the installation of the bundle is completed, verify it by searching Dynamic Include. It should be in an active state.

Step 2:

 

After installation of the SDI bundle, the next step is to configure the component to be dynamically included.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="sling:OsgiConfig"
    include-filter.config.enabled="{Boolean}true"
    include-filter.config.path="/content"
    include-filter.config.resource-types="[my-app/components/content/dynamic_included_component]"
    include-filter.config.include-type="SSI"
    include-filter.config.add_comment="{Boolean}false"
    include-filter.config.selector="nocache"
    include-filter.config.ttl=""
    include-filter.config.required_header="Server-Agent=Communique-Dispatcher"
    include-filter.config.ignoreUrlParams="[]"
    include-filter.config.rewrite="{Boolean}true"
/>

Please find below the brief description of each OSGI config used above:

  • enabled – set it to true to enable SDI.
  • path – SDI configuration will be enabled only for this path.
  • resource-types – which components should be replaced with tags
  • include-type – type of include tag (Apache SSI, ESI or Javascript)
  • Apache SSI – Apache Server Side Includes

Apache HTTP Server is set up as a caching proxy in front of the AEM. This means that the include will be done by the http server and not by the sling engine.

  • ESI – Edge Site Includes

Edge Site Includes can be used as an alternative to SSI, it is evaluated by CDN. ESI has to have some proxy that is able to process its tags and often made available as part of CDN.

  • JavaScript – Ajax

Using JSI will replace dynamic components with ajax tags, so they are loaded by the browser. If included component has some JS code, it may not work properly, as it won’t be initialized immediately after a page is loaded.

  • Add comment – adds debug comment: <!– SDI include (path: %s, resourceType: %s) –> to every replaced component.
  • Filter selector – selector added to HTTP request for particular component and is used to get actual content.
  • TTL – time to live in seconds, set for rendered component. This property is supported for dispatcher version 4.1.11+
  • Required header – SDI will be enabled only if the configured header is present in the request. By default it’s Server-Agent=Communique-Dispatcher header, added by the AEM dispatcher. You may enter just the header name only or the name and the value split with =.
  • Ignore URL params – SDI normally skips requests containing any GET parameters. This option allows to set a list of parameters that should be ignored.
  • Include path rewriting — enable rewriting link (according to sling mappings) that is used for dynamic content including.

 

Step 3:

 

After completion of Step 1 and Step 2 on publishing instance, Dispatcher configurations need to be updated as explained below:

1. Include(If already present, make sure uncommented) the mod_include module in Apache Web server’s httpd.conf file:

LoadModule include_module modules/mod_include.so

2. Update virtual host configuration file

a. Find the following lines in the dispatcher.conf file

<IfModule dispatcher_module>
	SetHandler dispatcher-handler
</IfModule>

modify as below

<IfModule dispatcher_module>
	SetHandler dispatcher-handler
</IfModule>
SetOutputFilter INCLUDES

b. Add Includes to Options directive:

<VirtualHost *:80>
...
<Directory />
				...
Options FollowSymLinks Includes  
AllowOverride None
...
		<Directory>
		...
</VirtualHost>

3.  Update the httpd.conf to enable SDI.

a. Add “Includes” to Options directive to enable SSI includes used by Sling Dynamic Include

b. Specify what file types are to be processed by Includes filter.

   <Directory /mnt/var/www/html>	
      ...
      Options Indexes FollowSymLinks Includes  
	... 
      AddOutputFilter INCLUDES .html 
	AddOutputFilterByType INCLUDES text/plain text/html
      ...
   </Directory>

4. Update rules.any or dispatcher.any depending where the cache rules are defined for the publish instance.

/0008 {
    		/glob "*.nocache.html*"
    		/type "deny"
  	}

Make sure the selector ‘nocache’ used here is same as defined in OSGI config (include-filter.config.selector = ‘nocache’) explained in Step 2.

5. Restart the server using any of the below commands:

sudo apachectl restart OR sudo service httpd restart

 

Verification

After setting up the SDI, it’s time to verify the changes. Follow the below steps:

 

  1. Right click and open the page source on the webpage where the component is dynamically included.
  2. In the page source, search for SDI includes tag.
  3. A component configured for SDI will be replaced with SDI tags as shown below:

AEM-DTM-Target Integration. Simplified! – Part1

AEM-DTM-Target-Integration
Introduction:
Let’s start with the introduction of three gems of Adobe Experience Cloud crown:
  1. AEM – Adobe Experience Manager (AEM) is a web content management system with a lot of powerful features to manage, organise and deliver the content with best in class experience. AEM came to Adobe with the acquisition of Day Software in 2010, earlier it was known as Day CQ (Communique). For this article, we are using AEM 6.3 version.
  2. DTM – Dynamic Tag Management(DTM) is a tag management tool which offers tools to integrate Adobe Experience Cloud Solutions as well as solutions like Google Analytics etc.DTM used to be known as ‘Satellite’ before Adobe had acquired it in 2013.
  3. Target – Adobe Target is a personalization solution of Adobe Experience Cloud Suite, which delivers the personalisation of content based on different type rules. Target came to Adobe with the acquisition of Omniture in 2009. In this article, we are going to demonstrate the Target VEC capabilities.
Architecture:
AEM can be integrated with Target directly without using DTM. However, it’s recommended to use the DTM in between due to listed benefits:
  1. Efficiency –DTM allows you to optimise the loading time of multiple tools and marketing tags.
  2. Reduce Cost – Minimise the development cost as once Data Layer is in place multiple solution can leverage the same.
  3. Flexibility – DTM allows you to quickly test and optimise tags without being bound by release cycles.
  4. Multiple Sites – Using DTM you can manage multiple sites from the single console.

AEM is usually connected with DTM using AEM Cloud Services and Target is connected to DTM using Experience Cloud configuration. Here is the relevant diagram:

 

Request Flow:

How a request flows from AEM to Target via DTM:

  1. AEM starts rendering a site page.
  2. Site has a DTM script attached along with Data Layer. DTM script is associated with a relevant property. Data Layer discussed below.
  3. DTM Property has Target added to it, which raises a request to Target and share required data.
  4. Target pushes its response back to AEM instance using mbox js. Note: Now mbox.js has a newer and updated alternative which is known as at.js
  5. AEM page got Target response which gets rendered on the page.     

Data Layer:

As you might have noticed in request flow that AEM site has got the DTM Script and Data Layer associated. Data layer is a W3C standard to store values in javascript object. Data layer is created at AEM and consumed by DTM to get the required data from AEM instance and push to any solution like Analytics, Target etc. We are going to create a sample data layer below in DTM Rules section.

DTM Setup:

To get the access of DTM, one has to raise the request with Adobe Client Care with proper information. Once the access is granted, go to https://dtm.adobe.com and login with the credentials provisioned by Client Care.

To start with DTM, create a new property with the URL of the website. Thereafter add the required tools in the property like Adobe Analytics or Adobe Target. In AEM configuration, we are going to use same DTM Property in order to integrate the AEM with Analytics, Target, etc.

For this article we are going to add Adobe Target, for this we need Client Code which will be provided by the Client Care or alternatively you can try adding using Experience Cloud membership.

 

DTM Property

Adding Tool in DTM Property

Adding Target as a Tool in DTM Property

DTM Rules:

In above steps you have created a new DTM property, added Target as a tool in the same property. Now you need to know how to play with data, DTM uses data layer to get the data from AEM instance. For example, using Target you need to render homepage of website based on browser, location, devices etc or you can also get the user specific details like age, gender, interests etc. Hence you need to get all such information from AEM in data layer. For example, here the data layer:

   var dataLayer = {}
   dataLayer.page = {
        pageInfo: {
            pageName: document.title,
            url: document.location
        }
   }

Once the data-layer is all set, fetch the values from data layer and set it in DTM data elements. We use these data elements in different types of rules. DTM has got three type of rules:
1. Event Based Rule – Rules executed when visitor interacts with on-page elements.
2. Page Load Rule – Rules executed when visitor loads the page.
3. Direct Call Rule – Rules executed when you want to tell DTM to do something specifically.

 

 

DTM Rules

Creating a data element using data layer is quite straight forward. You can see the below screenshot, here we have created a new data element Page Title which is mapped with pageName field of data layer created above 

Data Elements

DTM Workflow:

Every property in DTM follows a standard workflow. Workflow has got three steps:

  1. Creation of property and rules.
  2. Approve the newly added and modified rules.
  3. Publish the property to make the changes live.
AEM-DTM Integration:
There are two ways to integrate DTM with AEM:
  1. Using Cloud Services
  2. Embed JS
  1. Using Cloud Services:

Using AEM admin console, go to Tools > Deployment > Cloud Services. Find ‘Dynamic Tag Management’ and click on ‘Configure now’. Provide a Title and Name of the configuration keeping Parent Configuration field intact. Enter the details as below:

Property Description
API Token The value of the API Token property of your Dynamic Tag Management user account. AEM uses this property to authenticate with Dynamic Tag Management.
Company The company with which your login ID is associated.
Property The name of the Web Property that you created for managing the tags for your AEM site.
Include Production Code on Author Select this option to cause the AEM author and publish instances to use the production version of the Dynamic Tag Management libraries.

When this option is not selected, the Staging Settings apply to the author instance, and the Production Settings apply to the publish instance.

There is an option to self-host the DTM libraries which means AEM will host the DTM libraries if this option is checked, if we want to use the libraries from the cloud then we should uncheck this option. Here we are using later one.

  1. Embed JS:

Go to the DTM Console using https://dtm.adobe.com and click on the relevant property.
Go to Embed tab, copy the Header and Footer staging script, go to the AEM author instance and copy the script in header and footer of the website respectively. Similarly, copy the header and footer production script and put in the AEM publish instance.

Let’s say you have integrated DTM with AEM using one of the above-mentioned method, assign the DTM config to the root of your site using AEM Sites console.

DTM-AEM Connection Test:

Now you need to test whether DTM script is getting loaded with your website. In browser, try to open any page of your website where you have assigned the DTM config and open browser console. If “_satellite” object exists then it means DTM script is getting loaded. You can also try retrieving the data elements that you have created in DTM using “_satellite.dataElements”. If you are able to find all the details, you are good to go.

If _satellite object doesn’t exist, it means page doesn’t have the DTM header/footer script. You can view the source of the page to confirm the same.

 

Satellite Object

 

Satellite Data Elements

 

 

DTM Debugging Tools:

In DTM we play with different types of scenarios and scripts, hence we might need to check if the scripts are working fine and order they are getting executed.
There are couple browser plugins are available which proved to be quite for debugging.

Launch Switch:

It enables the logging in console and as well as we can test the changes using staging script, before making the changes live.

There are two button available on the plugin console. Tweaking them will do the following:
Debug: It enables the logging of the rules, you can also add the logs using _satellite.notify(“info”).
Staging: It will enable the changes you have made in property which you have not published. This is used for testing the changes  before making them live.

Download URL for Chrome: https://chrome.google.com/webstore/detail/launch-and-dtm-switch/nlgdemkdapolikbjimjajpmonpbpmipk

 

Tagtician:

It shows the detailed information about all the DTM Rules. 
Download URL Chromehttps://chrome.google.com/webstore/detail/tagtician-for-adobe-dtm/hiaoiehpkillodoeillmodjcadmfmcbg  

Reference:

Adobe DTM Documentation: https://marketing.adobe.com/resources/help/en_US/dtm/

This is the first part 1 of “AEM-DTM-Target Integration. Simplified!” where you have learned how to setup DTM, create DTM property and data elements, integrate DTM with AEM and debug DTM. In Part 2, you will learn how to create different types of rules in DTM, use these rules to share the information to Target, Target activities, Target audience and how to use Target VEC (Visual Enhanced Composer) along with the Target debugging tweaks.