spModal : Client

Zeigt Warnungen, Eingabeaufforderungen und Bestätigungsdialogfelder in Serviceportal -Widgets an. Die Klasse „ spModal“ ist in Client-Skripts Serviceportal verfügbar.

Die Klasse „spModal“ ist ein schlanker Wrapper für $uibModaldes Bootstrap von Angular UI. Sie können die Methode spModal.open() verwenden, um ein Widget in einem modalen Dialogfeld anzuzeigen.

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: Boolesch|Zeichenfolge. Steuert das Vorhandensein eines Hintergrunds. Gültige Werte: true: Zeigt Hintergrund an. false: Kein Hintergrund. static: Deaktiviert das Schließen des Modals durch Auswahl des Hintergrunds. Standardwert: true Schaltflächen: Array. Schaltflächen, die im Dialogfeld angezeigt werden sollen. Die Standardeinstellung ist „Abbrechen“ und „OK“. Eingabe: Boolesch. Bei „wahr“ wird ein Eingabefeld im Dialogfeld angezeigt. Standardwert: false Tastatur: Boolesch. „Wahr“ gibt an, dass das Dialogfeld mit der ESC-Taste geschlossen werden kann. Standardwert: true Nachricht: Zeichenfolge. HTML, das in den Header eingefügt wird. Standard: leer noDismiss: Boolescher Wert. „Wahr“ gibt an, dass der Headerabschnitt vorhanden ist, der das Symbol zum Schließen enthält. Standardwert: false Shared: 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 zum Einbetten in das Dialogfeld. Standard: leer widgetEingabe: Objekt. Wird als Eingabe an das eingebettete Widget gesendet. Standard: null

Tabelle : 6. Ergebnisse

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 für 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 für eingebettete Widgets 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;
        })
    }
}