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

Question

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: Output would be like /*Something*/ 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.

arunpatidar · Accepted Answer

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>

Sign up

Login with SSO

Login to the community

Login with SSO