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

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

  • June 17, 2019
  • 3 respostas
  • 14735 Visualizações

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.

Este tópico foi fechado para respostas.
Melhor resposta por 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 Respostas

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
Karl515Resposta
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