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

Learn more

View all

Sign in to view all badges

SOLVED

AEM with react

Sandeep6
Level 5
Level 5

Hi all,

 

In my project, we are using AEM 6.4 with react. From aem we are exposing data to react as data props like below

<div data-component='changeAssessmentDetails' data-props='
{
"changeAssessmentTitle":"Change your assessment",
"cancelButtonbgColor":"#e3e000"
}
'></div>

 

In react, they are creating component using component name(changeAssessmentDetails) what we have exposed.

Now I got a requirement to show different UI for same component. I can send one field from aem as a data property. 

Based on that property ,Is it possible to show different UI in react?

Note: Data component name should be same in both the cases.

Thanks in advance. 

1 Accepted Solution
Umesh_Thakur
Correct answer by
Community Advisor
Community Advisor

If different UI means only look and feel then you can easily do it as just css class needs to be added. only thing you need to do is, from the data property get the value and based on the value you need to add css class for different UI.

 

View solution in original post

3 Replies
Umesh_Thakur
Correct answer by
Community Advisor
Community Advisor

If different UI means only look and feel then you can easily do it as just css class needs to be added. only thing you need to do is, from the data property get the value and based on the value you need to add css class for different UI.

 

View solution in original post

Umesh_Thakur
Community Advisor
Community Advisor

I am providing similar stuff in window object

 

let say you have one window object window.demo.example = {

backgroundColor="red"

}

in React:

inside didmount or where ever you want

get the object like

let object = window.demo.example.backgroundColor;

if(object==="red")

{

   <dive className="firstUi" >

</div>

}

else

{

<dive className="secondUi" >

</div>

}

 

NOTE: Since your data element will always be there in your dom so you can parse it with vanilla js

hope this will help