Load JS for a particular page

[AEMLearner-1989]

Hi Guys,

How to load JS to specific page.

I am using forms component on my page. Wanna load js for particular page not to all pages.

[kautuk_sahni]

Hi,

There is concept of Template or Component in AEM. A page is created using a template and then a template can have specific components. So you can apply JS on template or on component level.

If you want to achieve this on specific page level, then do it on component level and include this component only to the pages where you require it to be present.

Reference post :- How to include CSS and JavaScript only on pages where a given component is used?

~kauutk

[AEMLearner-1989]

I am using ootb form component to achieve my requirement... I wanna load JS for particular form component ?  is it possible

[kautuk_sahni · Accepted solution]

Yes.

See this bolg post :- AEM Client Libraries explained by example

It covers "components with their own JavaScript and CSS files".

// create a clientlibs folder within the component folder and add the js, css required for that component. and then include this clientlib in your component.

~kautuk

[AEMLearner-1989]

Hi,

I am using ootb form component...I dnt have any html or jsp file here to include my clientlib categories.

Example : www.example.com/contactus.html

I wanna load JS in particular form and dont wanna load in any other pages.

[smacdonald2008]

YOu need to overlay that form component and include the clientlib that contains the JS to load.

[AEMLearner-1989]

Hi ,

Yeah , we can do it by overlay form component.

Suppose I am using same form component to load some other JS file (same above use case but in different page) ..In this case what we need to do?

[VeenaVikraman]

One alternate way i could think is add a drop down or path field in the dialog and ask your authors to choose the Style sheet. The style sheet can be added to DAM. ( If later this style needs a change you can easily upload another style sheet with same name ) .

In your code include this style sheet path selected by the authors. This is just an alternate work around.

I think there would be far better solutions available with our community members if you be more specific as when and why this needs to be done

Thanks

Veena

[AEMLearner-1989]

Hi Veena,

I have already explained the use case.

I am using ootb form component and load a js file for specific page.

Should I use form identifier and load a javaacript for a specific page ?? It will work??

[VeenaVikraman]

oh I missed that. But as mentioned earlier by scott and kautuk smacdonald2008​ kautuksahni​ , you should overlay and do the modifications accordingly. OOTB form don't have any such option (as far as i know )

- I am not sure about this as its been years I have used the OOTB form . After 5.5 , i neva got a chnace to work with them and I am sorry I may not be the right person to comment on this

Thanks

Veena