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

Avatar

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

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)