How to add the Author/Edit mode condition in sightly/HTL for class attribute values.? | Community
Skip to main content
Level 4
June 17, 2019
Solved

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

  • June 17, 2019
  • 3 replies
  • 14742 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Karl515

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>

3 replies

Bhuwan08
Level 2
June 18, 2019

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

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

Karl515
Karl515Accepted solution
Level 5
June 18, 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>

arunpatidar
Community Advisor
Community Advisor
June 18, 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>

Arun Patidar