Criado botão Ajax
O botão de ação do tipo ajax cria um evento ajax do tipo onClick possibilitando a execução de rotinas sem a necessidade de recarregar a aplicação.
Exemplo do botão de ação na aplicação
Veja abaixo como criar e configurar este tipo de botão.
Criando um botão
Na tela da lista de botões clique em Criar Novo botão.
Dados do botão
Em seguida, selecione o Tipo e informe o nome do botão.
O campo nome permite apenas números, letras sem acentuação e underscore.
Visual do botão
Nesta tela será definido o visual do botão para exibição da aplicação.
Tipo do display
Este atributo define o formato de exibição da ligação.
Algumas opções da interface são exibidas de acordo com o tipo do display utilizado.
As opções são:
FontAwesome
Valor padrão do atributo, permite utilizar Font Awesome para definição do ícone.
Botão
Exibe o item na barra de ação como um botão. Ao utilizar este atributo, será exibido uma nova configuração, Formato de Botão, que definirá o formato de exibição do botão será exibido, onde devemos definir a exibição do botão com:
- FontAwesome - Exibe apenas FontAwesome
- Texto - Exibe apenas texto
- Font Awesome e texto - Exibe FontAwesome e texto, posicionando o ícone a esquerda.
- texto e Font Awesome - Exibe FontAwesome e texto, posicionando o ícone a direita.
Imagem
Permite selecionar uma imagem do gerenciador de imagem para definição do ícone.
Texto
Exibe um texto no formato de link.
ID
Define o nome do estado do botão.
Este texto não aceita langs ou variáveis para sua definição
Font Awesome
Define o ícone que será exibida na aplicação ao selecionar o Tipo do display como FontAwesome
Exemplo do botão de ação como imagem Font Awesome
Imagem
Define a imagem que será exibida na aplicação ao selecionar o Tipo do display como imagem.
Clique no ícone para abrir o [gerenciador de imagens][link_gerenciador_img]{:target=”_blank”} e selecione a imagem desejada.
Exemplo do botão de ação como imagem
Texto
Define o texto do link que será exibido na aplicação ao selecionar o Tipo do display como Texto
A definição do texto não possui nenhuma restrição de caractere e pode ser realizada com um texto fixo ou utilizando uma lang, para criação de sistemas com múltiplos idiomas.
Veja mais detalhes sobre as langs e sobre nosso Dicionário de Dados.
Exemplo do botão de ação como Texto
Cor
Define a cor do ícone do Font Awesome. Caso nenhum valor seja informado, o ícone assume a cor definida na configuração geral do [visual da barra de ação][link_editar_visual]{:target=”_blank”}.
Exibido apenas ao utilizar o Tipo do display como FontAwesome
Cor (Hover)
Define a cor do ícone do Font Awesome no estado hover, ao posicionar o mouse sobre o ícone.
Disponível ao selecionar Tipo do display como FontAwesome.
Cor (Active)
Define a cor do ícone do Font Awesome no estado ativo.
Disponível ao selecionar Tipo do display como FontAwesome.
Visual do botão
Este atributo define a cor do botão. Você pode selecionar uma cor na lista ou usar a opção de Tema para herdar o layout do botão utilizado em sua aplicação.
Disponível apenas ao selecionar Tipo do display como Botão.
Visual do botão (Hover)
Este atributo define a cor do botão no foco do botão. Você pode selecionar uma cor na lista ou usar a opção de Tema para herdar o layout do botão utilizado em sua aplicação.
Disponível apenas ao selecionar Tipo do display como Botão.
Hint
Define o texto de ajuda do botão.
A definição do texto não possui nenhuma restrição de caractere e pode ser realizada com um texto fixo ou utilizando uma lang, para criação de sistemas com múltiplos idiomas.
Veja mais detalhes sobre as langs e sobre nosso Dicionário de Dados.
Mensagem de confirmação
Texto de confirmação acionada ao clicar no ícone da barra de ação.
Exemplo da mensagem de confimação
A definição do texto não possui nenhuma restrição de caractere e pode ser realizada com um texto fixo ou utilizando uma lang, para criação de sistemas com múltiplos idiomas.
Veja mais detalhes sobre as langs e sobre nosso Dicionário de Dados.
Excluir
Apaga um estado do botão.
Botão Adicionar Estado
Adiciona uma linha para a configuração de um novo estado para botão ajax.
Estes estados podem ser manipulados utilizando a macro sc_actionbar_state no evento ajax.
Após adicionar os estados desejados e configurar o visual dos botões, clique em Salvar botão e configurar ajax para criar o botão e o evento.
Evento Ajax
Será criado o evento ajax, que será executado no onClick do botão.
Neste evento devemos codificar os procedimentos que desejamos realizar. Foram adicionadas algumas macros para a manipulação dos botões de ação:
Confira também algumas macros criadas exclusivamente para manipulação desses botões
Macro | Botão Ajax | Botão Ligação | Descrição |
---|---|---|---|
sc_actionbar_clicked_state | Recupera o estado atual do botão para realizar a troca do estado nos botões ajax. | ||
sc_actionbar_state | Muda o stado atual do botão para um novo estado. | ||
sc_actionbar_disable | Desabilita um botão da barra de ação. | ||
sc_actionbar_enable | Habilita um botão da barra de ação, desabilitado pela macro sc_actionbar_disable. | ||
sc_actionbar_hide | Esconde um botão da barra de ação. | ||
sc_actionbar_show | Exibe um botão escondido com a macro sc_actionbar_hide. |