Community Advisor and Adobe Champion

Question

AEM React SPA Container Component Not Showing Dialog Fields in Model.json

Forum|Forum|9 months ago
April 22, 2025
4 replies
857 views

In our AEM React SPA project, we're facing an issue where the dialog fields are not appearing in the model.json when fetching data for a container component. Despite the dialog being configured properly, the model doesn't expose the fields as expected.

model.json

"container": {
              "columnClassNames": {
                "promobanner": "aem-GridColumn aem-GridColumn--default--12"
              },
              "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
              "columnCount": 12,
              "allowedComponents": {
                "components": [],
                "applicable": false
              },
              ":items": {
                "promobanner": {
                  "fileReference": "/content/dam/mysiteLogo.jpeg",
                  "altText": "mysite",
                  "title": "Mysite",
                  "subtitle": "test",
                  "description": "test",
                  "buttonLink": "#",
                  "buttonLabel": "test",
                  "cardBgColour": "#7EO20C",
                  "cardTextColour": "#ECE3D6",
                  ":type": "mysite/components/promobanner"
                }
              },
              ":itemsOrder": [
                "promobanner"
              ],
              ":type": "mysite/components/container"
            },

I also tried using delegation (@Self with @2434638(type = ResourceSuperType.class)) in the Sling Model

@Self
@Via(type = ResourceSuperType.class)
@Delegate(types = Container.class, excludes = Excluded.class)
private Container container;

but that approach didn't resolve the issue.

Has anyone encountered a similar issue or knows of any specific configurations that might be causing this behavior?

sravs

Community Advisor

Hi @mayursatav ,

Please review this document https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/extend-component and confirm if your sling model has been implemented in the same manner to export the additional properties to model.json.

MayurSatav

Author

Community Advisor and Adobe Champion

@sravs ,

I’ve applied all the suggested fixes and explored every possible solution. Below is the implementation of my exporter model.

package com.mysite.core.models;

import com.adobe.cq.export.json.ComponentExporter;
import com.adobe.cq.export.json.ContainerExporter;
import com.adobe.cq.export.json.ExporterConstants;
import com.adobe.cq.wcm.core.components.models.Component;
import com.adobe.cq.wcm.core.components.models.Container;
import lombok.Getter;
import lombok.experimental.Delegate;
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.ExporterOption;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Via;
import org.apache.sling.models.annotations.injectorspecific.Self;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import org.apache.sling.models.annotations.via.ResourceSuperType;

import javax.inject.Inject;
import java.util.Collections;
import java.util.List;
import java.util.Map;

@Model(
        adaptables = {SlingHttpServletRequest.class, Resource.class},
        adapters = {CustomContainer.class, ComponentExporter.class, ContainerExporter.class},
        resourceType = CustomContainer.RESOURCE_TYPE,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
)
@Exporter(
        name = ExporterConstants.SLING_MODEL_EXPORTER_NAME,
        extensions = ExporterConstants.SLING_MODEL_EXTENSION,
        options = {
                @ExporterOption(name = "MapperFeature.SORT_PROPERTIES_ALPHABETICALLY", value = "true"),
                @ExporterOption(name = "SerializationFeature.WRITE_DATES_AS_TIMESTAMPS", value = "false")
        }
)
public class CustomContainer implements ComponentExporter, ContainerExporter {

    public static final String RESOURCE_TYPE = "mysite/components/customContainer";

    interface Excluded {
        String getExportedType();
        List<Component> getChildren();
    }

    @Self
    @Via(type = ResourceSuperType.class)
    @Delegate(types = Container.class, excludes = Excluded.class)
    private Container container;

    @Inject
    private SlingHttpServletRequest request;

    @Getter
    @ValueMapValue
    private String id;

    @Getter
    @ValueMapValue
    private String backgroundColor;

    @Getter
    @ValueMapValue
    private String backgroundImageReference;

    @Getter
    @ValueMapValue
    private String accessibilityLabel;

    @Override
    public String getExportedType() {
        return request.getResource().getResourceType();
    }

    @Override
    public Map<String, ? extends ComponentExporter> getExportedItems() {
        return container != null ? container.getExportedItems() : Collections.emptyMap();
    }

    @Override
    public String[] getExportedItemsOrder() {
        return container != null ? container.getExportedItemsOrder() : new String[0];
    }

    @Override
    public List<Component> getChildren() {
        return container != null ? container.getChildren() : Collections.emptyList();
    }
}

iamnjain

Community Advisor

Hey @mayursatav

I am wondering, why are you using both the adaptables in your model. Can you try using only SlingHttpServletRequest adaptables?

Can you implements only with ComponentExporter this sling model?

Let me know if this helps 🙂

J

JulkarNa1

Hi @mayursatav,
I’ve previously addressed the issue you mentioned. Check out this commit for the implementation details.
https://github.com/julkar-naim/aem-react-spa-tutorials/commit/1358dcdb4f0ed0a0b9e6abe42b183f6cd6014cf4

Regards,

Naim

MayurSatav

Author

Community Advisor and Adobe Champion

@julkarna1 ,I already tried with responsive grid approach but it is creating unnecessary layout container around components.

J

JulkarNa1

@mayursatav , Can you elaborate? I am not sure what you mean by "unnecessary layout container around components". As you are extending container/responsivegrid, isn't it expected?

kautuk_sahni

Community Manager

@mayursatav Just checking in — were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!

Kautuk Sahni

K

kuraniayushi

Did any of the solution worked for you?

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded