Adobe Experience Manager Sites & More

AEMing · 11/17/15

I have a component that includes quite a bit of CSS and JavaScript only used for this specific component. Therefore I only want to include the CSS and JavaScript on pages where the component is used. How can I accomplish this?

I had hoped that this was somehow possible with the clientlib functionality, but I've been unable to find an example of this. It appears to be all or nothing when adding a clientlib folder within the component?

I could include the CSS and JavaScript in the .html used for specifying the layout of the component, but I'd really like for the CSS to be included in the header and the JavaScript at the bottom of the page. Doing it this way would include the CSS and JavaScript in the middle of the page where the component is used.

kautuk_sahni · 11/17/15

Hi
Please have a look at the community article, this could help you
Link:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html
//Example (<cq:includeClientLib categories="jquerysamples" /> would help you)
Add the JQuery Carousel API to a CQ:ClientLibraryFolder node
You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.
In addition to the JQuery framework file, add the JQuery Carousel API library. This library enables you to create a CQ widget that retrieves images from the CQ DAM and displays the images within a carousel.
You can download the Carousel API library from the following URL:
http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/
You need to retrieve the following JS file from the downloaded file: jquery.infinitecarousel.js. To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.
To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.

Name
Type
Value
dependencies
String[]
cq.jquery
categories
String[]
jquerysamples
The dependencies property informs CQ to include the CSS files and JQuery libraries in the page. The categories property informs CQ which clientlibs must be included.
After you create the Clientlibs folder, add the stlye.css file, the JQuery library files, and two map text files.
Text files
You have to add a text file to the clientlibs folder that maps to the JS files. The name of the text file is: js.txt. The js.txt file contains the JS file names: jquery-1.6.3.min.js and jquery.infinitecarousel.js.
Add the files to the ClientLibs folder
Right-click /apps/carousel/components then select New, Node.
Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.
Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node.
On your file system, navigate to the folder where the JQuery JS files are located. Drag and drop the JS files to the clientlibs node by using CRXDE.
On your file system, navigate where you placed the CSS files. Drag and drop the CSS files to the clientlibs folder by using CRXDE.
Add a TXT file to the clientlibs folder named js.txt. Add the content specified in this section.
To the top
Modify the templateCarousel component to use the JQuery Carousel API
Modify the templateCarousel to use the JQuery Carousel API and reference the digital assets that you uploaded to the CQ DAM. To reference a digital asset located in the CQ DAM from your JSP, use the following URL:
/content/dam/travel/1.jpg
This URL references an image named 1.jpg that is used to populate the background of the CQ page. To reference the thumbnail image, use the following URL:
/content/dam/travel/thumbs/1.jpg
The following code represents the templateCarousel.jsp file that contains JQuery Carousel API logic.
<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adobe Experience Manager Custom Carousel Demo</title>

<script type="text/javascript">
$(function(){
    $('#carousel').infiniteCarousel({
        displayTime: 6000,
        textholderHeight : .25
    });
});
</script>
<style type="text/css">
body {
    padding-top: 50px;
}
#carousel {
    margin: 0 auto;
    width: 400px;
    height: 390px;
    padding: 0;
    overflow: scroll;
    border: 2px solid #999;
}
#carousel ul {
    list-style: none;
    width: 1500px;
    margin: 0;
    padding: 0;
    position: relative;
}
#carousel li {
    display: inline;
    float: left;
}
.textholder {
    text-align: left;
    font-size: small;
    padding: 6px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
}
</style>
</head>

<body>

<div id="carousel">
    <ul>
        <li><img alt="" src="/content/dam/travel/1.jpg" width="500" height="213" /><p>Image 1.</p>
        </li>
        <li><img alt="" src="/content/dam/travel/2.jpg" width="500" height="213" /><p>Image 2</p>
        </li>
         <li><img alt="" src="/content/dam/travel/3.jpg" width="500" height="213" /><p>Image 3</p>
        </li>
        <li><img alt="" src="/content/dam/travel/4.jpg" width="500" height="213" /><p>Image 4</p>
        </li>
         <li><img alt="" src="/content/dam/travel/5.jpg" width="500" height="213" /><p>Image 5</p>
        </li>
    </ul>
</div>
<h3>This is an AEM example that uses five images retrieved from the CQ DAM and displayed within a custom Carousel component.</h3>

</body>
</html>
I hope this would help you.

Thanks and Regards
Kautuk Sahni

Kautuk Sahni

View solution in original post

smacdonald2008 · 11/17/15

In the component JSP - use the cq:includeClientLib tag:

<%@include file="/libs/foundation/global.jsp" %>

<cq:includeClientLib categories="cq.widgets" />  

<html>

