Shows alerts, prompts, and confirmation dialogs in Service Portal widgets. The spModal class is available in Service Portal client scripts.

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

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.

Example

// 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.

Example

// 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
        })
    }
 }

Example

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.
  • backdrop: Boolean|String. Controls the presence of a backdrop.

    Valid values:

    • true: Displays backdrop.
    • false: No backdrop.
    • static: Disables modal closing by selecting the backdrop.

    Default: true

  • buttons: Array. Buttons to show on the dialog. The default is Cancel and OK.
  • input: Boolean. When true, shows an input field on the dialog.

    Default: false

  • keyboard: Boolean. When true, indicates that the dialog is closable using the ESC key.

    Default: true

  • message: String. HTML that goes in the header.

    Default: empty

  • noDismiss: Boolean. When true,indicates that the header section that contains the close icon is present.

    Default: false

  • shared: Client-side object. Shares data with the embedded widget client script.
  • size: String. Size of the window. Valid values: 'sm' or 'lg'.

    Default: empty

  • title: String. HTML that goes in the header.

    Default: empty

  • value: String. Value of the input field.

    Default: empty

  • widget: String. Widget ID or sys_id to embed in the dialog.

    Default: empty

  • widgetInput: Object. Sent to the embedded widget as input.

    Default: null
Table 6. Returns
Type Description
void

Example

The following code example shows how to create 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

The following code example shows how to use the custom buttons option.

//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

The following code example shows how to use the embedded widget option.

//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.

Example

//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;
        })
    }
}