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

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

Avatar

Avatar
Validate 1
Level 1
dj_datum
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
dj_datum
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
dj_datum
Level 1

12-01-2021

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Give Back 3
MVP
Manjunath_K
MVP

Likes

139 likes

Total Posts

188 posts

Correct Reply

61 solutions
Top badges earned
Give Back 3
Give Back
Boost 50
Boost 5
Boost 3
View profile

Avatar
Give Back 3
MVP
Manjunath_K
MVP

Likes

139 likes

Total Posts

188 posts

Correct Reply

61 solutions
Top badges earned
Give Back 3
Give Back
Boost 50
Boost 5
Boost 3
View profile
Manjunath_K
MVP

12-01-2021

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!

Answers (0)