HTL: Dynamic Attribute "hidden" depending on wcmmode.edit state possible?

[Tobias_Kolbe]

Hi there,

is there a way to dynamically add the "hidden" attribute without an value to an element, when wcmmode.edit is inactive, and remove the attribute completely, when wcmmode.edit is active?

Desired: Solution with dynamic attribute without value

My HTL-Code looks something like this:

<div class="something" hidden>
    <!--Content here-->
</div>

And what I would like (the div.something element should only be written once, not double):

<sly data-sly-test.isEditMode="${wcmmode.edit}" />

<!-- The following two code blocks should only be written once, not double -->
<!-- Edit mode active: -->
<div class="something">
    <!--Content here-->
</div>

<!-- Edit mode not active: -->
<div class="something" hidden>
    <!--Content here-->
</div>

Solutions that work, but are not solved with dynamic attributes:

Solution 1: I know I could do that with dynamic classes like the following:

<sly data-sly-test.isEditMode="${wcmmode.edit}" />

<!-- Solution with dynamic class -->
<div class="something ${isEditMode ? '' : 'd-none'}">
    <!--Content here-->
</div>

Solution 2: Or with data-sly-test and doubled blocks of code:

<sly data-sly-test.isEditMode="${wcmmode.edit}" />
        
<div data-sly-test="${isEditMode}" class="something">
    <!--Content here-->
</div>

<div data-sly-test="${!isEditMode}" class="something" hidden>
    <!--Content here-->
</div>

But what I am looking for would be especially for the "hidden" attribute which mostly has no value.

Solution that didn't work

I Also tried using data-sly-attribute.hidden like the following, but it didn't work:

<sly data-sly-test.isEditMode="${wcmmode.edit}" />

<!-- Always sets the attribute hidden, because the value is not important, thus does not work -->        
<div class="something" data-sly-attribute.hidden="${isEditMode ? '' : 'hidden'}">
    <!--Content here-->
</div>

If there's a way to use dynamic attributes without values without writing doubled code blocks or changing classes, that would be great.

Help is much appreciated.

[chaudharynick · Accepted solution]

Hi @Tobias_Kolbe 

can you try this?

<div data-sly-attribute.hidden="${wcmmode.edit}">
<!-- content here -->
</div>

 this will show hidden attribute only in edit mode.

[Tobias_Kolbe]

@chaudharynick Thank you very much! That worked just like I wanted.

[sravs]

Hi @Tobias_Kolbe ,

Boolean values allow to control display of boolean attributes. Please refer below examples,

<input checked="${true}"/>
<input data-sly-attribute.checked="${true}"/>
<!--/* Both output: */-->
<input checked/>
 
<input checked="${false}"/>
<input data-sly-attribute.checked="${false}"/>
<!--/* Both output: */-->
<input/>
 
<!--/* But 'true' or 'false' strings don't work the same way: */-->
<input checked="${'true'}"/>  <!--/* outputs: */--> <input checked="true"/>
<input checked="${'false'}"/> <!--/* outputs: */--> <input checked="false"/>
 
<!--/* Consider having attrs={'checked': true} */-->
<input data-sly-attribute="${attrs}"/>
<!--/* outputs: */-->
<input checked/>

Please refer for more information regarding the data-sly-attributes 
https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#223-attribute

[Tobias_Kolbe]

@sravs Thank you very much for the detailed answer about the difference of data-sly-attribute with strings or booleans. That is very helpful as well!