Article summary

Summary

Discusses how to customize the AEM sidekick.

A special thank you to Praveen Dubey a member of the AEM community for contributing AEM code that is used in this article.

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, JavaScript, HTML
Tested On Adobe Experience Manager 5.x

Introduction

You can customize the AEM sidekick to add functionality tio meet your business requirements. For example, typically, once you activate an AEM page in author, in order to view it in publish, you typically copy its URL, paste it in new tab and change the host-name and port name to see the results. To simplify this use case, you can add a custom button to the AEM sidekick that performs these actions with 1 click.

The new sidekick button automatically give you the link to the page in publish instance once you activate it. That is, with a single click, you can see your current page in publish instance.

sidekick


To modify the AEM sidekick, perform these tasks.

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.

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.

CQ.Ext.ns("PublishButtonSidekick");

        PublishButtonSidekick.Publish = {
            publishPageFn: function(sk){
                var pagePanel = sk.panels["PAGE"];

                var button = pagePanel.findBy(function(comp){
                    return comp["name"] == "PUBLISH_PAGE";
                }, pagePanel);

                if(button && button.length > 0){
                    return;
                }
                button = {
                    xtype: "button",
                    scope: sk,
                    name: "PUBLISH_PAGE",
                    text: "Publish Page",
                    "context": [
                        CQ.wcm.Sidekick.PAGE
                    ],
                    handler: function(){
                        var x,y,a,z,b,pp,url;

                        CQ.HTTP.get("/etc/replication/agents.author.2.json",
                                            function(options, success, response) {
                                                if (!success) {
                                                    CQ.Ext.Msg.alert(
                                                        CQ.I18n.getMessage("Error"),
                                                        CQ.I18n.getMessage("Something went wrong"));
                                                } else {
                                                   pp=CQ.WCM.getPagePath();

                                                   x =  response.responseText;
                                                    console.log(response);
                                                    y = JSON.parse(x);              
                                                    a= y["publish"]["jcr:content"]["transportUri"];              
                                                    x = a.indexOf('/bin');
                                                    y = a.substring(0,x);
                                                    c= y.lastIndexOf('/');
                                                    z = y.substring(c+1);               
                                                    b = z.split(":");
                                                    if(b[0]=="localhost")
                                                        h= window.location.hostname;
                                                    else h=b[0];
                                                    p = window.location.port;                 
                                                    url="http://"+h+":"+b[1]+pp+".html";
                                                    console.log(url);
                                                    CQ.shared.Util.open(url);
                                                }
                                            }
                                        );

                    }
                };

                pagePanel.insert(6,button);
                sk.actns.push(button);
            }
        };

        (function(){
            var c = PublishButtonSidekick.Publish;

            if( ( window.location.pathname == "/cf" ) || ( window.location.pathname.indexOf("/content") == 0)){
                var SK_INTERVAL = setInterval(function(){
                    var sk = CQ.WCM.getSidekick();
                    if(sk){
                        clearInterval(SK_INTERVAL);
                        c.publishPageFn(sk);
                    }
                }, 250);
            }
        })();

Once completed, clear you browser cache and AEM Cache. Now to see the button, open this AEM page:

http://localhost:4502/cf#/content/geometrixx-outdoors/en/men.html

Make a change in the page. Activate the page by clicking on the Publish Page button. When you click the Publish Page button, it makes an ajax call to get the list of replication agents configured in author. Once the response is received, it forms the page url with the hostname and port located in the response and opens the page in publish.

 

See also

Congratulations, you have just modified the AEM sidekick . Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy