How to access html fragment file in another component...

[dj_datum]

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

[Manjunath_K · Accepted solution]

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!