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

How to add the Author/Edit mode condition in sightly/HTL for class attribute values.?

Avatar

Avatar
Validate 25
Level 4
Kkkrish
Level 4

Likes

27 likes

Total Posts

107 posts

Correct Reply

1 solution
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile

Avatar
Validate 25
Level 4
Kkkrish
Level 4

Likes

27 likes

Total Posts

107 posts

Correct Reply

1 solution
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile
Kkkrish
Level 4

17-06-2019

I have a HTML snippet as below.

 <div id="mydivid" class="abcd xyz myclass"> .... ... </div> 

I have wrote it in below way. but it doesn't shows the entire dive in wcmmode=disabled.

<div data-sly-test.editor="${wcmmode.edit || wcmmode.design}"> <div id="mydivid" class="abcd xyz myclass"> </div> .... ... <div data-sly-test.editor="${wcmmode.edit || wcmmode.design}"> </div> </div> 

Is there any way to add "myclass" value to the class attribute alone only in author mode alone and not in preview or disabled mode of AEM page.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 25
Level 4
Karl515
Level 4

Likes

14 likes

Total Posts

157 posts

Correct Reply

11 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile

Avatar
Validate 25
Level 4
Karl515
Level 4

Likes

14 likes

Total Posts

157 posts

Correct Reply

11 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile
Karl515
Level 4

18-06-2019

to add style.

remove preview if only want edit

<style data-sly-test="${wcmmode.preview || wcmmode.edit}">

.myClass {

    height: 720px;

}

</style>

   

In your case, I suggest

<div data-sly-test="${wcmmode.edit}" class="abcd xyz myclass"> ..context here.. </div>

<div data-sly-test="${wcmmode.preview || wcmmode.disabled}" class="abcd_prod xyz2_prod myclass2_prod"> ....context here... </div>

Answers (2)

Answers (2)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,277 likes

Total Posts

3,153 posts

Correct Reply

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

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,277 likes

Total Posts

3,153 posts

Correct Reply

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

18-06-2019

Hi,

Try below

<sly data-sly-test.editor="${wcmmode.edit || wcmmode.design}"></sly>

<div id="mydivid" class="${editor?'abcd xyz myclass':'abcd xyz'}">

     ........

</div>

Avatar

Avatar
Validate 1
Level 2
Bhuwan08
Level 2

Likes

8 likes

Total Posts

13 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 2
Bhuwan08
Level 2

Likes

8 likes

Total Posts

13 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 1
View profile
Bhuwan08
Level 2

17-06-2019

Try this to get class attribute value only in edit mode.

<div id="mydivid" class="${ wcmmode.edit ? 'myclass' : ''}">....</div>