3

I'm trying to use existing page (selected with pathbrowser from TouchUI) as a popup / modal on my HTL page. Is there a way of adding / injecting HTML from different file using sightly ? It's more about sightly and rendering that html on the page rather then how to build dialogue window.

fernando
  • 814
  • 1
  • 9
  • 24

2 Answers2

7

What you need is to include the content (not the template) within your page, preferrably using data-sly-resource with the path of your page (/content/myapp/content/myPageIwantToDisplayAsModal). this will render the relevant html on your page - remember that in AEM the content knows how to display itself - so as said above you only need to reference the content

Probably you could also utilise the use of selectors not to display the whole html along with <head> section and unneeded <body> tag

so for example:

<div data-sly-resource="${'/content/myapp/content/myPageIwantToDisplayAsModal' @ selectors=['content']}"></div>

for referrence go here https://docs.adobe.com/docs/en/htl/docs/block-statements.html

ub1k
  • 1,674
  • 10
  • 14
2

One way would be to use reference component and inject the HTML of the referenced page. Then you could wrap/style it as a popup using JS/CSS magic.

Imran Saeed
  • 3,414
  • 1
  • 16
  • 27