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 Manipulation in sightly using javascript

pratikshag92644
Level 1
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
Arun_Patidar
Community Advisor
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.

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

Arun_Patidar
Community Advisor
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

pratikshag92644
Level 1
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.

Arun_Patidar
Community Advisor
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