Modal de confirmação
Exibe uma janela flutuante, com um ícone, título e subtítulo. Além disso, aceita botões na parte inferior da janela com ações programáveis.
Figura 1 - Bloco Modal de Confirmação
Após o preenchimento dos campos do bloco, o modal ficará como na figura 1.1.
Figura 1.1 - Exemplo de Modal de Confirmação web
Figura 1.2 - Exemplo de Modal de Confirmação mobile
Compatibilidade
- Bloco cliente: cronapi.notification.confirmDialogAlert()
Retorno
Bloco sem retorno.
Parâmetros
Nome
Tipo
Doc
Parâmetro 1
String
Tipo do ícone da modal.
Parâmetro 2
String
Texto com maior destaque.
Parâmetro 3
String
Texto abaixo do título, com menor destaque.
Parâmetro 4
Object
Botões criados através do bloco Botão do modal.
Descrição dos parâmetros do bloco.
Ícone
Define o tipo do ícone do modal, podendo ser: Erro, Sucesso, Aviso ou Informação, (destaque 1 das figuras 1.1 e 1.2).
- Posição: 1
- Inglês: icon
- Tipo: Texto / String
- Exemplo: "Sucesso"
Título
Define o título do modal, (destaque 2 das figuras 1.1 e 1.2).
- Posição: 2
- Inglês: title
- Tipo: Texto / String
- Exemplo: "Produto cadastrado com sucesso."
Subtítulo
Define o subtítulo do modal, texto abaixo do título. (destaque 3 das figuras 1.1 e 1.2).
- Posição: 3
- Inglês: subtitle
- Tipo: Texto / String
- Exemplo: "Deseja cadastra outro item?"
Lista de botões
Insere um ou mais botões no modal através do bloco Botão do modal. Para inserir vários botões, o bloco criar lista com é necessário. Também pode ser deixado vazio, neste caso o botão padrão OK será inserido, com única ação de fechar o modal. (destaque 4 das figura 1.1 e 1.2).
- Posição: 4
- Inglês: list button
- Tipo: Objeto / Object
- Exemplo: Bloco Botão do modal ou uma lista com o mesmo bloco.
Característica do bloco
Dependendo do tipo de plataforma, o modal apresentará exibições diferentes, confira nos tópicos abaixo como é a visualização do modal para as plataformas web e mobile.
Visualização na web
A exibição dos modais web apresenta ícones diferentes para cada tipo de notificação. No exemplo abaixo exibimos modais com dois botões cada, porém, esse número poderia ser maior ou menor, dependendo da regra de negócio do usuário, o botão 2 foi configurado como botão de destaque, presente no bloco de programação Botão do modal.
Figura 2 - Imagem editada para exibir os 4 Modais de confirmação web
Visualização no mobile
A visualização do modal de confirmação em projetos mobile fica um pouco diferente se comparado à exibição web, confira na figura 3.
| Informações |
|---|
Aplicações web abertas em um Smartphone exibirão o modal web. |
Figura 2.1 - Imagem editada para exibir os 4 Modais de confirmação mobile
Compatibilidade
Cliente Exemplo
Para o exemplo a seguir, exibiremos os modais para cada tipo de mensagem gerada, Sucesso, Aviso, Erro e Informação,um modal web informando que o usuário cadastrou um produto com sucesso.
| Informações |
|---|
O |
| Informações |
Obs: o layout de exibição do modal varia de acordo com o skin e o tema escolhido escolhidos para o o projeto. |
Figura 1 3 - Função que cria um Modal de confirmação
A seguir, apresentaremos os modais disponíveis.
Figura 2 - Resultado da chamada da função exibindo o modal de Sucesso
Figura 2.1 - Resultado da chamada da função exibindo o modal de Aviso
Figura 2.2 - Resultado da chamada da função exibindo o modal de Erro
O resultado da execução da função pode ser conferido logo abaixo, na figura 3.1.
Figura 3.1 Figura 2.3 - Resultado da chamada da função exibindo o modal de Informação
Sobre o bloco
O Modal de confirmação pode ser usado para interromper o fluxo do usuário e forçar uma tomada de decisão.Os ícones disponíveis são: Erro,
Sucesso
Nesta página
| Índice |
|---|
Parâmetro Lista de botões
Insere botões no modal através do bloco Botão do modal. Para inserir vários, o bloco criar lista com é necessário. Também pode ser deixado vazio, que irá inserir o botão padrão OK com única ação de fechar o modal.