how to accept multiple data attributes in text field?

Question

Example: Input in the dialog will be : data-attri1=value1, data-attri2=value2, data-attri-3=value3 etc...

output in sightly: data-attri1=value1, data-attri2=value2, data-attri-3=value3

Vijayalakshmi_S · Accepted Answer

If you would like to retrieve the dialog input in this format - data-attri1=value1 (in a single textfield as part of Multifield),
- In the model, you need to inject this value -> split using "=" -> then populate the Map object.
Alternatively, you can also use two textfield, one each for key and value as part of multifield fieldset. (composite multifield), retrieve and populate map accordingly.

Idea here is multiple attributes can be set to an HTML element by assigning Map object (key-value pairs) to data-sly-attribute.

Based on how you design/decide to get the input from author in a dialog, retrieve data accordingly and populate Map object.

Vijayalakshmi_S · Answer

@karthick1356

If you are looking to populate data attributes to an HTML element in sightly/HTL,

Create a Map using data attributes in Sling Model and expose it via getter.
Use data-sly-attribute with value being the getter above

public Map<String, String> getDataAttributes() {
        return Stream.of(
                new AbstractMap.SimpleEntry<String, String>("data-attr1", "Attribute1Value"),
                new AbstractMap.SimpleEntry<String, String>("data-attr2", "Attribute2Value"),
                new AbstractMap.SimpleEntry<String, String>("data-attr3", "Attribute3Value")

        ).collect(Collectors.toMap(Map.Entry::getKey, Map.Entry::getValue));
    }

In HTL :

<h2 class="cmp-resourceadapt-title" data-sly-attribute="${obj.dataAttributes}">${obj.textField}</h2>

Will result in

${obj.textField}

Will result in

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded