Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

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

Avatar

Level 5

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.

Capture2.PNGCapture3.PNG

10 Replies

Avatar

Community Advisor

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.

Avatar

Level 5

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

 

Avatar

Level 5

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

Avatar

Community Advisor

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

Avatar

Level 5

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

 

Avatar

Community Advisor

@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.

Avatar

Level 5

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

Avatar

Community Advisor

@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?

Avatar

Level 5

@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.