<head>

<title>Hello AngularJS !!!</title>

</head>

<body>

<h1>Hello AngularJS!!!</h1>

<h2>This page contains Angular JS functionality</h2>

<div ng-app="">

     <p>Enter a value: <input type="text" ng-model="name"></p>

     <p ng-bind="name"></p>

</div>

</body>

</html>

Now only the JS and CSS in the client lib is loaded. You are correct - all CSS and JS in the client lib is loaded.

AEMing · 11/17/15

smacdonald2008 wrote...

Now only the JS and CSS in the client lib is loaded. You are correct - all CSS and JS in the client lib is loaded.

I don't quite follow you. I've already included the following in my page template:

And then on pages where my component is used I want to include additional CSS as to what is already included in the clientlib.

Lokesh_Shivalingaiah · 11/17/15

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_sahni · 11/17/15

Hi
Please have a look at the community article, this could help you
Link:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html
//Example (<cq:includeClientLib categories="jquerysamples" /> would help you)
Add the JQuery Carousel API to a CQ:ClientLibraryFolder node
You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.
In addition to the JQuery framework file, add the JQuery Carousel API library. This library enables you to create a CQ widget that retrieves images from the CQ DAM and displays the images within a carousel.
You can download the Carousel API library from the following URL:
http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/
You need to retrieve the following JS file from the downloaded file: jquery.infinitecarousel.js. To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.
To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.

Name
Type
Value
dependencies
String[]
cq.jquery
categories
String[]
jquerysamples
The dependencies property informs CQ to include the CSS files and JQuery libraries in the page. The categories property informs CQ which clientlibs must be included.
After you create the Clientlibs folder, add the stlye.css file, the JQuery library files, and two map text files.
Text files
You have to add a text file to the clientlibs folder that maps to the JS files. The name of the text file is: js.txt. The js.txt file contains the JS file names: jquery-1.6.3.min.js and jquery.infinitecarousel.js.
Add the files to the ClientLibs folder
Right-click /apps/carousel/components then select New, Node.
Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.
Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node.
On your file system, navigate to the folder where the JQuery JS files are located. Drag and drop the JS files to the clientlibs node by using CRXDE.
On your file system, navigate where you placed the CSS files. Drag and drop the CSS files to the clientlibs folder by using CRXDE.
Add a TXT file to the clientlibs folder named js.txt. Add the content specified in this section.
To the top
Modify the templateCarousel component to use the JQuery Carousel API
Modify the templateCarousel to use the JQuery Carousel API and reference the digital assets that you uploaded to the CQ DAM. To reference a digital asset located in the CQ DAM from your JSP, use the following URL:
/content/dam/travel/1.jpg
This URL references an image named 1.jpg that is used to populate the background of the CQ page. To reference the thumbnail image, use the following URL:
/content/dam/travel/thumbs/1.jpg
The following code represents the templateCarousel.jsp file that contains JQuery Carousel API logic.
<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adobe Experience Manager Custom Carousel Demo</title>

<script type="text/javascript">
$(function(){
    $('#carousel').infiniteCarousel({
        displayTime: 6000,
        textholderHeight : .25
    });
});
</script>
<style type="text/css">
body {
    padding-top: 50px;
}
#carousel {
    margin: 0 auto;
    width: 400px;
    height: 390px;
    padding: 0;
    overflow: scroll;
    border: 2px solid #999;
}
#carousel ul {
    list-style: none;
    width: 1500px;
    margin: 0;
    padding: 0;
    position: relative;
}
#carousel li {
    display: inline;
    float: left;
}
.textholder {
    text-align: left;
    font-size: small;
    padding: 6px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
}
</style>
</head>

<body>

<div id="carousel">
    <ul>
        <li><img alt="" src="/content/dam/travel/1.jpg" width="500" height="213" /><p>Image 1.</p>
        </li>
        <li><img alt="" src="/content/dam/travel/2.jpg" width="500" height="213" /><p>Image 2</p>
        </li>
         <li><img alt="" src="/content/dam/travel/3.jpg" width="500" height="213" /><p>Image 3</p>
        </li>
        <li><img alt="" src="/content/dam/travel/4.jpg" width="500" height="213" /><p>Image 4</p>
        </li>
         <li><img alt="" src="/content/dam/travel/5.jpg" width="500" height="213" /><p>Image 5</p>
        </li>
    </ul>
</div>
<h3>This is an AEM example that uses five images retrieved from the CQ DAM and displayed within a custom Carousel component.</h3>

</body>
</html>
I hope this would help you.

Thanks and Regards
Kautuk Sahni

Adobe Experience Manager Sites & More

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

Kautuk Sahni

Kautuk Sahni

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe