Using @ScriptVariable to get styles from design dialog selections

[johns43992246]

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

[h_kataria · Accepted solution]

Can you try adapting from request:

@Model(adaptables = SlingHttpServletRequest.class)

[johns43992246]

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

I then set the Background Style to JET

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?

[h_kataria]

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

[Nikita___Garg]

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.

[johns43992246]

@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

[h_kataria]

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);		
	}

}

[johns43992246]

@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.

[h_kataria]

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

[johns43992246]

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

[kautuk_sahni]

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