내 커뮤니티 업적 표시줄을 확대합니다.

Submissions are now open for the 2026 Adobe Experience Maker Awards.

Mark Solution

활동이 없어 이 대화는 잠겼습니다. 새 게시물을 작성해 주세요.

해결됨

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

Avatar

Level 2

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.

1 채택된 해결책 개

Avatar

정확한 답변 작성자:
Community Advisor

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>

 

 

Arun Patidar

AEM LinksLinkedIn

원본 게시물의 솔루션 보기

2 답변 개

Avatar

정확한 답변 작성자:
Community Advisor

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>

 

 

Arun Patidar

AEM LinksLinkedIn

Avatar

Level 2

Hi Arun,

 

This solution is working for me. Thank you for your help