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

[MayurSatav]

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 @Via(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]

Hi @MayurSatav ,

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

[MayurSatav]

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

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

[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/1358dcdb4f0ed0a0b9e6abe42b183f6cd6014c... 

Regards,

Naim

[MayurSatav]

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

[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]

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