Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

JSON Model Mapping for React AEM App

johna91
Level 2
Level 2

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:

  • 1744719_pastedImage_6.png
    • 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,

1 Accepted Solution
Prince_Shivhare
Correct answer by
Community Advisor
Community Advisor

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

View solution in original post

1 Reply
Prince_Shivhare
Correct answer by
Community Advisor
Community Advisor

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

View solution in original post