spModal : client

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

La classe spModal est une couche légère pour les $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(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(String message).then(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
        })
    }
 } 

Confirmez 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 à 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 : vrai : affiche la toile de fond. faux : Pas de toile de fond. statique : désactive la fermeture de la fenêtre modale en sélectionnant la toile de fond. 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é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 vrai, indique que la boîte de dialogue peut être fermée à l’aide de la touche Echap. Par défaut : true message : Chaîne. HTML qui va dans l’en-tête. Valeur 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 des données avec le script client du widget intégré. taille : 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. ID ou sys_id de widget à intégrer dans la boîte de dialogue. Valeur par défaut : vide widgetInput : objet. Envoyé au widget incorporé en tant qu’entrée. Valeur par défaut : nul

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 des 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 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(String message, String default).then(fn)

Affiche une invite pour les entrées 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;
        })
    }
}