Expand my Community achievements bar.

SOLVED

Load JS for a particular page

Avatar

Level 5

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.

1 Accepted Solution

Avatar

Correct answer by
Administrator

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

View solution in original post

9 Replies

Avatar

Administrator

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

Avatar

Level 5

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

Avatar

Correct answer by
Administrator

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

Avatar

Level 5

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.

Avatar

Level 10

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

Avatar

Level 5

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?

Avatar

Community Advisor

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

Avatar

Level 5

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

Avatar

Community Advisor

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