Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

AEM with react

Avatar

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

Avatar

Correct answer by
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

Avatar

Correct answer by
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.

 

Avatar

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