$uibModal embed HTML content [external content] on widget

[Dana Israeli]

hey there 

i have a widget with that code:

HTML:

<script type="text/ng-template" id="modalTemplate">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Bynet Terms Confirmation</h4>
</div>
<div class="panel-body wrapper-xl">

</div>
<div class="panel-footer text-right">
<button class="btn btn-primary" ng-click="c.closeModal()">${Approve}</button>
</div>
</div>
</script>

client: 

c.openModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
size: 'lg',
scope: $scope
});
}

c.closeModal = function() {
c.modalInstance.close();
c.data.open = true;
c.data.action = 'approved';
$scope.server.update().then(function() {});

}

I want to embed on the modal window data from external file

i can copy the data to HTML but i dont want to save it on the widget

i want to load it from outside the widget 

it is "Terms and conditions" file

any ideas?

[Rishabh Jha]

Hi @Dana Israeli,

Yep, you can definitely do that. I've done similar stuff in one of my portal widgets. On the client script, you'd need to use the "template" property of the $uibModal, and set it to the variable that holds the HTML content of your file.

Please see the snippet below:

c.openModal = function() {
  c.modalInstance = $uibModal.open({
    template: $scope.data.htmlContent, //this is your variable containing the file's HTML content
    size: 'lg',
    scope: $scope
  });
}

Thanks & Regards,

Rishabh Jha

Aavenir (https://www.aavenir.com/)

[Dana Israeli]

can you explain the steps of what to do?

can you share the HTML code too? 

[Rishabh Jha]

Hi @Dana Israeli,

In my scenario, I was calling an API to get the HTML content for a document, and then opening that content in the modal dialog.

Where is your file located? I assume on the sys_attachment table, associated to some record?

So basically, on the server script of your widget, you can get the attachment's base64 content by querying the sys_attachment table, then convert that to HTML using any third party javascript library (https://github.com/lalalic/docx2html). You'd need to add that third party javascript file as your widget's dependency, in a JS include. Then, it's just the matter of calling the method to convert the base64 to HTML, and storing that HTML to your server side data variable (data.htmlContent). 

Then, like I've mentioned in my previous response, you can use that variable to set the template variable of the uibModal, and it should display the HTML content of your file.

Thanks & Regards,

Rishabh Jha

Aavenir (https://www.aavenir.com/)

[Rishabh Jha]

Also, if your file's content is static, and you don't expect it to change, you can just use any of the free online converters to get the HTML content of your file (https://onlineconvertfree.com/convert-format/docx-to-html/), just google for "convert docx to HTML online", and then put that HTML directly to a variable. Then just use that variable for setting the template property of the $uibModal.

Thanks & Regards,

Rishabh Jha

Aavenir (https://www.aavenir.com/)