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

Avatar

Avatar
Level 1
pratikshag92644
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
pratikshag92644
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile
pratikshag92644
Level 1

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
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
pratikshag92644
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile
pratikshag92644
Level 1

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
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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
Level 1
pratikshag92644
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
pratikshag92644
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile
pratikshag92644
Level 1

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
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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