Expand my Community achievements bar.

SOLVED

Using @ScriptVariable to get styles from design dialog selections

Avatar

Level 3

I am trying to get the styles assigned in the design dialog incorporated into my Sling model. I am getting null for the currentStyle

 

package com.cws.aem.core.models.v1.content;

import com.cws.aem.core.models.v1.ComponentModel;
import com.day.cq.wcm.api.designer.Style;
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.ScriptVariable;
import org.apache.sling.models.annotations.injectorspecific.Self;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.annotation.PostConstruct;

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class ImmersiveKeyStatsModel extends ComponentModel {
private static Logger LOGGER = LoggerFactory.getLogger(ImmersiveKeyStatsModel.class);

public final static String RESOURCE_TYPE = "cws/components/core/content/immersive-key-stats-component/v1/immersive-key-stats-component";

@Self
private Resource resource;

@ScriptVariable
protected Style currentStyle;


@PostConstruct
protected void init() {
LOGGER.debug("TestImmersiveKeyStats Model is initializing");

}

}

 

Here is a screenshot of my debug attempt using the JVM debugger

johns43992246_0-1717693894117.png

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Can you try adapting from request:

@Model(adaptables = SlingHttpServletRequest.class)

View solution in original post

10 Replies

Avatar

Correct answer by
Community Advisor

Can you try adapting from request:

@Model(adaptables = SlingHttpServletRequest.class)

Avatar

Level 3

It returns an object now that I include the adaptables for the SlingHttpServletRequest.class

I guess now I'm a little confused because properties associated with style are not quite what I thought they would be. I did this again using using teaser component and I defined allowed styles

johns43992246_0-1717776823072.png

I then set the Background Style to JET

johns43992246_2-1717777467001.png

 

I see in the JVM debugger this value map for currentStyle. There is no reference I can see the the Style classes getting applied to the component. Am I misunderstanding how this @ScriptVariable annotation works? Is there another way to get the actual class assignments for a component set via design dialog?

 

johns43992246_1-1717777370213.png

 

 

 

Avatar

Community Advisor

I think you want to retrieve the applied CSS classes, you might want to take a look at ComponentStyleInfo API https://developer.adobe.com/experience-manager/reference-materials/cloud-service/javadoc/com/adobe/c... 
Sample : https://github.com/adobe/aem-core-wcm-components/blob/277b972c11a9d73d397e886aad0fe817294d2d08/bundl... 
You will find plenty other examples, just have a quick google search  

Hope this helps

Avatar

Employee Advisor

Hi @johns43992246 ,

 

Please use the below code to get the appliedCSSstyles for your Sling Model. You can use adapter and self annotation to get component styles.

 

import com.adobe.cq.wcm.core.components.models.Component;

 

@Model(adaptables = SlingHttpServletRequest.class,

adapters = { ComponentExporter.class },

 

 

@Self

private Component component;

 

@Override

public String getAppliedCssClasses() {

return component.getAppliedCssClasses();

}

 

Hope this helps and answer your problem.

 

Avatar

Level 3

@Nikita___Garg Thanks for the suggestions but when I try to use the override I get this message:

 

Method does not override method from its superclass

 

 

johns43992246_0-1717905643413.png

 

Avatar

Community Advisor

Is this not working ? 

package com.cws.aem.core.models.v1.content;

import com.cws.aem.core.models.v1.ComponentModel;
import com.adobe.cq.wcm.style.ComponentStyleInfo;
import com.day.cq.wcm.api.designer.Style;

import org.apache.commons.lang3.StringUtils;
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.ScriptVariable;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.util.Optional;

import javax.annotation.PostConstruct;




@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class ImmersiveKeyStatsModel extends ComponentModel{
    private static Logger LOGGER = LoggerFactory.getLogger(ImmersiveKeyStatsModel.class);

    public final static String RESOURCE_TYPE = "cws/components/core/content/immersive-key-stats-component/v1/immersive-key-stats-component";


    @ScriptVariable
    protected Style currentStyle;

    @SlingObject
    protected Resource resource;

    @PostConstruct
    protected void init() {
        LOGGER.debug("TestImmersiveKeyStats Model is initializing");
        String cssClass = getAppliedCssClasses();

    }

    public String getAppliedCssClasses() {

    	return Optional.ofNullable(this.resource.adaptTo(ComponentStyleInfo.class))
    			.map(ComponentStyleInfo::getAppliedCssClasses)
    			.filter(StringUtils::isNotBlank)
    			.orElse(null);		
	}

}

Avatar

Level 3

@h_kataria yes that actually seems to do the trick. It helps quite a bit now. I was able to take my current resource and get the second parent resource, then apply that resource to the logic you provided. I can retrieve those CSS classes as well. Thanks, I cannot say how much this helps.

Avatar

Community Advisor

Hi @johns43992246 
Glad it worked out  
Could you also please mark my answer as accepted solution?

Avatar

Level 3

This is the solution that worked for me. I don't see an option though to mark as correct reply

Avatar

Administrator

@johns43992246 You can now mark the answer as correct. Thank you!! 



Kautuk Sahni