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 access html fragment file in another component via source code

Avatar

Level 1

Greetings!!

 

I am creating a modal using an hbs template file.  In the modal I want to use an html file as the modal-body.  

 

Both files exist in the ui.apps project.  

 

I have tried div.load() in javascript client-libs as well as data-sly-include and data-sly-resource in the hbs and cannot properly access the html file.  

 

Any suggestions on how to get this connected properly??  

 

Thank you,

 

-Daniel

1 Accepted Solution

Avatar

Correct answer by
Level 8

Hi @dj_datum ,

You need to include html in handlerbar script tag itself, if you are trying include inside script tag then it will not be evaluated & included as html file. please check below code. 

 

<script id="modal-popup-id" type="text/x-handlebars-template"
data-sly-include="/apps/{project}/{file location}/modal-popup.html">
</script>

 

Include html file in Modal Popup html:

<div class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>

<sly data-sly-include="/apps/{project}/{file location}/popup-body.html"/>
</div>
</div>

 

Hope this helps!

View solution in original post

1 Reply

Avatar

Correct answer by
Level 8

Hi @dj_datum ,

You need to include html in handlerbar script tag itself, if you are trying include inside script tag then it will not be evaluated & included as html file. please check below code. 

 

<script id="modal-popup-id" type="text/x-handlebars-template"
data-sly-include="/apps/{project}/{file location}/modal-popup.html">
</script>

 

Include html file in Modal Popup html:

<div class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>

<sly data-sly-include="/apps/{project}/{file location}/popup-body.html"/>
</div>
</div>

 

Hope this helps!