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

How to use a simple HTML component dynamically

Avatar

Level 1

I created a simple HTML component also I entered the embed google map HTML iframe script, But i have to use in dynamically in multiple pages. Could you please suggest a way.

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hi @sanzstark ,

 

  One of the easiest way to do this to create an content wrapper/include component that uses data-sly-resource to render the resource and take resource path(page path) as an input. 

 

bipinchandra92_0-1655491979924.png

 

You had to create an page with just your map iframe in AEM and pass the page path to the wrapper/include component. You can either include(path/to/resource) till resource at root(can be useful for the rendering other pages content Disadvantage: Components becomes authorable in the wrapper/include component) or at the component level(yours's map iframe component resource path Advantage: Component is not authorable in wrapper/include components). You can customize the same as per your requirements.

View solution in original post

3 Replies

Avatar

Level 3

@sanzstark  hi Sanz 

 hope this link helps you : https://experienceleague.adobe.com/docs/experience-manager-htl/using/getting-started/getting-started...

If you are not sure how deep your content structure is, you can use infinity.json to get data at all level.

It looks like current implementation returns all level response instead of actual data (Which could be huge).

For performance reason and security reason avoid using .infinity.json.

Avatar

Community Advisor

You can try to build using experience fragment and reuse it using ajax call or directly included using Experience Fragment component in the page



Arun Patidar

Avatar

Correct answer by
Level 4

Hi @sanzstark ,

 

  One of the easiest way to do this to create an content wrapper/include component that uses data-sly-resource to render the resource and take resource path(page path) as an input. 

 

bipinchandra92_0-1655491979924.png

 

You had to create an page with just your map iframe in AEM and pass the page path to the wrapper/include component. You can either include(path/to/resource) till resource at root(can be useful for the rendering other pages content Disadvantage: Components becomes authorable in the wrapper/include component) or at the component level(yours's map iframe component resource path Advantage: Component is not authorable in wrapper/include components). You can customize the same as per your requirements.