SpModal – Client

Zeigt Warnungen, Hinweismeldungen und Bestätigungsdialoge in an Serviceportal Widgets. Die SpModal Klasse ist in verfügbar Serviceportal Client-Skripts.

Die SpModal Klasse ist ein leichter Wrapper für Angular-UI-Bootstrap $uibModal . Sie können verwenden SpModal.Open() Methode zum Anzeigen eines Widgets in einem modalen Dialogfeld.

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

Zeigt eine Warnung an.

Tabelle : 1. Parameter

Name	Typ	Beschreibung
Nachricht	Zeichenfolge	Meldung, die angezeigt werden soll.

Tabelle : 2. Ergebnisse

Typ	Beschreibung
Boolean	Die Zusage enthält ein einzelnes Argument, das „true“ oder „false“ enthält.

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

Zeigt eine Bestätigungsmeldung an.

Tabelle : 3. Parameter

Name	Typ	Beschreibung
Nachricht	Zeichenfolge	Meldung, die angezeigt werden soll.

Tabelle : 4. Ergebnisse

Typ	Beschreibung
Boolean	Die Zusage enthält ein einzelnes Argument, das „true“ oder „false“ enthält.

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

Mit HTML-Nachricht bestätigen:

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

Öffnet ein modales Fenster mit den angegebenen Optionen.

Tabelle : 5. Parameter

Name	Typ	Beschreibung
Optionen	Objekt	Ein Objekt, das diese Eigenschaften haben kann. Hintergrund: Boolescher Wert|Zeichenfolge. Steuert das Vorhandensein eines Hintergrunds. Gültige Werte: Wahr: Zeigt den Hintergrund an. Falsch: Kein Hintergrund. Statisch: Deaktiviert das Schließen des Modals durch Auswahl des Hintergrunds. Standardwert: wahr Schaltflächen: Array. Schaltflächen, die im Dialogfeld angezeigt werden sollen. Die Standardeinstellung ist „Abbrechen“ und „OK“. Eingabe: Boolescher Wert. Bei „wahr“ wird ein Eingabefeld im Dialogfeld angezeigt. Standardwert: false Tastatur: Boolescher Wert. Bei „wahr“ wird angegeben, dass das Dialogfeld mit der ESC-Taste geschlossen werden kann. Standardwert: wahr Nachricht: Zeichenfolge. HTML, das in den Header eingefügt wird. Standard: Leer NoDismiss: Boolescher Wert. Bei „wahr“ wird angegeben, dass der Header-Abschnitt mit dem Symbol „Schließen“ nicht vorhanden ist. Standardwert: false Freigegeben: Clientseitiges Objekt. Gibt Daten für das eingebettete Widget-Client-Skript frei. Größe: Zeichenfolge. Größe des Fensters. Gültige Werte: „sm“ oder „lg“. Standard: Leer Titel: Zeichenfolge. HTML, das in den Header eingefügt wird. Standard: Leer Wert: Zeichenfolge. Wert des Eingabefelds. Standard: Leer Widget: Zeichenfolge. Widget-ID oder sys_ID, die in das Dialogfeld eingebettet werden soll. Standard: Leer Widget-Eingabe: Objekt. Wird als Eingabe an das eingebettete Widget gesendet. Standard: Null

Tabelle : 6. Rückgaben

Typ	Beschreibung
void

Das folgende Codebeispiel zeigt, wie Sie einen Prompt mit einer Bezeichnung erstellen.

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

Das folgende Codebeispiel zeigt, wie die Option „anwenderdefinierte Schaltflächen“ verwendet wird.

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

Das folgende Codebeispiel zeigt, wie die Option „eingebettetes Widget“ verwendet wird.

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

Zeigt eine Aufforderung zur Benutzereingabe an.

Tabelle : 7. Parameter

Name	Typ	Beschreibung
Nachricht	Zeichenfolge	Meldung, die angezeigt werden soll.
default (optional)	Zeichenfolge	Ein Standardwert, der verwendet werden soll, wenn der Benutzer keine Antwort gibt.

Tabelle : 8. Ergebnisse

Typ	Beschreibung
Zeichenfolge	Die Zusage enthält die Antwort des Benutzers oder den Standardwert, wenn der Benutzer keine Antwort eingibt.

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