how to add a js file to a particular component dialog box

[rahul234dabas]

hi, I want to know how can I add js file to a particular component dialog box and that file should not be included into other component dialog boxes.

please look at the screen shots of how I am currently doing it. but seems like there are bugs in it because after I open the dialog box for the desired component the js gets loaded but after doing it if I open dialog box for another component (which should not load that js) it also gets loaded. 

I am using categories "cq.include" to include js file for particular component.

[Anmol_Bhardwaj]

Hi @rahul234dabas 

You can just add a property "extraClientlibs" in the jcr:proprties for the dialog and the value would be the category for the custom clientlib which you created. This way it will only load for the dialog/s in which you have added the extraClientlibs property.

[rahul234dabas]

can you show me where to put the the extraClientlibs and with what property to fill it

[Anmol_Bhardwaj]

in the jcr:properties of your dialog.

You can refer to this link, if it helps : https://adapttoaem.blogspot.com/2021/02/aem-create-custom-touch-dialog-ui-edit.html 

[rahul234dabas]

still getting the same problem, on other component dialog box the js script is loading again

[Anmol_Bhardwaj]

Did you remove the cq:include property which was there. Also, please check the category which you have added for your clientlibs.

It should not be cq.authoring.dialog.

That is the default category and will get included for all dialogs

[rahul234dabas]

yes I proceeded with the approach given by you but still haven't succeded .

Please connect with me on google meet or somewhere else so that I can resolve this issue .

It would be a great help for me .

Thank you

email-rahul234dabas@gmail.com

[Shashi_Mulugu]

@rahul234dabas  Revert all your changes for this, as suggested by @Anmol_Bhardwaj just do below steps:

• Create a new clientlib with custom category ex: "clientname.componentname.customization.dialog", place your js files in it and configure js.txt
• Goto your Component Cq:dialog node and add above clientlib as "extraClientlibs".

Let us know if you still face issues.

[rahul234dabas]

yes @Shashi_Mulugu  I am still facing the same issue . if the component A 's dialog box is opened first then rest of the components also use the js file(which they shouldn't), but if instead of component A any other component's dialog box is being opened then the js file is not included. and it works fine but only after opening component A's dialog box the other components start using the js file

[Shashi_Mulugu]

@rahul234dabasyes the reported behavior is expected and it is browser behavior as when you open component A, js is pulled to browser, so all subsequently actions will have the js functionality.

May I know what are you doing with custom clientlib? So I can guide if we can restrict it's execution only to component A?

[rahul234dabas]

@Shashi_Mulugu I am populating dynamic dropdown via js file in component A dialog box

is there any check which can I put if starting of my js file to verify it's component A only ...something like that.