AEM 62 - Touch UI Create Page Wizard Select Target Path

Goal

Extend Touch UI Create Page Wizard to select target path

Demo | Package Install | GitHub

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touch-ui-create-page-select-loc

2) Create node /apps/eaem-touch-ui-create-page-select-loc/clientlib of type cq:ClientLibraryFolder, add String property categories with value granite.ui.coral.foundation, String property dependencies with value lodash

3) For the path browser html, create sling:Folder /apps/eaem-touch-ui-create-page-select-loc/content and  nt:unstructured /apps/eaem-touch-ui-create-page-select-loc/content/path with the following 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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
    fieldLabel="Path"
    name="eaemPath"
    rootPath="/content"/>

4) Create file (nt:file) /apps/eaem-touch-ui-create-page-select-loc/clientlib/js.txt, add

                       select-loc.js

5) Create file (nt:file) /apps/eaem-touch-ui-create-page-select-loc/clientlib/select-loc.js, add the following code

(function ($, $document) {
    var CREATE_PAGE_WIZARD_URL = "/mnt/overlay/wcm/core/content/sites/createpagewizard.html",
        PATH_BROWSER = "/apps/eaem-touch-ui-create-page-select-loc/content/path.html",
        PATH_BROWSE_NAME = "[name='eaemPath']",
        FORM_CREATE_PAGE = "form.cq-siteadmin-admin-createpage",
        FOUNDATION_CONTENTLOADED = "foundation-contentloaded",
        PARENT_PATH = "parentPath",
        TAGS_FIELD = "[data-fieldname='./cq:tags']";

    if(window.location.pathname.indexOf(CREATE_PAGE_WIZARD_URL) !== 0){
        return;
    }

    $document.on(FOUNDATION_CONTENTLOADED, addPathBrowser);

    function addPathBrowser(){
        if(!_.isEmpty($(PATH_BROWSE_NAME))){
            return;
        }

        $.ajax(PATH_BROWSER).done(handler);

        function handler(html){
            var $tagsField = $(TAGS_FIELD).closest(".foundation-field-editable");

            if(_.isEmpty($tagsField)){
                return;
            }

            var $pathBrowser = $(html).insertAfter($tagsField),
                currentPath = $("[name='" + PARENT_PATH + "']").val();

            $pathBrowser.find('input').val(currentPath);

            $document.trigger(FOUNDATION_CONTENTLOADED);

            $(FORM_CREATE_PAGE).submit(function() {
                $("[name='" + PARENT_PATH + "']").val($pathBrowser.find('input').val());
            });
        }
    }
}(jQuery, jQuery(document)));