DOM Manipulation in sightly using javascript

Avatar

Avatar

pratikshag92644

Avatar

pratikshag92644

pratikshag92644

01-08-2018

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?

Replies

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

884

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

884
Arun_Patidar
MVP

01-08-2018

Yes, you can manipulation of DOM using clientlibs.

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

01-08-2018

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.

Avatar

Avatar

pratikshag92644

Avatar

pratikshag92644

pratikshag92644

01-08-2018

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

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

884

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

884
Arun_Patidar
MVP

01-08-2018

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

Avatar

Avatar

pratikshag92644

Avatar

pratikshag92644

pratikshag92644

02-08-2018

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

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

884

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

884
Arun_Patidar
MVP

02-08-2018

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