Hello all,
I've been playing around with showing the contents of an html field in a modal window in the sc_cat_item page in the portal. I have tried to use a template to render the information and just passing the sys_id to a different widget but still not able to actually show the html content as it should appear. All I see is the html tags and the content.
I have come across information for $sce.trustAsHtml thinking that it may do something but not sure how it would work with an ng-click in the widget.
Ideally, the user would just click a button and the HTML content would display in a modal pop up. Below is what I have done... is it actually possible to do this?
html:
<div>
<a href="javascript:void(0)" ng-click="c.openOverlay($event)">
<button type="button"
class="btn btn-outline-warning btn-xs"
style="font-size:1.5em">
<i ng-class="c.data.favIcon"
uib-tooltip="{{::c.data.tooltip}}"
tooltip-placement="bottom">
</i>Help Me Choose
</button>
</a>
</div>server script:
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.favIcon = 'fa fa-hand-pointer-o';
data.tooltip = 'Need help making a selection?';
var cat_sys_id = $sp.getParameter('sys_id');
console.log(cat_sys_id);
data.catSysID = cat_sys_id;
})();controller:
function(spModal) {
var c = this;
var item = c.data.catSysID;
var itemID = JSON.stringify(item);
console.log(itemID);
c.openOverlay = function($event){
//open modal
spModal.open({
widget: 'dg_help_me_choose',
//pass id to widget
widgetInput: { sys_id:itemID },
//force modal to large size
size: 'lg'
});
};
}
then, this is the widget where I am sending the sys id
<div class="panel panel-{{options.color}} b">
<div class="panel-heading">
<h2 class="panel-title h4">
<span class="pull-left">Help me Choose</span>
</h2>
</div>
<div class="panel-body m-b-lg wrapper-lg">
<div class="row m-b-lg b-b">
<ng-bind-html>
{{::data.optionsField}}
</ng-bind-html>
</div>
</div>server script:
//var t = data;
data.testing = "testing --- " + input.sys_id.toString();
var idStr = input.sys_id;
var newIDStr = idStr.replace(/['"]+/g, '');
data.newtesting = "testing -- " + newIDStr;
console.log("server script");
var itemID = new GlideRecord('sc_cat_item');
itemID.addQuery('sys_id', newIDStr);
itemID.query();
if(itemID.next()){
console.log("Found item");
console.log("options: " + itemID.u_user_options.getDisplayValue());
data.optionsField = itemID.u_user_options.getDisplayValue();
}
this is what the button would look like:
This is the modal:
ideally, it should look like this:
Any advice or suggestions would be very helpful!
Thank you!
Yen
Hi Tom!
Ah! That is exactly right! Thank you! That is exactly what I needed to understand how to get the html to show up!
This is what i added to the client:
$scope.html = '<p>' + c.data.optionsField + '</p>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);and html
<div class="panel-body modal-xl">
<div ng-bind-html="trustedHtml">
</div>
</div>
and that did it! now I just have to style the content in the html field on how i want it to look! 🙂
Thank you so much!
Yen
