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

A similar listener on site admin page properties save is here

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

4) 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);

7 comments:

  1. nice post, but is there any possibilty of tracking key up and key down event for cq dialog

    ReplyDelete
  2. Hi,

    Is there a way to delete a property before the submit? If yes please post the sample code.

    Thanks,
    Srini.

    ReplyDelete
  3. It's clear for me that information about research project methodology from https://dissertationowl.com/blog/research-project-methodology will be useful for students. You can get a high grade after reading it for sure

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This dialogue box will be helpful for users, and we should use this in our website so that users can get confirmation message. Cheap dissertation writing service.

    ReplyDelete
  6. Hi!, I'm trying to do something like this, but I want to show the prompt after the dialog fields are valid. When any field is invalid I would like to have the regular validation behavior and show new prompt only if all fields are valid.

    Any idea?

    ReplyDelete
  7. This is really interesting, You’re a very skilled blogger. Thanks for sharing your thoughts.Dissertation Writing Service

    ReplyDelete