JSON Model Mapping for React AEM App | Community
Skip to main content
J
johna91
Level 2
May 2, 2019
Solved

JSON Model Mapping for React AEM App

  • May 2, 2019
  • 1 reply
  • 3401 views

Hello All,

I've been working on a react AEM app for my work, our model is based off the model from the wknd-events app in Getting Started with React and AEM SPA Editor​. Were currently trying to figure out how the server side and client side pass properties. We understand properties are getting mapped to a JSON model as mentioned in step 6 in Text Component​. So as far as the wknd-events app located in Getting Started with React and AEM SPA Editor​ is concerned, where are the props in the JSON model coming from? I'll place more details below:

  • ​
    • For example we have this items object with a text object inside. Inside of text we have a richText key-value pair. Where is this being set?
    • If I wanted to add a new key-value pair how would I do so?

Thanks All,

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Prince_Shivhare

I am currently working on a react and AEM integration, few things to share-

- we are using AEM as an authoring experience and generating the content as a service.

- In a component HTML, we are only defining the Java model call and JSON model.

- we are using sling models to generate the JSON of the component.

- so if any additional field is added in dialog or if you want to add any new property key-value pair in JSON then you will have to modify the component dialog as well as sling models.

- here the key is nothing but your dialog node property name. and value is authored content.

- The front end is generating through the React app.

~ Prince

1 reply

Prince_Shivhare
Community Advisor
Prince_ShivhareCommunity AdvisorAccepted solution
Community Advisor
May 2, 2019

I am currently working on a react and AEM integration, few things to share-

- we are using AEM as an authoring experience and generating the content as a service.

- In a component HTML, we are only defining the Java model call and JSON model.

- we are using sling models to generate the JSON of the component.

- so if any additional field is added in dialog or if you want to add any new property key-value pair in JSON then you will have to modify the component dialog as well as sling models.

- here the key is nothing but your dialog node property name. and value is authored content.

- The front end is generating through the React app.

~ Prince

    Terms & ConditionsAccessibility statement

    Loading footer...