Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

DOM Manipulation in sightly using javascript

Avatar

Level 1

Is it possible to achieve DOM manipulation inside use function by accessing document and window objects? If not do we need to create a separate js file to achieve this? Currently in my component I have one JS file inside clientlibs which only deals with DOM manipulation and the other one which uses "use" function. So is this the right approach?

6 Replies

Avatar

Community Advisor

Yes, you can manipulation of DOM using clientlibs.

Note : data-sly-use is use to intantiate Java/Js object for for backend functionality.



Arun Patidar

Avatar

Level 1

The example in the link has a java object ("hello") which is used to retrieve message and another script.js file in clientlibs which does all the DOM manipultaion. But in my case I have a js file which uses sightly use (fucntion() {....}) i.e Javascript use API for retrieving message and another script.js file in clientlibs which does DOM manipulation. So there are two JS files for a component.

So can we do this? Or can I call the document object inside the sightly use(function(){})?

Avatar

Community Advisor

sightly use(function(){}) is use to retrieve properties or apply business logic like Java.

But for DOM manipulation you have to write clientlibs like below:

In clientLibs folder, add the following two files:

  • js.txt - references the script.js file
  • script.js - contains JavaScript logic that you want to use as part of your HTL component

The following code represents the script.js file

window.onload = function() {

// your Dom manipulation logic

}

Thanks

Arun



Arun Patidar

Avatar

Level 1

Thanks for the clarification. One more thing is there a way to debug sightly use function? It throws error with console.log() and I couldn't find it in sources to add the breakpoint.

Avatar

Community Advisor

Hi,

you can use sightly global objects log for logging and you can see logs in error.log

HTL Global Objects

example -

Screen Shot 2018-08-02 at 2.26.36 PM.png



Arun Patidar