Sling Model mapping not working with SPA react

Question

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";

@586265
    private String sectionHeading;

@586265
    private String bannerTheme;

@586265
    private Boolean isPng8;

@586265
    private Boolean fullScale;

@Nonnull
    @9944223
    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 Answer

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
    @9944223
    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;
    }
}

BrianKasingli · Answer

@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-guideHappy Coding!

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded