spModal - Client

The spModal class provides an alternative way to show alerts, prompts, and confirmation dialogs. The SPModal class is available in Service Portal client scripts.

You can use spModal.open() to display a widget in a modal dialog. The spModal class is a lightweight wrapper for Angular UI bootstrap's $uibModal.

spModal - alert(String message).then(fn)

Displays an alert.

Table 1. Parameters
Name Type Description
message String The message to display.
Table 2. Returns
Type Description
Boolean The promise contains a single argument that contains true or false.
// HTML template 
<button ng-click="c.onAlert()" class="btn btn-default">
    Alert
  </button>

// Client script
function(spModal) {
    var c = this;
  c.onAlert = function () {
        spModal.alert('How do you feel today?').then(function (answer) {
            c.simple = answer;
        });
    }
 }

spModal - confirm(String message).then(fn)

Displays a confirmation message.

Table 3. Parameters
Name Type Description
message String The message to display.
Table 4. Returns
Type Description
Boolean The promise contains a single argument that contains true or false.
// HTML template 
 <button ng-click="c.onConfirm()" class="btn btn-default"> Confirm </button> 
<span>{{c.confirmed}}</span>   

// Client script
function(spModal) {
  var c = this;
  c.onConfirm = function() {
        c.confirmed = "asking";
        spModal.confirm("Can you confirm or deny this?").then(function(confirmed) {
            c.confirmed = confirmed; // true or false
        })
    }
 } 

Confirm with HTML message

//HTML template 
<button ng-click="c.onConfirmEx()" class="btn btn-default">
    Confirm - HTML message
  </button>
  <span>{{c.confirmed}}</span>

// Client script
function(spModal) {
  var c = this;
  // more control, passing options
    c.onConfirmEx = function() {
        c.confirmed = "asking";
        var warn = '<i class="fa fa-warning" aria-hidden="true"></i>';
        spModal.open({
            title: 'Delete this Thing?',
            message: warn + ' Are you <b>sure</b> you want to do that?'
        }).then(function(confirmed) {
            c.confirmed = confirmed;
        })
    }
}

spModal - open(Object options).then(fn)

Opens a modal window using the specified options.

Table 5. Parameters
Name Type Description
options Object An object that may have these properties.
  • title - a string that can be HTML that goes in the header. The default is empty.
  • message - a string that can be HTML that goes in the header. The default is empty.
  • buttons - an array that contains the buttons to show on the dialog. The default is Cancel and OK.
  • input - a Boolean. When true shows an input field on the dialog. The default is false.
  • value - a string containing the value of the input field. The default is empty.
  • widget - a string that identifies the widget ID or sys_id to embed in the dialog. The default is empty.
  • widgetinput - an object to send the embedded widget as input. The default is null.
  • shared - a client-side object to share data with the embedded widget client script.
  • size - a string indicating the size of the window. Can be 'sm' or 'lg'. The default is empty.
Table 6. Returns
Type Description
void

Example of a prompt with a label

//HTML template
<button ng-click="c.onOpen()" class="btn btn-default">
    Prompt with label
  </button>
  <div ng-show="c.name">
    You answered <span>{{c.name}}</span>
  </div>

//Client code
function(spModal) {
  var c = this;
  c.onOpen = function() {
        //ask the user for a string
        spModal.open({
            title: 'Give me a name',
            message: 'What would you like to name it?',
            input: true,
            value: c.name
        }).then(function(name) {
            c.name = name;
        })
    }
}

Example of agree with custom buttons.

//HTML template
<button ng-click="c.onAgree()" class="btn btn-default">
    Agree
  </button>
  <div ng-show="c.agree">
    You answered {{c.agree}}
  </div>

//Client script
function(spModal) {
  var c = this;
  c.onAgree = function() {
        // ask the user for a string
        // note embedded html in message
        var h = '<h4>Apple likes people to agree to lots of stuff</h4>'
        // Line feeds added to the following lines for presentation formatting.
        var m = 'Your use of Apple software or hardware products is based 
on the software license and other terms and conditions in effect for the 
product at the time of purchase. Your agreement to these terms is required 
to install or use the product. '
        spModal.open({
            title: 'Do you agree?',
            message: h + m,
            buttons: [
                {label:'✘ ${No}', cancel: true},
                {label:'✔ ${Yes}', primary: true}
            ]
        }).then(function() {
            c.agree = 'yes';
        }, function() {
            c.agree = 'no';
        })
    }
}

Example of embedded widget

//HTML template
<button ng-click="c.onWidget('widget-cool-clock')" class="btn btn-default">
    Cool Clock
  </button>

//Client script
function(spModal) {
  var c = this;
  c.onWidget = function(widgetId, widgetInput) {
        spModal.open({
            title: 'Displaying widget ' + widgetId,
            widget: widgetId, 
            widgetInput: widgetInput || {}
        }).then(function(){
            console.log('widget dismissed');
        })      
    }
}

spModal - prompt(String message, String default).then(fn)

Displays a prompt for user input.

Table 7. Parameters
Name Type Description
message String The message to display.
default (optional) String A default value to use if the user does not provide a response.
Table 8. Returns
Type Description
String The promise contains the user's response, or the default value if the user does not enter a response.
//HTML template
 <button ng-click="c.onPrompt()" class="btn btn-default">
    Prompt
  </button>
  <div ng-show="c.name">
    You answered <span>{{c.name}}</span>
  </div>

// Client script
function(spModal) {
  var c = this;
  c.onPrompt = function() {
        spModal.prompt("Your name please", c.name).then(function(name) {
            c.name = name;
        })
    }
}