Core Container component not working on Author mode when extended for Background color and image in AEM React SPA project

[akashkriz005]

Hi Everyone ! 

I'm working on  AEM SPA approach with react 18 version in that we have a use case to provide background color , background image , id ,attribute etc to the author and pass these values as a json for the react component. 

As per the core container functionality , except the above mentioned properties remaining values are passing in the json generated such as the component authored inside the container its respective values etc. And moreover even if are enabling background image and other properties from the component policy level the values are only being stored in node level not coming in json. 

So extended the core container model and added the above properties , but after execution of the model I was able to pass those values in json from the nodes generated and all the responses as expected is coming. The major issue happened is with the author side that components authored in the container are not being visible in the author mode , but i can see the inner components response in json. 

Mentioning the extended code below

Impl Method

@Model(adaptables = SlingHttpServletRequest.class, adapters = { CustomContainer.class,

ComponentExporter.class }, resourceType = CustomContainerImpl.RESOURCE_TYPE, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

@exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)

public class CustomContainerImpl implements CustomContainer {

static final String RESOURCE_TYPE = "aemsampleproject/components/container";

@Self

public SlingHttpServletRequest request;

@Self

@Via(type = ResourceSuperType.class)

private LayoutContainer layoutContainer;

@ValueMapValue

private String backgroundImageReference, backgroundColor, id, roleAttribute, accessibilityLabel , layout;

public String getBackgroundImageReference() {

return backgroundImageReference;

}

public String getBackgroundColor() {

return backgroundColor;

}

public String getId() {

return id;

}

public String getAccessibilityLabel() {

return accessibilityLabel;

}

public String getLayoutType() {

return layout;

}

public LayoutContainer getLayoutContainer() {
return layoutContainer;
}

@Override

public String getExportedType() {

return CustomContainerImpl.RESOURCE_TYPE;

}

}

Interface method

@ProviderType

public interface CustomContainer extends LayoutContainer {

public String getBackgroundImageReference();

public String getBackgroundColor();

public String getId();

public String getAccessibilityLabel();

public String getLayoutType();

public LayoutContainer getLayoutContainer();

}

Am I missing anything above for the mentioned issue as only the components visibility authored in the container is getting missed out after this code execution.Could someone please help on this ? 

[Raja_Reddy]

Hi @akashkriz005 

1. Verify Resource Type: Make sure that the resource type of your extended container component (aemsampleproject/components/container) matches the resource type used in the template structure. If the resource types do not match, the components authored in the container may not be recognized correctly.

2. Check Component Policy: Ensure that the component policy for the container component is correctly configured to include the additional properties you have added (backgroundImageReference, backgroundColor, etc.). Verify that the properties are defined in the component policy dialog and that they are correctly mapped to the corresponding fields in the container component.

3. Check Component Policy Path: Confirm that the component policy path is correctly set for the container component. The component policy path should point to the location where the component policy is stored in the repository. If the path is incorrect, the component policy values may not be applied correctly.

4. Verify Component Inheritance: If you have extended the core container model, make sure that your extended model is correctly inheriting from the core container model. Check that the CustomContainerImpl class extends the appropriate core container class and that the necessary methods are overridden.

5. Check Component Dialog: Ensure that the component dialog for the container component is correctly configured to include the necessary fields for the additional properties. Verify that the dialog fields are correctly mapped to the corresponding properties in the container component.

6. Review Error Logs: Check the AEM error logs for any error messages related to the container component or its extended model. Look for any exceptions or warnings that may provide insights into the issue.

[akashkriz005]

Thank you so much for the information @Raja_Reddy !! 

Tried to check the resource type and the inheritance as well. Any methods are wrongly defined in the code part above are you suspecting ? Could you please have a look on the above ? 

[kautuk_sahni]

@akashkriz005 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[akashkriz005]

@kautuk_sahni - Still I am not able to find out the solution for this issue. Still working on my end. Please feel to share any comments or suggestions for this as well.