AEM 6410 - Touch UI Auto Select Template in Create Page Wizard

Goal

In the Touch UI Create Page Wizard if there is only one template available, auto select it and move to next step. Additionally the extension shows selected template title in second step

Video shows /content/we-retail/jcr:content@cq:allowedTemplates set to single template /conf/we-retail/settings/wcm/templates/hero-page for demonstration

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-create-page-auto-select-template

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-create-page-auto-select-template/clientlib and set property categories of String[] type to cq.sites.validations and dependencies String[] to lodash

3) Create file ( type nt:file ) /apps/eaem-touchui-create-page-auto-select-template/clientlib/js.txt, add the following

  select-template.js

4) Create file (type nt:file) /apps/eaem-touchui-create-page-auto-select-template/clientlib/select-template.js, add the following code

(function ($, $document) {
    var CREATE_PAGE_WIZARD_URL = "/mnt/overlay/wcm/core/content/sites/createpagewizard.html",
        DEFAULT_HEADER = "Create Page",
        WIZARD_HEADER = '.foundation-layout-wizard2-title';

    if(!isCreatePageWizard()){
        return;
    }

    $document.on("foundation-contentloaded", autoSelectTemplate);

    function autoSelectTemplate(){
        var stepNumber = getWizardStepNumber();

        if(stepNumber == 1){
            selectTheOneTemplate();
        }else if(stepNumber == 2){
            setSelectedTemplateInTitle();
        }
    }

    function selectTheOneTemplate(){
        var $cards = $("coral-masonry-item");

        if($cards.length != 1){
            return;
        }

        selectTemplate($cards[0]);

        var wizardApi = $(".foundation-wizard").adaptTo("foundation-wizard");

        wizardApi.next();
    }

    function setSelectedTemplateInTitle(){
        var $selected = $("coral-masonry-item.is-selected"),
            title = DEFAULT_HEADER + " of type '" + $selected.find("coral-card-title").html() + "'";

        $(".foundation-wizard").find(WIZARD_HEADER).html(title);
    }

    function getWizardStepNumber(){
        var $wizard = $(".foundation-wizard"),
            currentStep = $wizard.find(".foundation-wizard-step-active"),
            wizardApi = $wizard.adaptTo("foundation-wizard");

        return wizardApi.getPrevSteps(currentStep).length + 1;
    }

    function selectTemplate(template){
        var $collection = $("coral-masonry");

        var selectApi = $collection.adaptTo("foundation-selections");

        selectApi.select(template)
    }

    function isCreatePageWizard() {
        return (window.location.pathname.indexOf(CREATE_PAGE_WIZARD_URL) >= 0);
    }
}(jQuery, jQuery(document)));