Customize AEM Sidekick and add a useful feature

 

Normally, once you activates a new page in author instance, in order to view it in publish instance you probably copy page its URL, paste it in new tab and change the host-name and port name to see the results. To simplify it here, we will add a custom button in our sidekick and convert it into a useful features.

The button we are going to add here will automatically give you the link to the page in publish instance once you activates it. With one click you can see your current page in publish instance.

The path where AEM sidekick code is present is: /libs/cq/ui/widgets/source/widgets/wcm/Sidekick.js

Follow the below steps :-

  1. Create a folder inside /apps with name customsidekick
  2. Create a node with type cq:ClientLibraryFolder inside /apps/customsidekick
  3. Create a file name customSidekick.js
  4. Create a file name js.txt inside /apps/customsidekick and write customSidekick.js in the this file
  5. Add categories property with value cq.widgets to the clientlibrary created in step 2
  6. Open the customSidekick.js file created in step 3 and paste the below code

 

Once completed, Clear you browser cache and AEM Cache.

Now to see the button, Open any page with sidekick

Sidekick customize
Sidekick customize

How to test:-

  1. Activate the page
  2. Click on “Publish Page” button to see the page in publish instance.

Behind the Scene story:-

When you click on above “Publish Page” button, it makes an ajax call to get the list of replication agents configured in you author for publish. Once the response is received, it forms the page url in with the hostname and port present in response and opens it.

This was tested in AEM 5.6.1 and AEM 6.1 and worked fine, however if you feel any difficult in implementing or  getting expected output or bug please comment below. We will help you.

11 thoughts on “Customize AEM Sidekick and add a useful feature

  1. I noticed the example you provided is specific to CQ/AEM Classic UI. Is this feature (or similar) achievable for Touch UI where the sidekick has been replaced with the toolbar and rail?

     
    1. Hi Lindsay,
      Yes, you can customize the Touch UI in AEM as well. Here are the files related to touch ui stored in aem /libs/cq/touch/widgets. Take a look at those.

       
  2. Hi,
    Nice Idea especially as you do not use overlays, so it is update proof. I like it.

    You could improve it by leveraging the following ootb functions:
    CQ.WCM.isSidekickReady()
    and
    CQ.WCM.on(“sidekickready”, function(sidekick){
    // Handler when Sidekick is ready
    });
    to check if Sidekick is ready, so you don’t need a javascript interval.

    You can look for an example here: https://github.com/insideaem/recorder/blob/master/content/src/main/content/jcr_root/apps/insideaem/recorder/clientlib/js/sidekickHook.js

    Cheers,

     
  3. Hi Praveen,

    I tried implementing something very similar but on refresh of page by sidekick refresh button the newly added buttons get vanished

     
      1. Hi Praveen,

        i copied all your code in exact manner and it started reflecting in sidekick as well, its on AEM 5.6.1 with SP and hot fix in place, I created a folder and files under /app as suggested. But after page load, when I (as an author) try to hit refresh button at the bottom of sidekick , on reload of page/sidekick the new buttons disappear. I think the script written gets loaded only on new page open but we need some way to trap the sidekick refresh event and inject a line to call our code, this ca also be reproduced when we come back from design mode to normal author mode. I tried read some more docs on AEM site but could not get information on sidekick refresh event trapping.

         

Leave a Reply

Your email address will not be published. Required fields are marked *