Search code examples
adobeaemsightlyhtl

HTL -how to display a page on another page like popup / modal


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.


Solution

  • 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