how to accept multiple data attributes in text field? | Community
Skip to main content
K
karthick1356
Level 4
March 23, 2022
Solved

how to accept multiple data attributes in text field?

  • March 23, 2022
  • 1 reply
  • 3224 views

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

 

 

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 Vijayalakshmi_S

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

1 reply

Vijayalakshmi_S
Vijayalakshmi_S
Level 10
March 23, 2022

@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 

    K
    karthick1356Author
    Level 4
    March 24, 2022

    @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
      Vijayalakshmi_SAccepted solution
      Level 10
      March 24, 2022

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

        Terms & ConditionsAccessibility statement

        Loading footer...