HTL: Dynamic Attribute "hidden" depending on wcmmode.edit state possible? | Community
Skip to main content
T
Tobias_Kolbe
Level 2
April 26, 2024
Solved

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

  • April 26, 2024
  • 3 replies
  • 1258 views

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.

🙂

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by chaudharynick

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.

3 replies

chaudharynick
chaudharynickAccepted solution
Level 4
April 26, 2024

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.

    T
    Tobias_KolbeAuthor
    Level 2
    April 26, 2024

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

      sravs
      Community Advisor
      sravsCommunity Advisor
      Community Advisor
      April 26, 2024

      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

        T
        Tobias_KolbeAuthor
        Level 2
        April 26, 2024

        @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! 🙂

          kautuk_sahni
          Community Manager
          kautuk_sahniCommunity Manager
          Community Manager
          June 7, 2024

          @tobias_kolbe We hope the AEM community has been beneficial to you. We look forward to your return as either a learner or a mentor. The community is enriched by SMEs like you. Please encourage your AEM peers to also participate. Happy AEM learning!

          Kautuk Sahni
          Terms & ConditionsAccessibility statement

          Loading footer...