Touch UI extraClientlibs not working and any appropriate alternative for loading js to particular dialog

[manank71376227]

Hi,

As per AEM 6-1 Touch UI component says:

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Creating a client library for style and behavior

If you want to define styling and behavior for your component, you can create a dedicated client library that defines your custom CSS/LESS and JS.

To have your client library loaded solely for your component dialog (i.e. it will not be loaded for another component) you need to set the property extraClientLibs of your dialog to the category name of the client library you have just created. This is advisable if your client library is quite big and/or your field is specific to that dialog and will not be needed in other dialogs.

To have your client library loaded for all dialogs, set the category property of your client library tocq.authoring.dialog. This is the category name of the client library that is included by default when rendering all dialogs. You want to do that if you client library is small and/or your field is generic and could be reused in other dialogs.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now, property extraClientLibs is not correct. it works with small case for letter L

extraClientLibs --> extraClientlibs

and extraClientlibs functionality is also not working. I have a component and  in cq:dialog, i have added extraClientlibs property with value of clientlibs category. but it is working for all the dialogs. I want to execute below code on one dialog but it is executing on all dialogs of page.

(function ($, $document) { "use strict"; $document.on("dialog-ready", function() { alert("IN Home Dialog"); }); })($, $(document));

Please suggest if i am doing this wrong or i am missing something or any appropriate alternative loading js according to particular dialog.

[smacdonald2008 · Accepted solution]

This concept is explained in this GEMs PDF.

Also watch the GEMs session on this subject here:

http://dev.day.com/content/ddc/en/gems/customizing-dialog-fields-in-touch-ui.html

Hope this helps.

[sompalli]

I am facing the same issue, extraClientlibs JS is loading for all the dialogs in that page, In the below link I couldn't able to figure it out. Please let me know how should we control?

(Adobe Experience Manager Help | Customizing Dialog Fields in Touch UI )

[VitthalaShiva]

Can you try includeClientLibs resource Type