spModal - Client

Affichez les alertes, les invites et les boîtes de dialogue de confirmation dans Portail de services les widgets. La classe SPModal est disponible dans les scripts clients de Service Portal.

Vous pouvez utiliser spModal.open() pour afficher un widget dans une boîte de dialogue modale. La classe spModal est une couche légère pour l' $uibModal d’amorce de l’interface utilisateur Angular.

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

Affiche une alerte.

Tableau 1. Paramètres

Nom	Type	Description
message	Chaîne	Message à afficher.

Tableau 2. Renvoie

Type	Description
Booléen	La promesse contient un seul argument qui contient vrai ou faux.

// 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(Message de chaîne).puis(fn)

Affiche un message de confirmation.

Tableau 3. Paramètres

Nom	Type	Description
message	Chaîne	Message à afficher.

Tableau 4. Renvoie

Type	Description
Booléen	La promesse contient un seul argument qui contient vrai ou faux.

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

Confirmer avec le message HTML :

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

Ouvre une fenêtre modale utilisant les options spécifiées.

Tableau 5. Paramètres

Nom	Type	Description
options	Objet	Objet qui peut avoir ces propriétés. toile de fond : Booléen|String. Contrôle la présence d’un arrière-plan. Valeurs valides : true : affiche l’arrière-plan. false : pas de toile de fond. statique : désactive la fermeture modale en sélectionnant l’arrière-plan. Valeur par défaut : true boutons : Tableau. Boutons à afficher dans la boîte de dialogue. Les valeurs par défaut sont Annuler et OK. entrée : booléenne. Si la valeur est vrai, un champ d’entrée s’affiche dans la boîte de dialogue. Valeur par défaut : false clavier : booléen. Si la valeur est vrai, indique que la boîte de dialogue peut être fermée à l’aide de la touche ESC. Valeur par défaut : true message : chaîne. HTML qui va dans l’en-tête. Valeur par défaut : vide noDismiss : booléen. Si la valeur est vrai, indique que la section d’en-tête contenant l’icône de fermeture est présente. Valeur par défaut : false shared : objet côté client. Partage les données avec le script client de widget incorporé. size : Chaîne. Taille de la fenêtre. Valeurs valides : 'sm' ou 'lg'. Valeur par défaut : vide titre : Chaîne. HTML qui va dans l’en-tête. Valeur par défaut : vide valeur : Chaîne. Valeur du champ d’entrée. Valeur par défaut : vide widget : chaîne de caractères. ID ou sys_id du widget à incorporer dans la boîte de dialogue. Valeur par défaut : vide widgetInput : objet. Envoyé au widget incorporé comme entrée. Valeur par défaut : null

Tableau 6. Renvoie

Type	Description
nul

L’exemple de code suivant montre comment créer une invite avec une étiquette.

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

L’exemple de code suivant montre comment utiliser l’option de boutons personnalisés.

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

L’exemple de code suivant montre comment utiliser l’option de widget intégré.

//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(message de chaîne, chaîne par défaut).then(fn)

Affiche une invite pour l’entrée de l’utilisateur.

Tableau 7. Paramètres

Nom	Type	Description
message	Chaîne	Message à afficher.
par défaut (facultatif)	Chaîne	Valeur par défaut à utiliser si l’utilisateur ne fournit pas de réponse.

Tableau 8. Renvoie

Type	Description
Chaîne	La promesse contient la réponse de l’utilisateur, ou la valeur par défaut si l’utilisateur ne saisit pas de réponse.

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