# 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()'").


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kb.stoque.com.br/zeev/customizacoes/customizacoes-de-formulario/customizacao-com-javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.