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

convert static HTML page in iframe to AEM component based

Avatar

Level 2

currently we are using static html page in iframe, we need to remove iframe and make it  as AEM component based.How to do this? please provide the solution.I am new to the AEM. Thanks in Advance.

 

1 Accepted Solution

Avatar

Correct answer by
Level 3

Hey @anuradha3, based on the functionality of the iframe you can choose the similar respective core components and reuse it in your project else you can overlay those core components and tweak it accordingly.

FYR, you can follow these helping Adobe documentation to know much about core components. 

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/introduction.html?l...

 

Similar community discussion 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/foundation-component-vs-co...

 

View solution in original post

8 Replies

Avatar

Community Advisor

@anuradha3 Welcome to AEM. You have to take that static HTML and convert the same into editable templates and components . If you are not sure how to go about it , you can check these tutorials https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-devel...

 

Avatar

Community Advisor

Hi @anuradha3,

 

Since you were using the static page as an iframe and now you want to do it as a component, there are a few solutions for this that I can think of immediately.

1. Use the OOB (out of the box) component, in other words - the core component called RTE (Rich Text Editor).

drag this component on the page and dump the html in the source code of this component text area. Doing this way, you can edit the html when ever needed.

 

2. Break the static page into components and author it accordingly. 

Since you are new to AEM, breaking the static page into templates and components, you can learn a lot in that process. If you want this to be done ASAP, you can use the RTE component (one single component for the entire page).

Avatar

Community Advisor

@B_Sravan There is a drawback with the approach 1, I assume when @anuradha3 mentioned static page HTML, I assume it is the full HTML from <head> tag till end of the HTML Document. If that is the case, putting it in RTE might not work. What can be done in that case is to add only the relevant HTML. But RTE has XSS validations and may strip off some HTMLs or links depending on what you add. 

Avatar

Correct answer by
Level 3

Hey @anuradha3, based on the functionality of the iframe you can choose the similar respective core components and reuse it in your project else you can overlay those core components and tweak it accordingly.

FYR, you can follow these helping Adobe documentation to know much about core components. 

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/introduction.html?l...

 

Similar community discussion 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/foundation-component-vs-co...

 

Avatar

Community Advisor

@anuradha3 ,

 

As suggested by @B_Sravan , totally I agree and accept with his solution.

That's good and easy way to achieve what you want to.

 

Thanks,

Aruna