spModal : client

Affiche les alertes, les invites et les boîtes de dialogue de confirmation dans Portail de services les widgets. La classe spModal est disponible dans Portail de services les scripts clients.

La classe spModal est un wrapper léger pour la $uibModal d’amorce de l’interface utilisateur Angular. Vous pouvez utiliser la méthode spModal.open() pour afficher un widget dans une boîte de dialogue modale.

spModal - alert(Message de chaîne).puis(fn)

Affiche une alerte.

Tableau 1. Paramètres

Nom	Type	Description
message	Chaîne	Le 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).then(fn)

Affiche un message de confirmation.

Tableau 3. Paramètres

Nom	Type	Description
message	Chaîne	Le 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(Options de l’objet).then(fn)

Ouvre une fenêtre modale à l’aide des 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|Corde. Contrôle la présence d’une toile de fond. Valeurs valides : true : affiche l’arrière-plan. false : pas de toile de fond. statique : désactive la fermeture du modal en sélectionnant la toile de fond. Valeur par défaut : true boutons : Tableau. Boutons à afficher dans la boîte de dialogue. La valeur par défaut est Annuler et OK. entrée : booléen. Si la valeur est « vrai », affiche un champ d’entrée 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 de caractères. HTML qui va dans l’en-tête. Par défaut : vide noDismiss : booléen. Si 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 du widget intégré. size : Chaîne. Taille de la fenêtre. Valeurs valides : « sm » ou « lg ». Par défaut : vide titre : Chaîne. HTML qui va dans l’en-tête. Par défaut : vide valeur : chaîne. Valeur du champ d’entrée. Par défaut : vide widget : chaîne de caractères. ID de widget ou sys_id à incorporer dans la boîte de dialogue. Par défaut : vide widgetInput : objet. Envoyé au widget incorporé comme entrée. 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 widget incorporé.

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