how to accept multiple data attributes in text field?

[karthick1356]

how to accept multiple data attributes in text field?

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]

@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 

[karthick1356]

@Vijayalakshmi_S , Thanks for your reply.

the data-attribute will be authored by author in text field, so the dialog field will be multi-value filed in this case?

[DEBAL_DAS]

I think below touch ui dialog with multifield will help you.

Here is my touch ui dialog editor -

Persisted author's entries -

Rendered content on page -

 .content.xml associated with cq:dialog as shown below -

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Application"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<actions
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
fieldLabel="News"
typeHint="actions@String[]">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
name="./actions"/>
</actions>
</items>
</column>
</items>
</content>
</jcr:root>

Now you can add the logic as @Vijayalakshmi_S has suggested. Hope this will help.

[chola-dev]

@DEBAL_DAS , @karthick1356,@Vijayalakshmi_S , Can you explain how Map can be used here?

can we use same code what @Vijayalakshmi_S has suggested ?

[karthick1356]

Thanks @DEBAL_DAS for Detail explanation. I will accept your solution.

[karthick1356]

@Vijayalakshmi_S , could you please explain how to add Dynamic data-attribute coming from dialog to the above map.

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

[Vijayalakshmi_S · Accepted solution]

@karthick1356, @chola-dev 

• 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.