3 Client Libraries
Client Libraries _____________________________________________________________________ 2
Add Client Libraries to Page Components ............................................................................................................................................ 2
Add Client Libraries to Templates ............................................................................................................................................................... 2
Exercises __________________________________________________________________________ 3
Create a Client Library ......................................................................................................................................................................................... 3
Add the Client Library to your Page Component............................................................................................................................. 5
Add the Client Library to your Template ............................................................................................................................................... 6
Client Libraries
Today’s dynamic websites depend heavily on client-side processing in the browser. This processing is largely
provided by client-side JavaScript and CSS (Cascading Style Sheets). In AEM, we create client-side libraries which are
also known as client libraries, or client libs.
Client Libraries
Client library folders provide a way for us to store our JavaScript and CSS in the CRX repository. We can also organize
our client libraries into categories and use a single library in multiple categories. Although client libraries were
created in /etc in the past, it is now a best practice to create our client libraries in /apps.
Add Client Libraries to Page Components
Client Libraries must be referenced in your page components. Use Adobe HTL code like this for the CSS.
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.css @ categories='<yourname>.base'}"/>
Use Adobe HTL code like this for the JavaScript.
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.js @ categories='<yourname>.base'}"/>
Add Client Libraries to Templates
You will include Client Libraries in your template by using the AEM Template Editor.
© 2019 SmartDoc Technologies Create Sites - 2
Exercises
Create a Client Library
1. Open CRXDE Lite.
http://<servername>:<port>/crx/de
2. Right-click on the /apps/<teamfolder>/<yourname>site folder and select Create – Create Folder.
3. Enter clientlibs for the Name.
4. Click OK.
5. Click Save All.
6. Right-click on the clientlibs folder and select Create – Create Node.
7. Enter clientlib-base for the Name.
8. Select cq:ClientLibraryFolder for the Type.
9. Click OK.
10. Click Save All.
Note: To create an Array property you simply select the Multi button (#4). You can create Arrays of the different
datatypes you select in the Type property (#2). An Array Type will always have brackets like this []. After you are done
creating Array Types, make sure to deselect the Multi button (#4).
11. Select your clientlib-base folder and add these properties.
Create Sites - 3 © 2019 SmartDoc Technologies
Name Type Value
categories String[] <yourname>.base
embed String[]
allowProxy Boolean true
Your properties and values should look like this.
12. Click Save All.
13. Right-click on the clientlib-base folder and select Create – Create File.
14. Enter css.txt for the Name and click OK.
15. Right-click on the clientlib-base folder and select Create – Create Folder.
16. Enter css for the Name and click OK.
17. Click Save All.
18. Double-click the css.txt file and enter this code into the text editor.
#base=css
19. Click Save All.
20. Right-click on the clientlib-base folder and select Create – Create File.
21. Enter js.txt for the Name and click OK.
22. Right-click on the clientlib-base folder and select Create – Create Folder.
23. Enter js for the Name and click OK.
24. Click Save All.
25. Double-click the js.txt file and enter this code into the text editor.
#base=js
26. Click Save All.
© 2019 SmartDoc Technologies Create Sites - 4
Add the Client Library to your Page Component
27. Open CRXDE Lite if you don’t already have it open.
http://<servername>:<port>/crx/de
28. Navigate to this page component and expand it so you can see all the child nodes.
/apps/core/wcm/components/page/v2/page
29. Right-click on the customheaderlibs.html file and select Copy.
30. Navigate back to your emptypage component in your application.
31. Right-click on the emptypage component and select Paste.
32. Click Save All.
33. Repeat these steps to also copy the customfooterlibs.html file into your emptypage component.
34. Make sure you are in the emptypage node of your application.
35. Expand the customheaderlibs.html node so you can see its jcr:content node.
36. Select the customheaderlibs.html/jcr:content node.
37. Double-click the jcr:data property and Browse.
38. Locate the customheaderlibs.html file in your Student Files and click Open.
Create Sites - 5 © 2019 SmartDoc Technologies
39. Click OK and the Sightly script will be loaded into your node.
40. Click Save All.
41. Edit the HTL script so it includes a reference to your client library category.
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.css @ categories='jpt.base'}"/>
42. Repeat these steps for the customfooterlibs.html node but use the customfooterlibs.html file in your Student
Files. Notice that the Sightly script in customfooterlibs.html is slightly different.
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.js @ categories='jpt.base'}"/>
Add the Client Library to your Template
43. Open AEM if it is not already open.
http://<servername>:<port>/aem/start.html
44. Select Tools – General – Templates to open the Templates Console.
45. Open your team folder.
46. Select your template and click Edit.
47. Click the Page Information icon and select Page Policy.
© 2019 SmartDoc Technologies Create Sites - 6
48. Enter Client Libraries for Policy Title.
49. In the Properties panel on the right, notice the wcm.foundation.components.page.responsive client library is
already loaded.
50. Click Add on the Client Libraries panel and enter <yourname>.base to load your Client Library.
51. Click Done (the checkmark in the upper-right).
Your custom Client Library is now part of this template. All pages that were/are created from this template will now
include this custom Client Library.
Create Sites - 7 © 2019 SmartDoc Technologies
