convert static HTML page in iframe to AEM component based

Forum|Forum|4 years ago
January 22, 2022
4 replies
3454 views

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.

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 Rajalakshmi

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?lang=en

Similar community discussion

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/foundation-component-vs-core-component-in-aem6-5/td-p/364019

VeenaVikraman

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-develop/overview.html

A

anuradha3Author

Level 2

Thank you.

B_Sravan

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).

VeenaVikraman

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.

RajalakshmiAccepted solution

Level 2

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?lang=en

Similar community discussion

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/foundation-component-vs-core-component-in-aem6-5/td-p/364019