AEM 6 SP2 - Touch UI Sample Dialog Ready (Open) Event Listener

Goal


A simple dialog-ready event listener fired when a Touch UI dialog is opened (listener top aligns field labels)

Package Install


Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/touch-ui-sample-dialog-ready

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

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

                         labels.js

4) Create file ( type nt:file ) /apps/touch-ui-sample-dialog-ready/clientlib/labels.js, add the following code

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

    $document.on("dialog-ready", function() {
        $(".coral-Form-fieldlabel").css("float", "none");
    });
})($, $(document));

4 comments:

  1. Wondering if a component level clientlib can be written that have access to the page properties the component it is on.

    ReplyDelete
  2. Wondering if that will affect all dialogs.

    ReplyDelete
    Replies
    1. Yes, that is happening to me, I haven't find a way to fix it.

      Delete
    2. const componentName = 'myComponentName';

      $document.on('dialog-ready', function() {
      Granite.author.DialogFrame.currentDialog;
      if (componentName !== currentDialog.editable.name) return;
      // place the code that needs to be executed only for this dialog here
      });

      Delete