Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

DOM on aem

Avatar

Avatar
Validate 1
Level 1
iwanttobeDev
Level 1

Likes

2 likes

Total Posts

17 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Validate 1
Level 1
iwanttobeDev
Level 1

Likes

2 likes

Total Posts

17 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 1
Applaud 5
Affirm 1
View profile
iwanttobeDev
Level 1

15-04-2020

Hello,

 

what a similiar method if i want to using DOM with JS API on AEM,

 

for Example:

 

<div class="class1">

....

</div>

 

let dom1 = document.getElementByClassName('class1');

im trying to make toogle Active button on AEM, how to do it, thankyou verymuch

DAM Data Elements

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

613 likes

Total Posts

590 posts

Correct Reply

231 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

613 likes

Total Posts

590 posts

Correct Reply

231 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

16-04-2020

Hey @iwanttobeDev,

Whenever you are writing JavaScript for a website, within the browser the window.document object should be available. The window.document can be used to select elements on the page, then to add behaviours to them. Such as click. 

Adding JavaScript to a web page can be done in many ways in AEM, but the best practice when adding JavaScript on an AEM website is via client libraries.

Client libraries in AEM are one of the most popularly used features provided by AEM. It allows us to not only manage our client-side resources like (JavaScript, CSS, images, fonts etc...) but also provide options to debug, minify, merge and gzip the client-side code.

First things first, you need to understand the items listed below:

  1. What are client libraries in AEM - https://www.youtube.com/watch?v=8i2Uy_99_TU
  2. How to create a client library in AEM. - https://www.youtube.com/watch?v=caJa4i35UPI
  3. How to call a client library on AEM from a page component. - https://www.youtube.com/watch?v=mFeieUsaMDY

Understanding how to what are client libraries, how to create client libraries, and how to call client libraries from your page will the best place to start.

Sometimes if you want to run a small script in your AEM web page, and creating a new client library is not required, you can add inline JavaScript to the bottom of your web page (it's best practice to run JavaScript as close to the closing </body> tag as possible). 
Inline JavaScript example:

 

<script type="text/javascript">
     document.getElementsByTagName('body')[0].style.display = 'none';
</script>

 

I hope this helps.

Answers (1)

Answers (1)

Avatar

Avatar
Give Back 5
Employee
sunjot16
Employee

Likes

104 likes

Total Posts

164 posts

Correct Reply

50 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 25
Give Back 10
Give Back
View profile

Avatar
Give Back 5
Employee
sunjot16
Employee

Likes

104 likes

Total Posts

164 posts

Correct Reply

50 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 25
Give Back 10
Give Back
View profile
sunjot16
Employee

16-04-2020

You can create a JS file where in you use DOM API to perform toggle operations, and then import it on the page(using something like:

<script type="module" src="app.js"></script>

) where you want to trigger that JS code.