using componentContext.cssClassNames in html which is giving comma separated values

Avatar

Avatar

ravi_shankerj14

Avatar

ravi_shankerj14

ravi_shankerj14

27-02-2020

We have a requirement where we want "${componentContext.cssClassNames}" to written space separated vales rather then comma separated value. So I try to debug this but i did not find the implementation class of "cssClassNames " method. Can you please help me in that. 

 

Find the below code snippet for the same:

 

<body class="${componentContext.cssClassNames}"
data-sly-use.templatedContainer="com.day.cq.wcm.foundation.TemplatedContainer">
<sly data-sly-test="${templatedContainer.hasStructureSupport}"
data-sly-repeat.child="${templatedContainer.structureResources}"
data-sly-resource="${child.path @ resourceType=child.resourceType, decorationTagName='div'}"/>
</body>

 

Output would be like 

 

<body class="page,basicpage,search--page">

/*Something*/

</body>

 

Please what we can do to make this comma separated values to space separated values. Through java and sightly. JS implementation is not in requirenment.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Reply

838

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Reply

838
Arun_Patidar
MVP

27-02-2020

You can create a model and do replace there in Java -

 

e.g.

 

package com.acc.aem19.core.models;

import java.util.Set;
import javax.annotation.PostConstruct;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.day.cq.wcm.api.components.ComponentContext;
import com.day.cq.wcm.commons.WCMUtils;

@Model(adaptables = {SlingHttpServletRequest.class, Resource.class}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class FormateCSS {

    Logger logger = LoggerFactory.getLogger(this.getClass());

    @SlingObject
    private SlingHttpServletRequest request;

    private String classStr;


    @PostConstruct
    protected void init() {
        try {
            ComponentContext cc = WCMUtils.getComponentContext(request);
            Set<String> classSet = cc.getCssClassNames();
            classStr = String.join(",", classSet);
            classStr = classStr.replace(',', ' ');
        } catch (Exception e) {
            e.printStackTrace();
            logger.info(e.getMessage());
        }
    }


    public String getClassStr() {
        return classStr;
    }
}

 

 

HTL

 

<body data-sly-use.formatCSS="com.acc.aem19.core.models.FormateCSS" class="${formatCSS.classStr @ context='attribute'}"
</body>

 

 

Answers (0)