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

Este atributo pode ser definido utilizando langs para sistemas multi-idiomas, que são gerenciadas no menu Traduzir aplicações, ou definindo o texto diretamente no campo, de acordo com a necessidade do sistema.

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.

Este atributo pode ser definido utilizando langs para sistemas multi-idiomas, que são gerenciadas no menu Traduzir aplicações, ou definindo o texto diretamente no campo, de acordo com a necessidade do sistema.

Mensagem de confirmação

Texto de confirmação acionada ao clicar no ícone da barra de ação.

Exemplo da mensagem de confimação

Este atributo pode ser definido utilizando langs para sistemas multi-idiomas, que são gerenciadas no menu Traduzir aplicações, ou definindo o texto diretamente no campo, de acordo com a necessidade do sistema.

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.