AEM 6 SP2 - Touch UI Dialog Before Submit Confirmation

Goal

Show Confirmation when user submits a component dialog. Here we ask user to check the Title (./jcr:title) before submit

Demo | Package Install

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touch-ui-sample-form-before-submit

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touch-ui-sample-form-before-submit/clientlib and set a property categories of String type to cq.authoring.dialog

3) Create file ( type nt:file ) /apps/touch-ui-sample-form-before-submit/clientlib/js.txt, add the following

                         dialog-before-submit.js

6) Create file ( type nt:file ) /apps/touch-ui-sample-form-before-submit/clientlib/dialog-before-submit.js, add the following code

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

    $(document).on("click", ".cq-dialog-submit", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var $form = $(this).closest("form.foundation-form"),
            title = $form.find("[name='./jcr:title']").val(),
            message, clazz = "coral-Button ";

        if(!title){
            message = "Title is empty. Are you sure?";
            clazz = clazz + "coral-Button--warning";
        }else{
            message = "Title is '" + title + "'. Submit?";
            clazz = clazz + "coral-Button--primary";
        }

        ns.ui.helpers.prompt({
            title: Granite.I18n.get("Confirm"),
            message: message,
            actions: [{
                    id: "CANCEL",
                    text: "CANCEL",
                    className: "coral-Button"
                },{
                    id: "SUBMIT",
                    text: "SUBMIT",
                    className: clazz
                }
            ],
            callback: function (actionId) {
                if (actionId === "SUBMIT") {
                    $form.submit();
                }
            }
        });
    });
})(document, Granite.$, Granite.author);