spModal - Cliente

Mostra alertas, avisos e caixas de diálogo de confirmação em Portal de serviços widgets. A classe spModal está disponível em Portal de serviços client scripts.

A classe spModal é um wrapper leve para $uibModalda inicialização da IU angular. Você pode usar o método spModal.open() para exibir um widget em uma caixa de diálogo modal.

spModal - alerta (cadeia de caracteres mensagem).then(fn)

Exibe um alerta.

Tabela 1. Parâmetros

Nome	Tipo	Descrição
message	Cadeia de caracteres	A mensagem a ser exibida.

Tabela 2. Retorna

Tipo	Descrição
Booliano	A promessa contém um único argumento que contém verdadeiro ou falso.

// 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 – confirmar (cadeia de caracteres mensagem).then(fn)

Exibe uma mensagem de confirmação.

Tabela 3. Parâmetros

Nome	Tipo	Descrição
message	Cadeia de caracteres	A mensagem a ser exibida.

Tabela 4. Retorna

Tipo	Descrição
Booliano	A promessa contém um único argumento que contém verdadeiro ou falso.

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

Confirme com mensagem 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(Opções de objeto).then(fn)

Abre uma janela modal usando as opções especificadas.

Tabela 5. Parâmetros

Nome	Tipo	Descrição
opções	Objeto	Um objeto que pode ter estas propriedades. plano de fundo: Booliano|Cadeia de caracteres. Controla a presença de um plano de fundo. Valores válidos: verdadeiro: exibe o plano de fundo. falso: nenhum plano de fundo. estático: desabilita o fechamento modal selecionando a tela de fundo. Padrão: verdadeiro Botões: Matriz. Botões a serem mostrados na caixa de diálogo. O padrão é Cancelar e OK. entrada: booliano. Quando verdadeiro, mostra um campo de entrada na caixa de diálogo. Padrão: falso teclado: booliano. Quando verdadeiro, indica que a caixa de diálogo pode ser fechada usando a tecla ESC. Padrão: verdadeiro mensagem: Cadeia de caracteres. HTML que vai no cabeçalho. Padrão: vazio noDismiss: booliano. Quando verdadeiro, indica que a seção do cabeçalho que contém o ícone de fechar está presente. Padrão: falso shared: objeto do lado do cliente. Compartilha dados com o client script do widget incorporado. tamanho: cadeia de caracteres. Tamanho da janela. Valores válidos: 'sm' ou 'lg'. Padrão: vazio título: cadeia de caracteres. HTML que vai no cabeçalho. Padrão: vazio valor: cadeia de caracteres. Valor do campo de entrada. Padrão: vazio widget: cadeia de caracteres. ID do widget ou sys_id a ser incorporado na caixa de diálogo. Padrão: vazio widgetEntrada: objeto. Enviado para o widget incorporado como entrada. Padrão: nulo

Tabela 6. Retorna

Tipo	Descrição
vazio

O exemplo de código a seguir mostra como criar um prompt com um rótulo.

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

O exemplo de código a seguir mostra como usar a opção de botões personalizados.

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

O exemplo de código a seguir mostra como usar a opção de widget incorporado.

//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 (cadeia de caracteres mensagem, cadeia de caracteres padrão).then(fn)

Exibe um prompt para entrada do usuário.

Tabela 7. Parâmetros

Nome	Tipo	Descrição
message	Cadeia de caracteres	A mensagem a ser exibida.
padrão (opcional)	Cadeia de caracteres	Um valor padrão a ser usado se o usuário não fornecer uma resposta.

Tabela 8. Retorna

Tipo	Descrição
Cadeia de caracteres	A promessa contém a resposta do usuário ou o valor padrão se o usuário não inserir uma resposta.

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