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 [Link]="/libs/granite/sightly/templates/[Link]"
data-sly-call="${[Link] @ categories='<yourname>.base'}"/>
Use Adobe HTL code like this for the JavaScript.
<sly [Link]="/libs/granite/sightly/templates/[Link]"
data-sly-call="${[Link] @ 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.
[Link]
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 [Link] 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 [Link] 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 [Link] 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 [Link] 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.
[Link]
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 [Link] 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 [Link] file into your emptypage component.
34. Make sure you are in the emptypage node of your application.
35. Expand the [Link] node so you can see its jcr:content node.
36. Select the [Link]/jcr:content node.
37. Double-click the jcr:data property and Browse.
38. Locate the [Link] 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 [Link]="/libs/granite/sightly/templates/[Link]"
data-sly-call="${[Link] @ categories='[Link]'}"/>
42. Repeat these steps for the [Link] node but use the [Link] file in your Student
Files. Notice that the Sightly script in [Link] is slightly different.
<sly [Link]="/libs/granite/sightly/templates/[Link]"
data-sly-call="${[Link] @ categories='[Link]'}"/>
Add the Client Library to your Template
43. Open AEM if it is not already open.
[Link]
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 [Link] 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
