Accessing global object wcmmode in AEM from a handlebars template

[Kreender]

I can access a component properties from an hbs template for that component like this:

{{properties.title}}

but I want to access the wcmmode from that (https://docs.adobe.com/docs/en/aem/6-0/develop/sightly/global-objects.html) so I can decide to render or not some information in design or edit mode. I now you can access this variable in sightly using:

<p data-sly-test="${wcmmode.edit}">You are in edit mode</p> <p data-sly-test="${wcmmode.design}">You are in design mode</p>

But that does not work on hbs, I tried:

<p data-sly-test="{{wcmmode.edit}}">You are in edit mode</p> <p data-sly-test="{{wcmmode.design}}">You are in design mode</p>

That always evaluates as true regardless of the real mode. Any ideas on how to correctly access this?

[leeasling · Accepted solution]

Try this:

{{#if-wcm-mode mode="EDIT"}} <p>You are in edit mode</p> {{/if-wcm-mode}} {{#if-wcm-mode mode="DESIGN"}} <p>You are in design mode</p> {{/if-wcm-mode}}

[Kreender]

Amazing, that almost works. It works on classic UI, but in touch UI when I change to design mode and the value does not change :(. Where did you found that conditional BTW?, I've been searching for information about that for ages.

[leeasling]

Make sure you refresh in Touch UI after changing to design.  That's a limitation of the CMS itself and not that snippet of code.

You know, I honestly don't recall where I initially found it.  I had to go back through a years worth of commits to find it though lol (it was eventually removed from the code base).

[Kreender]

But its not totally a refresh problem. If I change to preview and refresh the texts disappears, but if I change to design and refresh it says that I'm in edit mode (Touch UI is really weird)

[leeasling]

Sounds like a bug with the Touch UI to me.  I would file a Day Care ticket.

[Siddharth_Palan]

The syntax for the #if-wcm-mode is slightly different from what is stated above. The right usage is:

{{#if-wcm-mode mode="<mode1>,<mode2>"}} ... {{else}} ... {{/if-wcm-mode}}

"mode" can be compared against a comma separated list of know modes as listed here: https://docs.adobe.com/docs/en/cq/5-6-1/javadoc/com/day/cq/wcm/api/WCMMode.html

Hope that helps.