AEM 64 - Touch UI Show selected Content Fragment Model (Template) name in New Wizard

Goal

Show the selected content fragment model (template) name in the second step of create new content fragment wizard instead of default New Content Fragment

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-show-cf-template-name-in-wizard

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-show-cf-template-name-in-wizard/clientlib and set property categories of String type to dam.cfm.adminpage.wizard and dependencies String[] to lodash

3) Create file ( type nt:file ) /apps/eaem-touchui-show-cf-template-name-in-wizard/clientlib/js.txt, add the following

  show-template-name.js

4) Create file (type nt:file) /apps/eaem-touchui-show-cf-template-name-in-wizard/clientlib/show-template-name.js, add the following code

(function ($, $document) {
    var NEW_CF_URL = "/mnt/overlay/dam/cfm/admin/content/v2/createfragment.html",
        WIZARD_HEADER = '.foundation-layout-wizard2-title',
        DEFAULT_HEADER = "New Content Fragment",
        FOUNDATION_WIZARD_STEP_CHANGE = "foundation-wizard-stepchange";

    if(!isNewCFPage()){
        return;
    }

    $document.on(FOUNDATION_WIZARD_STEP_CHANGE, changeWizardTitle);

    function changeWizardTitle(event, prev, current){
        var stepNumber = getWizardStepNumber();

        if(stepNumber == 1){
            $(".foundation-wizard").find(WIZARD_HEADER).html(DEFAULT_HEADER);
            return;
        }

        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 isNewCFPage() {
        return (window.location.pathname.indexOf(NEW_CF_URL) === 0);
    }

}(jQuery, jQuery(document)));