Access client-side scripts (ClientLib) in AEM

In this post, I will cover an important concept – Client Libraries. Client Libraries are primarily JavaScript libraries that you may need to use while developing components and templates. This is an important concept that we didn’t cover in the first part of the training.

So, let us develop a quiz component to see how client-side libraries are used in AEM. Let me show you what exactly I meant by a Quiz component. See the webpage – it asks you a very basic question: How much is 1 + 1?

After a user selects and submits the answer, it provides a message stating if the answer is correct or not. The code to accomplish this looks like as given below:

When a user clicks the Validate button, the checkAnswer function in check.js is called. (We will see the js later.)

Now, when we covert that into a component, we need to accomplish the following:

Authors should be allowed to enter question, options, and an answer. After all, content is created by authors. You are a developer, who develops the component. We have already seen that authors enter content to a component using dialogs. I am not going to elaborate about dialogs this time, though they are an integral part of the Quiz component.

After an author enters a question, options, and an answer, we should validate the answer entered by an end user and then show the appropriate message. We need to call a JavaScript function to validate the answer. That’s what exactly I will cover in this post.

It’s not a good practice to save JavaScript into the component’s script directly. We save the script inside a ClientLibrary in AEM. And then, call the script to the component’s page. I am not going to start from the scratch. See my previous posts to know more about components and dialogs. This where I am:

Create a cq:ClientLibraryFolder folder named aem-company. (I hope you remember our company name – in this way, we can easily identify the location of all the client library files needed for the project.)

Add another property, categories which is a string array. Give a name as aemcompany.script.

Create another folder, scripts.
It’s not a mandatory step. This way, you can provide more modularity.

Create a aemcompany.js file inside. Copy and paste the required script. This is the script you saw at the start of the video.

Create a js.txt file inside the ClientLibrary folder and add the following:

#base=scripts
aemcompany.js

It says that js file, aemcompany.js, needs to be picked up from the folder scripts. We are done with creating the js file. Now we need to include this into the component.

Open the Quiz component’s default script and add the following:<meta data-sly-use.clientlib=”/libs/granite/sightly/templates/clientlib.html” data-sly-call=”${clientlib.all @ categories=’aemcompany.script’}” data-sly-unwrap></meta>Basically, the following scripts add the category that has the JavaScript that we needed.

To test the component we developed:

Basically, the following scripts add the category that has the JavaScript that we needed.