Multifield Values Not Appearing in Page model.json in AEM Remote SPA

[Mukesh42]

Hello everyone,

I am facing an issue with multifield values not appearing in the model.json of a page in an AEM Remote SPA setup. I have created custom Sling models for my components, and everything works fine when I directly call the component's model.json. However, when the component is included in the responsivegrid of a page, the multifield values do not appear in the page's model.json.

Detailed Issue:

Direct Component Addition: When I add a component directly to the page from React code, the model.json for the component is called and includes all the multifield values as expected (matching the Sling model).

Responsivegrid Addition: When the same component is added in the page via the responsivegrid, the page's model.json is called but does not include the multifield values. This JSON is generated automatically by AEM and does not consider the custom Sling model.

What might be causing the multifield values to not appear in the page's model.json? Are there additional configurations or steps required to ensure multifield data is included in the page model?Any help or guidance would be greatly appreciated. Thank you!

[EstebanBustamante]

Hi, 

Are you seeing any issues in the browser console or on the logs? Would be possible to share a screenshot about the issue?

[Mukesh42]

Hi @EstebanBustamante ,

I am checking this in the browser network tab and also directly hitting the 'model.json' endpoints.

Ex: 

1. "http://localhost:4502/content/project/us/en/home.model.json"

When I hit this endpoint, I get the details of all the components and their values on the page. However, the multifield values are not appearing.

2."http://localhost:4502/content/project/us/en/home/jcr:content/root/responsivegrid/componentname.model... 

When I hit this endpoint, I get the values of the multifield as expected.

How can i make changes in the home page model.json

[pulkitvashisth]

Hi @Mukesh42 
I think your question might be answered here

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-spa-react-nested-m...

[h_kataria]

Is your Sling model nesting another Sling model as well ? For e.g. for your multifield data ? 

[Mukesh42]

Yes I have tried with another sling model and without another sling model.

[h_kataria]

Is it possible to share your sling model here ? and if you have used @inject   to inject some properties for you multifield data, can you try replacing it with @ValueMapValue

[kautuk_sahni]

@Mukesh42 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you! 

[Ashwani-Agrawal]

@kautuk_sahni : Do you have any suggestions for this issue ? This thread doesn't provide any proper solution and I am also facing the same issue. Tried multiple things and everything mentioned in this thread but its still not working. I am not able to expose multifield nodes in the page.model.json. It works fine when I hit component.model.json.

[Mukesh42]

@Ashwani-Agrawal Even after raising the ticket with adobe we did not get the proper response, and they were mentioning it was the expected behavior and things like that. Let me know if you find any solution for this.

[Ashwani-Agrawal · Accepted solution]

Hi @Mukesh42 : Yes, I got it working for myself. One thing I was missing in my code was 

adapters = {ComponentExporter.class}

After I added this, it started showing multifield values in page.model.json.

So collectively, I am using @ValueMapValue instead of @inject, Sling Model should implement ComponentExporter and @Model annotation should have adapters = {ComponentExporter.class}. Snippet is as below

@Model(adaptables = {Resource.class, SlingHttpServletRequest.class}, adapters = {ComponentExporter.class},
        resourceType = <YOUR JAVA CLASS>.RESOURCE_TYPE,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
)

public class <YOUR JAVA CLASS>implements ComponentExporter