AEM 63 - Touch UI Register Component Action Open Dialog programmatically

Goal


Register a editable component action to open dialog programatically

For similar extension on AEM 6 check this post

Demo | Package Install | Github



Solution


1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-open-component-dialog-register-action

2) Create node /apps/touchui-open-component-dialog-register-action/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog.all

3) Create file (nt:file) /apps/touchui-open-component-dialog-register-action/clientlib/js.txt and add

                       open.js

4) Create file (nt:file) /apps/touchui-open-component-dialog-register-action/clientlib/open.js and add the following code

(function ($document, author) {
    var openDialog = {
        icon: 'coral-Icon--game',
        text: 'Open Dialog',
        handler: function (editable, param, target) {
            author.DialogFrame.openDialog(new author.edit.Dialog(editable));
        },
        condition: function (editable) {
            //show this action only for component type eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog
            return editable.type === "eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog";
        },
        isNonMulti: true
    };

    $document.on('cq-layer-activated', function (ev) {
        if (ev.layer === 'Edit') {
            author.EditorFrame.editableToolbar.registerAction('EAEM_OPEN_DIALOG', openDialog);
        }
    });
})($(document), Granite.author);


3 comments:


  1. Its a wonderful post and very helpful, thanks for all this information. You are including better information regarding this topic in an effective way.Thank you so much

    Personal Installment Loans
    Title Car loan
    Cash Advance Loan

    ReplyDelete
    Replies
    1. I am glad that I saw this post. It is informative blog for us and we need this type of blog thanks for share this blog, Keep posting such instructional blogs and I am looking forward for your future posts. Python Projects for Students Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account. Project Center in Chennai

      Delete
  2. Really helpful. Thank you so much!

    ReplyDelete