I am experimenting in my Rome PDI, trying to get a modal dialog to come up from a widget in the service portal.
The business requirement is to provide a way to view a summary of custom application information when viewing a related request item in the portal. The idea was to do this by adding a button on one of the standard portal widgets and showing a modal dialog that contains the relevant information from the custom app when the button is clicked.
After spending considerable time trying to get a UI page to work by following tutorials, I finally discovered UI pages don’t work in the portal – which is really where this is needed. So I switched to trying to use spModal().
I decided to use the "approval record" widget on the Approval Form. This widget was already displaying request item information. This is not really the page/widget that will ultimately be used, but it provided a good sandbox for prototyping. I cloned the existing “approval record” widget and replaced the original widget on the page
Added the following data elements in the server script:
data.showStatusButton = 'N'; // Indicates if the summary button should be shown for the current RITM
data.statusText = 'Not an TARGET request - no TARGET data available';
chkTARGET = new GlideRecord("sc_request");
chkTARGET.addQuery('sys_id', task.sys_id);
chkTARGET.query();
if(chkTARGET.next())
{
// For the sake of prototyping – identify Target Cis by looking for specific text in the description
if (chkTARGET.description == ‘TARTGET REQUEST')
{
data.statusText = '' + task.sys_id; /// Once woking… add code to build fully formatted HTML for target data
data.showStatusButton = 'Y';
}
}
Added these lines in the HTML template
<div ng-if="data.showStatusButton=='Y'">
<button type="button" name="status_popup" class="btn btn-default btn-question" ng-click="c.status_popup()">${Show current status}</button>
</div>
Finally, I added the client script changes to handle the button click
function ($scope, $animate, $rootScope)
{
var c = this;
c.status_popup = function(){
console.log('In status_popup');
spModal.alert('How do you feel today?').then(function (answer){
console.log(answer);
});
}
$scope.$watch("data.task", function(){
$scope.task = $scope.data.task; // copy for shortcuts above
}) // End $scope.$watch("data.task"
}
If I use a simple alert() call rather than spModal, it works fine. I would rather use an spModal dialog for access to additional formatting options. Unfortunately, the spModal does not work. I’ve tried adding $uibModal, to the function definition. There was no noticeable difference in performance. Here is the output in the console. You can see that the click function is called, the first console log works, but there is a reference error indicating spModal is not defined.
I
The documentation I’ve read so far indicates that spModal is designed to be used in widgets in the portal, so I’m assuming I’m missing something basic. Any assistance would be greatly appreciated.
