Using spModal and $uibModal in ServiceNow Service Portal

Alka_Chaudhary · 3 hours ago

Introduction

Modals are an important part of ServiceNow Service Portal development. They allow users to interact, confirm actions, and provide inputs without navigating away from the current page.

ServiceNow Service Portal commonly uses two approaches for modals:

spModal – ServiceNow-provided modal service
$uibModal – Angular UI Bootstrap modal service

This article explains both approaches, along with how $uibModal works with templateUrl, ng-template, and how data is passed from the modal back to the widget.

Understanding spModal

spModal is a native ServiceNow wrapper service designed specifically for Service Portal. It follows ServiceNow UX standards and is very easy to use.

Advantages of spModal

Simple implementation
Service Portal–consistent UX
No manual lifecycle handling
Supports alerts, confirmations, custom messages, and widgets

spModal Examples

Alert Modal

$scope.showAlert = function () {
  spModal.alert('Hello Everyone!');
};

Confirmation Modal

$scope.showConfirm = function () {
  spModal.confirm('Do you want to delete this record?')
    .then(function (answer) {
      if (answer) {
        spModal.alert('Record is deleted');
      } else {
        spModal.alert('Cancelled');
      }
    });
};

Custom spModal with HTML Content

$scope.customModal = function () {
  spModal.open({
    title: 'Welcome Message',
    message: '<b>Hello</b><br><h1>Everyone</h1>',
    buttons: [{ label: 'Close', value: true }]
  });
};

Opening Another Widget in spModal

$scope.openAnotherWidget = function () {
  spModal.open({
    title: 'Open Another Widget',
    widget: 'project-widget',
    buttons: []
  });
};

Understanding $uibModal

$uibModal comes from Angular UI Bootstrap and provides more flexibility compared to spModal. It is useful when the requirement involves complex UI or user input handling.

When to Use $uibModal

Collecting user input
Creating complex forms inside modals
Custom designs and behavior
Passing structured data back to the widget

Using $uibModal with templateUrl in Service Portal

In Service Portal, $uibModal uses templateUrl to load modal content. Instead of an external HTML file, Service Portal typically uses an Angular ng-template within the widget.

$scope.uibModalExample = function () {
  var modalInstance = $uibModal.open({
    templateUrl: 'employee_modal',
    controller: function ($scope, $uibModalInstance) {

      $scope.feedback = {};

      $scope.submit = function () {
        $uibModalInstance.close($scope.feedback);
      };

      $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };
    }
  });

  modalInstance.result.then(function (result) {
    $scope.showFeedBack = result.comment;
  });
};

Defining Modal UI Using ng-template

The templateUrl value must match the id of the ng-template.

<script type="text/ng-template" id="employee_modal">
  <div class="title-header">Employee Feedback</div>

  <textarea class="form-control"
            ng-model="feedback.comment">
  </textarea>

  <button class="btn btn-warning" ng-click="submit()">
    Submit
  </button>

  <button class="btn btn-info" ng-click="cancel()">
    Cancel
  </button>

  <style>
    .title-header {
      font-weight: 600;
    }
  </style>
</script>

How This Works

id="employee_modal" links the template to templateUrl
The modal UI is handled within Angular
submit() and cancel() functions are controlled by the modal controller

Data Binding Inside the Modal

<textarea ng-model="feedback.comment"></textarea>

feedback is an object created inside the modal controller
feedback.comment stores user input
Angular automatically updates data as the user types

Passing Data from Modal to Widget

Closing the Modal with Data

$uibModalInstance.close($scope.feedback);

This sends the feedback object back to the widget.

Receiving Data in the Widget

modalInstance.result.then(function (result) {
  $scope.showFeedBack = result.comment;
});

result contains the data returned from the modal
The value can be displayed or processed as needed

Conclusion

Both spModal and $uibModal are powerful tools in ServiceNow Service Portal. Choosing the right one depends on the requirement complexity. Understanding templateUrl, ng-template, and data exchange helps developers build clean, efficient, and user-friendly modal experiences.