AEM 6 SP2 - Touch UI Extend Site Admin Page Properties Show Submit Confirmation

Goal

Extend Site Admin console Page Properties, add submit event listener to show confirmation for page title property ( sample save button listener )

Demo | Package Install

A similar listener on dialog (cq:dialog) save is here

http://localhost:4502/libs/wcm/core/content/sites/properties.html?item=/content/geometrixx/en/products

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touch-ui-extend-site-page-properties

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touch-ui-extend-site-page-properties/clientlib and set a property categories of String type to cq.siteadmin.admin.properties

3) Create file ( type nt:file ) /apps/touch-ui-extend-site-page-properties/clientlib/js.txt, add the following

                         missing-page-title.js

4) Create file ( type nt:file ) /apps/touch-ui-extend-site-page-properties/clientlib/missing-page-title.js, add the following code

(function($document, $) {
    "use strict";

    //form id defined in /libs/wcm/core/content/sites/properties/jcr:content/body/content/content
    var PROPERTIES_FORM = "propertiesform";

    $document.on("foundation-contentloaded", function(){
        $(".foundation-content-current").on('click', "button[type='submit'][form='" + PROPERTIES_FORM + "']", function(e){
            var $propertiesForm = $("#" + PROPERTIES_FORM);

            if($propertiesForm.length == 0){
                return;
            }

            e.preventDefault();
            e.stopPropagation();

            var title = $propertiesForm.find("[name='./pageTitle']").val(),
                message, warning = false;

            var fui = $(window).adaptTo("foundation-ui");

            if(!title){
                message = "Page title is empty. Are you sure?";
                warning = true;
            }else{
                message = "Page title is '" + title + "'. Submit?";
            }

            fui.prompt("Confirm", message, "notice",
                [{
                    id: "CANCEL",
                    text: "CANCEL",
                    className: "coral-Button"
                },{
                    id: "SUBMIT",
                    text: "SUBMIT",
                    warning: warning,
                    primary: !warning
                }
                ],function (actionId) {
                    if (actionId === "SUBMIT") {
                        $propertiesForm.submit();
                    }
                }
            );
        });
    });
})($(document), Granite.$);