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

Avatar

Avatar

Kkkrish

Avatar

Kkkrish

Kkkrish

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

Karl515

Avatar

Karl515

Karl515

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

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

860

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

860
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

Bhuwan08

Avatar

Bhuwan08

Bhuwan08

17-06-2019

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

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