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

Botões criados

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. Para desencadear uma ação, use recursos do bloco Botão do modal.