How can I create a dialog window in Service Portal .

[Snow Developer2]

I have a requirement where I want a dialog window containing html contant to display on click of button in Service Portal.I am new to ServiceNow and have got to know that dialog does not work in portal. 

Please help!

[Shashank Vashi1 · Accepted solution]

Hi,

To create a dialog window in ServiceNow, Please use the below mentioned code in your widget in widget editor.Also please include $uibModal, and $scope in top function parameters if not already added.

Client Script:

var c=this;

c.openModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope
});
}
c.openModalType = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplateType',
scope: $scope
});
}
c.closeModal = function() {
c.modalInstance.close();
}

HTML Template:

Please include the below code in html template:

<script type="text/ng-template" id="modalTemplateType">
<div class="panel panel-default" style="background:#fff;color:#00A0D0;font-weight:bold;">
<div class="panel-heading">
<h4 class="panel-title">What Type of System do I have?</h4>
</div>
<div class="panel-body wrapper-xl">
<ul>
<h5>test text</h5>
</ul>
</div>
<div class="panel-footer text-right">
<button class="btn btn-primary" ng-click="c.closeModal()">${Close}</button>
</div>
</div>
</script>

 

 

[Snow Developer2]

Thanks for your help 🙂

[Snow Developer2]

This is exactly what I wanted to do. Thanks much.

[Prashant42]

I have created a modal using the above mentioned code. By using spUtil.get() am populating the record producer on the modal. In record producer, their are two string fields which I want to be empty whenever I load the modal. Can you tell me how can I achieve it?

[verdakosnett]

Most of the examples related to  $uibModal show a static text box. Here is an option with dynamic content. Place the following in the client script to display two variables as dynamic content (in this case 'question' and 'answer'). Format the entire box in the client script. 

function($uibModal,  $scope)
{
var c = this;

c.showQuestion=function(question, answer)
{
c.modalInstance = $uibModal.open({
template:'<div class="panel panel-default" style="border-color: #FFFFAD;"><button type="button" class="close" ng-click="c.closeModal()">&times;</button><div class="panel-heading" style="font-weight:bold;box-shadow: 0px 0px 10px #888;background-color: #FFFFAD">Question: '+question+'</div><div class="panel-body wrapper-xl">'+answer+'</div><div class="panel-footer text-right"><button class="btn btn-primary" ng-click="c.closeModal()">${Close}</button></div></div>',
scope: $scope
});
}
c.closeModal = function() {
c.modalInstance.close();
};