Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Modal de confirmação
Exibe uma janela flutuante na aplicação, com um ícone no topo, título e subtítulo. Botões podem ser inseridos através da propriedade Lista de botões, que recebe um bloco Botão do modal ou uma Lista com vários botões.
Parâmetros
Nome
Tipo
Doc
Além disso, aceita botões na parte inferior da janela com ações programáveis.
Image Added
Figura 1 - Bloco Modal de Confirmação
Após o preenchimento dos campos do bloco, o modal ficará como na figura 1.1.
Image Added
Figura 1.1 - Exemplo de Modal de Confirmação web
Image Added
Figura 1.2 - Exemplo de Modal de Confirmação mobile
Compatibilidade
- Bloco cliente: cronapi.notification.confirmDialogAlert()
Retorno
Bloco sem retorno.
Parâmetros
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
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
através do bloco Botão do modal.
Aceita um único bloco ou vários unidos com uma Lista.Compatibilidade
Image Removed Cliente
Exemplo
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.
Image Added
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. |
Image Added
Figura 2.1 - Imagem editada para exibir os 4 Modais de confirmação mobile
Exemplo
Para o exemplo a seguir, exibiremos um modal web informando que o usuário cadastrou um produto com sucesso.
Informações |
---|
O layout de exibição do modal varia de acordo com o skin e o tema escolhidos para o projeto. |
Image Added
Figura 3 - Função que cria um Modal de confirmação
O resultado da execução da função pode ser conferido logo abaixo, na figura 3.1.
Image Added
Figura 3.1 - Resultado da chamada da função exibindo o modal de Sucesso
Nesta página
Índice |
---|
Sobre o bloco
Um Modal de confirmação pode ser usado para interromper o fluxo do usuário e forçar uma tomada de decisão. O modal exibido pelo bloco possui 4 tipos de ícones disponíveis: Erro, Sucesso, Aviso e Informação.