Based on the flag view should load either from react or AEM | Community
Skip to main content
July 3, 2024
Solved

Based on the flag view should load either from react or AEM

  • July 3, 2024
  • 1 reply
  • 636 views

There is one AEM component where HTML is getting load from the AEM component but the requirement is there should be some condition when it is true HTML should load from AEM component(i.e. sightly) and when condition is false HTML should load from the react component. 

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 pulkitvashisth

Hi @anamikap 
Considering your use case, you have both renditions of the component.
In one you are loading from react ( ui.frontend module ) and in another you are directly using HTL to show component HTML.
If that is the case you can modify your component HTL in such a way that when the flag is true you show the div with is the react container , thus react will pick up this container and load the component. And in case flag value is false, you can show just the HTL.

<sly data-sly-test="${properties.loadFromReactFlag}"> <div id="react-container"></div> </sly> <sly data-sly-test="!${properties.loadFromReactFlag}"> <p>Loaded from AEM</p> </sly>

 

1 reply

pulkitvashisth
Community Advisor
pulkitvashisthCommunity AdvisorAccepted solution
Community Advisor
July 3, 2024

Hi @anamikap 
Considering your use case, you have both renditions of the component.
In one you are loading from react ( ui.frontend module ) and in another you are directly using HTL to show component HTML.
If that is the case you can modify your component HTL in such a way that when the flag is true you show the div with is the react container , thus react will pick up this container and load the component. And in case flag value is false, you can show just the HTL.

<sly data-sly-test="${properties.loadFromReactFlag}"> <div id="react-container"></div> </sly> <sly data-sly-test="!${properties.loadFromReactFlag}"> <p>Loaded from AEM</p> </sly>