# Botão Customizado

Caso seja necessário uma ação no formulário que não exista no agilityflow, é possível criar um botão. Esse botão, executa um código [javascript](#bkmrk-customiza%E3%A7%E3%A3o-javas) personalizado, que deve ser criado pelo usuário. Para a configuração desse campo, é necessário conhecimento de [javascript](#bkmrk-customiza%E3%A7%E3%A3o-javas), já que qualquer ação com esse botão é 100% customizada.

### Grupo de informações

Dentro das configurações, é possível alterar o [grupo de informação](http://wiki.agilityflow.io/books/manual-de-customiza%C3%A7%C3%A3o/page/divis%C3%A3o-e-agrupamento-dos-campos "Divisão e agrupamento dos campos") ao qual o campo foi atribuído no momento da criação.

### Nome de Apresentação

Mostra o nome de apresentação informado no momento da criação. Esse é o nome que será mostrado na tela para o usuário.

### Regras de Visibilidade e desativação

Usando essas opções, é possível tornar um campo visível, invisível, ativo ou inativo, e definir quando uma dessas ações deve ocorrer. É possível adicionar várias regras para cada campo.

#### Descrição

É um texto que ajuda a identificar a regra que se está criando. Muito útil quando existem múltiplas regras.

#### Ação

##### Ativar

Deixa o campo disponível para inserção de dados. É o estado padrão do campo.

##### Inativar

Deixa o campo indisponível para inserção de dados.

##### Visível

O campo é mostrado na tela, caso esteja inserido para tal, nas configurações de tela.

##### Invisível

O campo é não é mostrado na tela, mesmo que esteja inserido para tal, nas configurações de tela.

#### A partir da etapa / Até a etapa

Em formulários com etapas, é possível estabelecer que uma regra será aplicada em alguma(s) etapa(s). Para isso, basta selecionar as etapas nos campos "a partir da etapa" e "até a etapa", para definir em que momento do fluxo essa regra vai ser aplicada.

#### Quando

Define em que momento a ação deve acontecer.

##### Sempre

É o padrão do formulário.

##### Condicional

- Tipo de condição  
    Para fazer um validação condicional, estão disponíveis as seguintes condições:  
    
    - Se o campo: compara um campo com um valor, ou com outro campo.  
        Abaixo, uma tabela com os operadores disponíveis para as comparações:  
          
        <table border="1"><tbody><tr><td>**Comparação por valor**</td><td>**Comparação por outro campo**</td></tr><tr><td>For igual a</td><td>É igual ao campo</td></tr><tr><td>For maior ou igual a</td><td>É diferente do campo</td></tr><tr><td>For menor ou igual a </td><td> </td></tr><tr><td>For maior que</td><td> </td></tr><tr><td>For menor que</td><td> </td></tr><tr><td>For diferente de</td><td> </td></tr><tr><td>Conter</td><td> </td></tr><tr><td>Não conter</td><td> </td></tr></tbody></table>
        
        <p class="callout success">É possível adicionar mais de um condição na mesma regra.</p>
    - Se é um novo formulário: regra será aplicada quando uma nova entrada no formulário estiver sendo criada.
    - Se é edição de formulário: regra será aplicada quando uma entrada no formulário estiver sendo alterada.

### Customização Javascript

A parte mais importante do botão customizado é a programação em javascript. É com ela que o botão será capaz de executar alguma ação no formulário.

Com a customização em Javascript, as possibilidade são inúmeras. Qualquer que seja o código javascript, ele pode ser usado aqui.

#### Exemplo de código

> Posso abrir o WhatsApp pelo agilityflow?

No exemplo abaixo, o botão customizado está configurado para abrir o WhatsApp Web e iniciar uma conversa com o número cadastrado no formulário.

```JavaScript
var fone = $("#telefone").val();

if (fone !== null)
    fone = fone.replaceAll(/\(/,"").replaceAll(/\)/,"").replaceAll(/-/,"").replaceAll(/ /,"");

window.open("https://web.whatsapp.com/send?phone="+fone);
```

##### Explicando o código

```JavaScript
var fone = $("#telefone").val();
```

Obtém-se o valor do campo telefone, e o armazena na variável chamada *fone*. Note que esse nome é exatamente o nome definidos na configuração [Coluna Banco de dados (SQL)](http://wiki.agilityflow.io/link/38#bkmrk-%E2%A0-0 "Coluna Banco de dados (SQL)").

```JavaScript
if (fone !== null)
    fone = fone.replaceAll(/\(/,"").replaceAll(/\)/,"").replaceAll(/-/,"").replaceAll(/ /,"");
```

Nesse ponto, checa se o valor é nulo. Caso não seja, limpa o número, removendo parêntesis e hifens.

<div data-lang="JavaScript" id="bkmrk-window.open%28%22https%3A%2F"><div data-lang="JavaScript"><textarea style="display: none;">window.open("https://web.whatsapp.com/send?phone="+fone);</textarea><div><div><textarea spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div></div></div></div>```JavaScript
window.open("https://web.whatsapp.com/send?phone="+fone);
```

<div data-lang="JavaScript" id="bkmrk-abre-se-uma-nova-jan"><div><div>Abre-se uma nova janela, passando o valor da variável *fone* na URL.</div></div></div><div id="bkmrk-"></div><div id="bkmrk--0"></div><div data-lang="JavaScript" id="bkmrk--1"><div><div><div></div></div><div></div></div></div>