Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
Read More & Register today!
SOLVED

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

Avatar

Level 2
Level 2
2/27/20 3:26:47 AM

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.

Views

1.1K

Replies

2
Sign in to like this content

Total Likes

Translate
Translate
1 Accepted Solution

Avatar

Correct answer by
Community Advisor
Community Advisor
2/27/20 4:53:30 AM

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

View solution in original post

Views

1.1K

Replies

1
Sign in to like this content

Total Likes

Translate
Translate
Jump to reply
2 Replies

Avatar

Correct answer by
Community Advisor
Community Advisor
2/27/20 4:53:30 AM

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

Views

1.1K

Replies

1
Sign in to like this content

Total Likes

Translate
Translate
Jump to reply

Avatar

Level 2
Level 2
3/4/20 5:37:05 AM
In response to arunpatidar

Hi Arun,

 

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

Views

1.1K

Replies

0
Sign in to like this content

Total Likes

Translate
Translate
Related Conversations
Using Environment Variables in OSGi configurations as part of String

Views

14

Likes

0

Replies

1
Dynamic Dropdown using datasource

Views

107

Likes

0

Replies

6
Not able to add external URL in Content Fragment New Editor

Views

54

Likes

0

Replies

1
Page Published details getting updated in Timelines of Page edit after content updated on Page AEM6.5 on-Premise

Views

81

Likes

0

Replies

4
Using AEM to pull data from RTCDP

Views

52

Likes

0

Replies

1