Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

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

Avatar

Level 5

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.

1 Accepted Solution

Avatar

Correct answer by
Level 5

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>

View solution in original post

3 Replies

Avatar

Level 2

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

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

Avatar

Correct answer by
Level 5

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>

Avatar

Community Advisor

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