How to add a rich modal dialog to service portal - ajcooper72/ServiceNow GitHub Wiki

This article explains how to implement a rich modal dialog to the service portal. Out of the box spModal is easy to use, but doesn't offer much in the way of configuring.

Client Script

The client script simply creates the dialog and handles the close request. It exposes a feedback() function to be called from the HTML.

function($uibModal) {
    var c = this;

    c.feedback = function() {
        c.modalInstance = $uibModal.open({
            templateUrl: 'language_feedback.html',
            controller: feedbackController,
            controllerAs: 'd'
        });
    };

    var feedbackController = function() {
        var d = this;

        d.submitFeedback = function() {
            if(d.comment != ''){

                console.log(d.comment);

                // Do something with the data

                c.modalInstance.close();
            }
        };

        d.closeModal = function() {
            c.modalInstance.close();
        };
    };
}

feedback.html

This contains the HTML that is used to form the dialog box.

<div class="panel panel-default"> 

  <div class="modal-header">
    <h3 class="modal-title" id="feedback-modal-title">${Feedback}</h3>
  </div>

  <div class="modal-body" id="feedback-modal-body">
    <div class="form-group">
      <label for="feedback">${Please provide your feedback}</label>
      <textarea id="feedback" ng-model="d.comment" class="form-control" rows="4"></textarea>
    </div>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" ng-click="d.closeModal()">${Close}</button>
    <button class="btn btn-primary" ng-click="d.submitFeedback()">${Submit}</button>
  </div>

</div>

HTML Template

Finally, just the script to call the dialog.

<div>
  <a href="javascript:void(0)" ng-click="c.feedback()">${Feedback}</a>
</div>
⚠️ **GitHub.com Fallback** ⚠️