Loading Custom JS in an AEM Dialog

In any component development, we always work towards having a clean and user-friendly authoring experience for authors. To enhance the interactive authoring experience, we can create custom Javascript to support component custom behavior and manage them by loading in clientlibs when required.

Here are some examples :

• show/hide dialog fields based on the selection
• load any external data as a data source in the dialog.

For instance, there is no show and hide functionality OOTB in AEM that can be used in the dialog. In this blog, I have created a Demo component to understand how to add a custom javascript clientlib to show/hide dialog fields based on the selection in the dialog.

Load Client Library in all Touch-UI dialog.

It’s a simple two-step procedure to define a custom behavior to any touch-ui dialog of the AEM component.

1) Create a client library with custom CSS and Javascript

2) Add a categories property as cq.authoring.dialog to load your custom client library in all the Touch-UI dialog.

• Any client libraries that are tagged with category cq.authoring.dialog will get loaded in all the touch-ui dialogs, even if it is not required in some of the other dialogs. Which is not recommended as best practice in AEM development.
• Another disadvantage, this may lead to performance issues if your javascript is too big.
• We should use the category cq.authoring.dialog only if your custom logic is applicable to all the component dialogs.

Load Client Library in only the required Touch-UI dialog.

There are two ways of loading a client library only for required components’ touch UI-dialog.

• Using extraClientlibs property
• Using Granite Resource in cq:dialog

Using extraClientlibs property

• Create a client library with categories as (demo-cmp-show-hide)

• Load this client library only on the required component dialog by using the extraClientlibs property to the cq:dialog node like below.

• The advantage of using the extraClientlibs property, the custom client library will be loaded only on required component dialogs and not on every component dialog which is recommended as best practice AEM development.

Using Granite Resource in cq:dialog

• Create a client library with categories as (demo-cmp-show-hide)

clientlib .content.xml

• Add a node include-clientlib with sling:resourceType granite/ui/components/coral/foundation/includeclientlibs

_cq_dialog.xml

Use the categories property to load both CSS and JS.

{
  jcr:primaryType: "nt:unstructured",
  sling:resourceType: "granite/ui/components/coral/foundation/includeclientlibs"
  categories: ["demo-cmp-show-hide"]
}

Use js property to load only JS

{
  jcr:primaryType: "nt:unstructured",
  sling:resourceType: "granite/ui/components/coral/foundation/includeclientlibs"
  js: ["demo-cmp-show-hide"]
}

Use CSS property to load only CSS

{
  jcr:primaryType: "nt:unstructured",
  sling:resourceType: "granite/ui/components/coral/foundation/includeclientlibs"
  css: ["demo-cmp-show-hide"]
}

• The advantage of using the granite resource type, we can either load only Javascript or CSS or both from any given client library.

Here is the example to show/hide Title and Heading based on selection. Title or Heading fields will be shown based on the selection type in the dialog. Find the below screenshot reference.

The Title dialog field is shown on the Title Selection Type.

The Heading dialog field is shown on the Heading Selection Type.

Download the demo component for your reference.

https://drive.google.com/file/d/1O-T5G-K6to2YpiEMCQ02zSLk2aiKjIx8/view?usp=sharing