Load JS for a particular page | Community
Skip to main content
AEMLearner-1989
Level 4
June 22, 2017
Solved

Load JS for a particular page

  • June 22, 2017
  • 9 replies
  • 5595 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kautuk_sahni

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

9 replies

kautuk_sahni
Community Manager
Community Manager
June 22, 2017

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

Kautuk Sahni
AEMLearner-1989
Level 4
June 22, 2017

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

kautuk_sahni
Community Manager
kautuk_sahniCommunity ManagerAccepted solution
Community Manager
June 22, 2017

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

Kautuk Sahni
AEMLearner-1989
Level 4
June 22, 2017

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
Level 10
June 22, 2017

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

AEMLearner-1989
Level 4
June 22, 2017

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
Community Advisor
Community Advisor
June 22, 2017

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
Level 4
June 22, 2017

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
Community Advisor
Community Advisor
June 22, 2017

oh I missed that. But as mentioned earlier by scott and kautuk smacdonald2008kautuksahni​ , 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