> For the complete documentation index, see [llms.txt](https://kb.stoque.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.stoque.com.br/zeev/customizacoes/customizacoes-de-formulario/customizacao-com-javascript.md).

# Customização com Javascript

{% hint style="info" %}
Esse recurso está disponível somente em planos avançados da plataforma. Verifique <https://zeev.it/planos-e-precos/>
{% endhint %}

{% hint style="warning" %}
Customizações com códigos Javascript não cobertas por nossos planos de Suporte Técnico. A responsabilidade pela criação, implementação e manutenção de códigos customizados Javascript é do cliente.&#x20;
{% endhint %}

{% hint style="warning" %}
**22 de abril de 2024:** Esse recurso esteve incorretamente disponibilizado para clientes do plano Business durante um período de tempo, em contrário ao seu contrato de licenciamento. A partir dessa data, o recurso volta a ser bloqueado, seguindo as características de cada plano. De modo a não prejudicar nenhuma operação, aplicativos com códigos customizados já implementados continuarão a funcionar e poderão ser modificados, normalmente. Em caso de dúvidas, consulte nossos representantes comerciais.&#x20;
{% endhint %}

## Editor Javascript

O Editor Javascript permite a criação de códigos Javascript diretamente no sistema através de um editor com identificação de sintaxe e templates.

Ele é acessado através da tela do desenhador de processos, dentro da tela do editor de formulários, no botão "Javascript".

<figure><img src="/files/gdTumRqvjABef6qiPNBU" alt=""><figcaption></figcaption></figure>

O Editor permite criar códigos customizados que serão executados em **todas as atividades** ou **atividades específicas**.

* **Todas as atividades:** permite criar códigos que serão disponibilizados na tela de execução de tarefa de quaisquer tarefas humanas do processo;
* **Atividades específicas:** permite criar códigos que serão disponibilizados na tela de execução de tarefa apenas das tarefas selecionadas. Isso evita que seja necessário criar *IFs* para filtrar em qual tarefa um código javascript deve ou não estar disponível.

## Bibliotecas externas

Para adicionar bibliotecas externas, utilize o [editor de cabeçalhos](/zeev/customizacoes/customizacoes-de-formulario/editor-de-cabecalhos.md).

## Identificadores de campos

Conhecer os identificadores de campos de formulário é essencial para implementar diversas customizações. Os identificadores são chaves únicas que identificam um campo de formulário em um aplicativo.  São strings, geralmente em formato camel case (ex.: dataNascimento) ou snake case (data\_nascimento), sem acentos, sem caracteres especiais. Ao criar um campo do formulário com um título, o Zeev sugere automaticamente um identificador. Você pode mudá-lo, ao editar as propriedades avançadas do campo.

Os identificadores são plotados no HTML final gerado do formulário através do atributo `data-name`. Por exemplo:

```html
<input type="text" name="inp8292" data-name="data_nascimento">
```

Se o campo não estiver em uma tabela multivalorada, o campo pode ser acionado em Javascript, por exemplo, da seguinte maneira:

```javascript
const dataNascimento = document.querySelector("[data-name='data_nascimento']");
```

Se o campo estiver em uma multivalorada, ele será um array.

```html
const dataNascimento = document.querySelectorAll("[inpname='data_nascimento']");
```

Existem as seguintes maneiras de visualizar os identificadores de campos

### No editor de formulários

Dentro do Editor de formulários, ao selecionar um campo, no box de "Opções avançadas", você pode ver e modificar o identificador.

<figure><img src="/files/fyRCqm2roZgkt58Bi1R3" alt=""><figcaption></figcaption></figure>

### Ao exportar um aplicativo

Dentro do desenho do processo do aplicativo, ao selecionar a opção "Exportar" e depois "Relatório de configurações (.xls)", os dados do aplicativo são exportados para Excel. Uma das abas exportadas contém os dados - e os identificadores - completos dos campos de formulários.

<figure><img src="/files/pNzeGt6wH9xPo137nptX" alt=""><figcaption></figcaption></figure>

### Com Developers Tools

Se você é um desenvolver, pode ter vivência com ferramentas de *debugging* e *developer tools* do navegador, pode inspecionar o elemento e identificar a propriedade `data-name.`

<figure><img src="/files/W24ugn8yqxuT2qIgmiVA" alt=""><figcaption></figcaption></figure>

## Programando diretamente em um campo do formulário

Ao acessar as configurações do formulário, na aba Programação, é possível informar o evento ou a chamada de código de script que estará vinculado a este campo (Ex.: "onClick='funcao()'").