DOM Manipulation in sightly using javascript

[pratikshag92644]

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?

[arunpatidar]

Yes, you can manipulation of DOM using clientlibs.

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

[smacdonald2008]

WHen working with HTL components - you can use JS - as shown here:

Adobe Experience Manager Help | Creating an Adobe Experience Manager HTML Template Language componen...

Perform your document object calls within JS.

[pratikshag92644]

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(){})?

[arunpatidar]

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

[pratikshag92644]

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.

[arunpatidar]

Hi,

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

HTL Global Objects

example -