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.

[As usual, the sample package is available in my GitHub account.]

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:

<html>

<script type="text/javascript" src="check.js">

</script>

<FORM><B>How much is 1 + 1? </B><P>

<INPUT TYPE=hidden name="answer" VALUE="2">

<INPUT TYPE=radio NAME="options" VALUE="1">1<br>

<INPUT TYPE=radio NAME="options" VALUE="2">2<br>

<INPUT TYPE=radio NAME="options" VALUE="3">3<br>

<INPUT TYPE=radio NAME="options" VALUE="4">4<br>

<INPUT TYPE=button NAME="Validate" VALUE="Validate" onClick="checkAnswer(this.form)">

</FORM>

<html>

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

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

Authors should be allowed to enter a 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 on 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 scratch. See my previous posts to know more about components and dialogs. This where I am:

Created a component, named Quiz.

Created a touch-optimized dialog that has the following fields: Question, Answer, Option A, Option B, Option C, Option D. (See my previous posts to know the details)

Created a js that essentially captures all the variables a user enters in the dialog. (Again see my previous post on the same. I don’t want to repeat that.)

In the component’s default script, entered the html code to display questions and options to the end-users.

Now, I need to have a JavaScript function to call, when the end-user clicks the validate button. That’s what I am going to show in this video.

Go to the /etc/clientlibs folder.
You save your client library files here.
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.

function checkAnswer(form) {

for (var i = 0; i < form.options.length; i++) {

if (form.options[i].checked) {

break

}

if (form.options[i].value == form.answer.value) {

alert("You selected the correct answer!! :)")

} else {

alert("You selected an incorrect answer!!")

}

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:

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

Right-click and select Edit.

Fill the details.

Select OK

Go to the View mode and test.

As usual, I have uploaded the component to the GitHub account.

AEM Tutorials for Beginners

April 24, 2020
Estimated Post Reading Time ~