How to get WCMMODE in AEM using Sightly?

 WCMMODE in AEM helps us to identify AEM author and publish instances and write and execute the mode-specific code or script.

WCMMODE Edit and Preview

WCMMODE.edit or preview represents to the author instance of the AEM.

WCMMODE disabled

WCMMODE.disabled returns the value disabled which means we are on publish mode of AEM.

To get the WCMMODE and write author or publish mode related mode in HTL/Sightly we can use the below code snippet to get the value of wcmmode in our Sightly code.

<sly data-sly-test="${wcmmode.edit}">
	<p>AEM author Edit mode</p>
</sly>

<sly data-sly-test="${wcmmode.disabled}">
	<p>AEM publish mode</p>
</sly>

/* Other way to get the WCMMODE in HTL sightly */

<sly data-sly-test.author="${wcmmode.edit || wcmmode.design }">
	<p>AEM author Edit or Design mode</p>
</sly>

<sly data-sly-test="${!author}">
	<p>AEM publish mode</p>
</sly>

Hope this helps you! If you get to know any other way to fetch the wcmmode in Sightly/HTL/HTML or javaScript please let us know in the comment section.

What will be output of this HTL code when component render?

<div class="div1" data-one="${'abc'}" data-two="${2}" data-three="${true}"></div>
<div class="div2" data-one="${''}" data-two="${2}" data-three="${false}"></div>

Output:

<div class="div1" data-one="abc" data-two="2" data-three=""></div>
<div class="div2" data-two="2"></div>

Ayen Hairate Aashiqui | Gulzar

Dam dara dam dara, chashm chashme nam

Dam dara dam dara, chashm chashme nam

Sun mere hum dum

Hamesha ishq mein hi jeena

Ayen hairate aashiqui jagaa mat

Pairon se zameen zameen laga mat

Kyon Urdu Faarsi bolte ho

Das kehte ho do tolte ho

Jhooton ke shehenshah bolo na

Kabhi jhaankhon meri aankhen

Sunaaye ek daastaan

Jo honton se kholna

Do chaar maheen se lamhon mein

Do chaar maheen se lamhon mein

Umron ke hisaab bhi hote hain

Jinhen dekha nahin kal tak

Jinhen dekha nahin kal tak

Kahin bhi ab kok mein

Woh chahre bote hain

-- written by Gulzar