Sling Model mapping not working with SPA react

[ashish_mishra1]

HI I am trying to implement the AEM Sling model with react but when I am doing this.props in my react I am seeing only this "{"cqType":"wknd-events/components/content/countdownclock","cqPath":"/content/wknd-events/react/home/jcr:content/root/responsivegrid/countdownclock","isInEditor":true}" , my sling model getter methods are not getting added in the JSON, below is the sling model code - 

package com.adobe.aem.guides.wkndevents.core.models;

import com.adobe.cq.export.json.ComponentExporter;
import com.adobe.cq.export.json.ExporterConstants;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
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.Exporter;
import org.apache.sling.models.annotations.Model;
import javax.annotation.Nonnull;
import javax.inject.Inject;
import javax.inject.Named;

@Model(
        adaptables = {SlingHttpServletRequest.class,Resource.class},
        adapters = { CountdownClockModel.class, ComponentExporter.class },
        resourceType = CountdownClockModel.RESOURCE_TYPE,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME,
        extensions = ExporterConstants.SLING_MODEL_EXTENSION
)
@JsonSerialize(as = CountdownClockModel.class)
public class CountdownClockModel implements ComponentExporter{

    static final String RESOURCE_TYPE = "wknd-events/components/content/countdownclock";

    @inject
    private String sectionHeading;

    @inject
    private String bannerTheme;

    @inject
    private Boolean isPng8;

    @inject
    private Boolean fullScale;

    @Nonnull
    @Override
    public String getExportedType() {
        return RESOURCE_TYPE;
    }

    public static String getResourceType() {
        return RESOURCE_TYPE;
    }

    public String getSectionHeading() {
        return sectionHeading;
    }

    public String getBannerTheme() {
        return bannerTheme;
    }

    public Boolean getPng8() {
        return isPng8;
    }

    public Boolean getFullScale() {
        return fullScale;
    }

}

Please help.

[arunpatidar · Accepted solution]

Adapt component using SlingHttpServletRequest only and insteadof inject use ValueMapValue

Example - 

import com.adobe.cq.export.json.ComponentExporter;
import com.adobe.cq.export.json.ExporterConstants;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
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.Exporter;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

import javax.annotation.Nonnull;
import javax.inject.Inject;
import javax.inject.Named;

@Model(
        adaptables = SlingHttpServletRequest.class,
        adapters = { CountdownClockModel.class, ComponentExporter.class },
        resourceType = CountdownClockModel.RESOURCE_TYPE,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME,
        extensions = ExporterConstants.SLING_MODEL_EXTENSION
)
@JsonSerialize(as = CountdownClockModel.class)
public class CountdownClockModel implements ComponentExporter{

    static final String RESOURCE_TYPE = "wknd-events/components/content/countdownclock";

    @ValueMapValue
    private String sectionHeading;

    @ValueMapValue
    private String bannerTheme;

    @ValueMapValue
    private Boolean isPng8;

    @ValueMapValue
    private Boolean fullScale;

    @Nonnull
    @Override
    public String getExportedType() {
        return RESOURCE_TYPE;
    }

    public static String getResourceType() {
        return RESOURCE_TYPE;
    }

    public String getSectionHeading() {
        return sectionHeading;
    }

    public String getBannerTheme() {
        return bannerTheme;
    }

    public Boolean getPng8() {
        return isPng8;
    }

    public Boolean getFullScale() {
        return fullScale;
    }
}

[GonzaloCalandria]

Why Inject must be changed by ValueMapValue?

[BrianKasingli]

@ashish_mishra1,

Instead of using @inject in various places, it's recommended to get used to Apache’s Sling Model injector specific annotations! https://sourcedcode.com/aem-sling-model-injectors-annotations-reference-guide

Happy Coding!

[ashish_mishra1]

Thanks for the help, It worked now