The data-sly-attribute directive in HTL (HTML Template Language) allows developers to dynamically set one or more attributes on an HTML element. This powerful feature provides flexibility in managing HTML attributes based on the logic defined in your Sling models or Use classes.
1. Element and Attribute Visibility
When using the data-sly-attribute directive, it’s important to understand how it affects the visibility of elements and their attributes:
Element Visibility: The HTML element to which the data-sly-attribute directive is applied will always be rendered in the DOM. This means that the element itself will always be visible, regardless of the attributes set or not set by the directive.
1 2 3 4 | <p data-sly-attribute.class="${dynamicClass}">This is a paragraph.</p> <!-- Assuming dynamicClass = 'highlight' --> <!-- Output: --> <p class="highlight">This is a paragraph.</p> |
Even if dynamicClass is empty or undefined, the paragraph will still appear in the DOM.
Element Content: The content inside the HTML element will also always be displayed. The data-sly-attribute directive only affects the attributes of the element, not its content. This ensures that the inner content remains intact and visible to the users.
1 2 3 4 | <span data-sly-attribute.id="${dynamicId}">Content remains visible.</span> <!-- Assuming dynamicId = '' --> <!-- Output: --> <span>Content remains visible.</span> |
Even if dynamicId is empty or undefined, the text “Content remains visible” will still be displayed within the span element.
2. Attribute Value Options
The attribute value in data-sly-attribute is optional and can be of different types:
String: Used to set the content of the attribute.
Example:
1 2 3 4 | <a data-sly-attribute.href="${dynamicHref}">Click here</a> <!-- Assuming dynamicHref = 'https://www.example.com' --> <!-- Output: --> <a href="https://www.example.com">Click here</a> |
Boolean: Used for setting boolean attributes.
Example:
1 2 3 4 | <input type="checkbox" data-sly-attribute.checked="${isChecked}" /> <!-- Assuming isChecked = true --> <!-- Output: --> <input type="checkbox" checked /> |
Object: Used for setting multiple attributes simultaneously.
Example:
1 2 3 4 | <div data-sly-attribute="${attributeMap}">Dynamic Attributes</div> <!-- Assuming attributeMap = {'id': 'dynamicDiv', 'class': 'dynamicClass'} --> <!-- Output: --> <div id="dynamicDiv" class="dynamicClass">Dynamic Attributes</div> |
If the attribute value is omitted, the attribute will be removed.
3. Attribute Identifier
The attribute identifier, which is the name of the attribute, is also optional. It must be omitted only if the attribute value is an Object.
Detailed Explanation:
When using the data-sly-attribute directive, you can specify the name of the attribute you want to set. This is called the attribute identifier. However, when you are using an Object to set multiple attributes at once, you do not need to specify individual attribute names.
Code Examples:
Specifying Attribute Identifier:
When setting a single attribute, you provide the attribute name directly.
1 2 3 4 | <p data-sly-attribute.class="${dynamicClass}">This is a paragraph.</p> <!-- Assuming dynamicClass = 'highlight' --> <!-- Output: --> <p class="highlight">This is a paragraph.</p> |
Omitting Attribute Identifier (Using an Object):
When setting multiple attributes simultaneously, you use an Object and omit the attribute name.
1 2 3 4 | <div data-sly-attribute="${attributeMap}">Dynamic Attributes</div> <!-- Assuming attributeMap = {'id': 'dynamicDiv', 'class': 'dynamicClass', 'aria-label': 'click'} --> <!-- Output: --> <div id="dynamicDiv" class="dynamicClass" aria-label="click">Dynamic Attributes</div> |
In this case, the keys of the Object (id and class) are used as attribute names, and their corresponding values (dynamicDiv and dynamicClass) are assigned to those attributes.
4. Using `data-sly-attribute`
You can define attributes either directly through an expression or by using a data-sly-attribute.* attribute. This approach allows designers to annotate HTML without modifying the mock content.
Example: Overwriting an Attribute
1 2 3 4 5 | <!-- This will overwrite the class attribute value --> <tag class="initialClass" data-sly-attribute.class="${dynamicClass}"></tag> <!-- Assuming dynamicClass = 'newClass' --> <!-- Output: --> <tag class="newClass"></tag> |
Example: Creating a New Attribute
1 2 3 4 5 | <!-- This will create a data-values attribute --> <tag data-sly-attribute.aria-label="${dynamicValues}"></tag> <!-- Assuming dynamicValues = 'exampleValue' --> <!-- Output: --> <tag aria-label="exampleValue"></tag> |
5. Injecting Multiple Attributes
The data-sly-attribute block element, when used without specifying an attribute name, allows the injection of multiple attributes that have been prepared in a map object containing key-value pairs.
Example: Injecting Multiple Attributes
1 2 3 4 | <input data-sly-attribute="${attributeMap}" type="text"/> <!-- Assuming attributeMap = {'id': 'dynamicId', 'class': 'dynamicClass'} --> <!-- Output: --> <input id="dynamicId" class="dynamicClass" type="text"/> |
6. More Examples
Example: Setting Multiple Attributes on a Button
1 2 3 4 | <button data-sly-attribute="${buttonAttributes}">Click Me</button> <!-- Assuming buttonAttributes = {'id': 'submitButton', 'class': 'btn btn-primary', 'disabled': true} --> <!-- Output: --> <button id="submitButton" class="btn btn-primary" disabled>Click Me</button> |
Example: Conditional Attribute Setting
1 2 3 4 5 6 7 8 | <a href="/home" data-sly-attribute.target="${openInNewTab ? '_blank' : ''}">Home</a> <!-- Assuming openInNewTab = true --> <!-- Output if openInNewTab is true: --> <a href="/home" target="_blank" rel="noopener">Home</a> <!-- Output if openInNewTab is false: --> <a href="/home">Home</a> |
Conclusion
The data-sly-attribute directive in HTL provides a versatile way to manage HTML attributes dynamically. Whether you’re setting a single attribute or multiple attributes at once, this feature can help you create more dynamic and flexible web components. By leveraging data-sly-attribute, you can ensure that your HTML remains clean and maintainable, while still being able to handle complex attribute logic.
Feel free to explore and use these examples to enhance your AEM projects, making your components more dynamic and interactive.
