---
sourceDocument: Référence de l’API Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Référence de l’API Xanadu

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# spModal : client

# spModal : client {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 minutes de lecture

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](https://angular-ui.github.io/bootstrap/#/modal) 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) {#ariaid-title2}

Affiche une alerte.
{#SPM-alert_S__table_r1l_rmy_my__entry__3}

| Nom | Type | Description |
|-|-|-|
| message | Chaîne | Le message à afficher. |
[Tableau 1. Paramètres]

{#SPM-alert_S__table_r1l_rmy_my} {#SPM-alert_S__table_s1l_rmy_my__entry__2}

| Type | Description |
|-|-|
| Booléen | La promesse contient un seul argument qui contient vrai ou faux. |
[Tableau 2. Renvoie]

{#SPM-alert_S__table_s1l_rmy_my}  

    // 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) {#ariaid-title3}

Affiche un message de confirmation.
{#SPM-confirm_S__table_t3x_rty_my__entry__3}

| Nom | Type | Description |
|-|-|-|
| message | Chaîne | Le message à afficher. |
[Tableau 3. Paramètres]

{#SPM-confirm_S__table_t3x_rty_my} {#SPM-confirm_S__table_u3x_rty_my__entry__2}

| Type | Description |
|-|-|
| Booléen | La promesse contient un seul argument qui contient vrai ou faux. |
[Tableau 4. Renvoie]

{#SPM-confirm_S__table_u3x_rty_my}  

    // 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) {#ariaid-title4}

Ouvre une fenêtre modale à l'aide des options spécifiées.
{#SPM-open_O__table_trg_vwy_my__entry__3}

| 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 5. Paramètres]

{#SPM-open_O__table_trg_vwy_my} {#SPM-open_O__table_urg_vwy_my__entry__2}

| Type | Description |
|-|-|
| nul |   |
[Tableau 6. Renvoie]

{#SPM-open_O__table_urg_vwy_my}  
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) {#ariaid-title5}

Affiche une invite pour l'entrée de l'utilisateur.
{#SPM-prompt_S_S__table_mvh_5vy_my__entry__3}

| 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 7. Paramètres]

{#SPM-prompt_S_S__table_mvh_5vy_my} {#SPM-prompt_S_S__table_nvh_5vy_my__entry__2}

| 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. |
[Tableau 8. Renvoie]

{#SPM-prompt_S_S__table_nvh_5vy_my}  

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