AEM 6 SP1 - Classic UI Add Help Button to Page Properties Dialog

Goal

Add Help button to Page Properties dialog of Classic UI

Demo | Package Install

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/classic-ui-page-properties-help

2) Create node /apps/classic-ui-page-properties-help/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.widgets

3) Create file (nt:file) /apps/classic-ui-page-properties-help/clientlib/js.txt and add

                       add-help.js

4) Create file (nt:file) /apps/classic-ui-page-properties-help/clientlib/add-help.js and add the following code.

(function(){
    if( ( window.location.pathname !== "/cf" ) && ( window.location.pathname.indexOf("/content") !== 0)){
        return;
    }
 
    var SK_INTERVAL = setInterval(function(){
        var sk = CQ.WCM.getSidekick();
 
        if(!sk){
            return;
        }

        clearInterval(SK_INTERVAL);

        try{
            var dialog = CQ.WCM.getDialog(sk.initialConfig.propsDialog);

            if(!dialog){
                return;
            }

            dialog.addButton(new CQ.Ext.Button({
                "text":"Help",
                "tooltip":{
                    "title":"Help",
                    "text":"Open help page in new tab",
                    "autoHide":true
                },
                handler : function(){
                    CQ.Ext.Msg.alert("Help", "Click ok to open helpx.adobe.com in new tab", function(){
                            var win = window.open("http://helpx.adobe.com", '_blank');
                            win.focus();
                        }
                    );
                }
            }));

            dialog.buttons.unshift(dialog.buttons.pop());

            dialog.doLayout();
        }catch(err){
            console.log("Error executing extension")
        }
    }, 250);
})();