Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

How to access html fragment file in another component via source code

dj_datum
Level 1
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
Manjunath_K
Correct answer by
Community Advisor
Community Advisor

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
Manjunath_K
Correct answer by
Community Advisor
Community Advisor

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