AEM CQ 56 - Create and View Button on Create New Page Dialog

Goal

CQ Create New Page Dialog allows authors to create pages by selecting a folder in the left tree of Websites console. Creating and Viewing new page is a two step process

1) Create page by clicking on the Create button in dialog

2) Double click on the new page created to view the page for furthur editing

In this customization we give the option of selecting folder in the dialog itself and user can create and view page in one step. Demo Video is available for download

Prerequisites

If you are new to CQ

1) Read this post on how to create a sample page component

2) Read this post on how to setup your IDE and create an OSGI component

Solution - 1

1) Login to CRXDE Lite, create folder (nt:folder) /apps/createandview

2) Create clientlib (type cq:ClientLibraryFolder) /apps/createandview/clientlib and set a property categories of String type to cq.widgets

3) Create file ( type nt:file ) /apps/createandview/clientlib/js.txt, add the following

                         createandview.js

4) Create file ( type nt:file ) /apps/createandview/clientlib/createandview.js, add the following code

(function(){
    var cqCreatePageDialog = CQ.wcm.Page.getCreatePageDialog;
 
    CQ.wcm.Page.getCreatePageDialog = function(parentPath){
        var dialog = cqCreatePageDialog(parentPath);
 
        var panel = dialog.findBy(function(comp){
            return comp["jcr:primaryType"] == "cq:Panel";
        }, dialog);
 
        if(panel && panel.length > 0){
            var pathField = {
                "xtype": "pathfield",
                fieldLabel: "Select Path",
                style: "margin-bottom: 5px;",
                "width": "100%",
                rootPath: "/content",
                listeners: {
                    dialogclose: {
                        fn: function(){
                            var parentPath = dialog.formPanel.findBy(function(comp){
                                return comp["name"] == "parentPath";
                            }, dialog);
 
                            parentPath[0].setValue(this.getValue());
 
                            var dView = dialog.findBy(function(comp){
                                return comp["itemSelector"] == "div.template-item";
                            }, dialog);
 
                            dView[0].store.baseParams.path = this.getValue();
                            dView[0].store.reload();
                        }
                    }
                }
            };
 
            panel[0].insert(2,pathField);
            panel[0].doLayout();
        }
 
        dialog.buttons.splice(0,0,new CQ.Ext.Button( {
                text: "Create & View",
                width: 120,
                tooltip: 'Create page and preview',
                handler: function(button){
                    dialog.ok(button, function(form, resp){
                        try{
                            var text = resp.response.responseText;
                            var loc = text.substring(text.indexOf("\"", text.indexOf("href=")) + 1);
 
                            loc = "/cf#" + loc.substr(0, loc.indexOf("\"")) + ".html";
                            window.location = loc;
                        }catch(err){
                            console.log("page create and view - error parsing html response");
                        }
                    });
                }}
        ));
 
        return dialog;
    }
})();

Solution - 2

Not preferred as it doesn't minify /libs/cq/ui/widgets/source/widgets/wcm/Page.Actions.js

Use the overlay architecture of CQ and extend ootb Page Actions. To achieve the overlay of /libs/cq/ui/widgets/source/widgets/wcm/Page.Actions.js, create file /apps/cq/ui/widgets/source/widgets/wcm/Page.Actions.js. In the apps Page.Actions.js, when a user clicks on New Page execute product's getCreatePageDialog function and to the dialog created, add a Select Path pathfield and Create & View button.

$.getScript("/libs/cq/ui/widgets/source/widgets/wcm/Page.Actions.js", function(){
    var cqCreatePageDialog = CQ.wcm.Page.getCreatePageDialog;

    CQ.wcm.Page.getCreatePageDialog = function(parentPath){
        var dialog = cqCreatePageDialog(parentPath);

        var panel = dialog.findBy(function(comp){
            return comp["jcr:primaryType"] == "cq:Panel";
        }, dialog);

        if(panel && panel.length > 0){
            var pathField = {
                "xtype": "pathfield",
                fieldLabel: "Select Path",
                style: "margin-bottom: 5px;",
                "width": "100%",
                rootPath: "/content",
                listeners: {
                    dialogclose: {
                        fn: function(){
                            var parentPath = dialog.formPanel.findBy(function(comp){
                                return comp["name"] == "parentPath";
                            }, dialog);

                            parentPath[0].setValue(this.getValue());

                            var dView = dialog.findBy(function(comp){
                                return comp["itemSelector"] == "div.template-item";
                            }, dialog);

                            dView[0].store.baseParams.path = this.getValue();
                            dView[0].store.reload();
                        }
                    }
                }
            };

            panel[0].insert(2,pathField);
            panel[0].doLayout();
        }

        dialog.buttons.splice(0,0,new CQ.Ext.Button( {
                text: "Create & View",
                width: 120,
                tooltip: 'Create page and preview',
                handler: function(button){
                    dialog.ok(button, function(form, resp){
                        try{
                            var text = resp.response.responseText;
                            var loc = text.substring(text.indexOf("\"", text.indexOf("href=")) + 1);

                            loc = "/cf#" + loc.substr(0, loc.indexOf("\"")) + ".html";
                            window.location = loc;
                        }catch(err){
                            console.log("page create and view - error parsing html response");
                        }
                    });
                }}
        ));

        return dialog;
    }
});