# Adicionar Elementos Personalizados

### Pré-Requisitos

***

O acesso à Camada de Personalização é concedido no programa [Configuração de Permissão de Perfil e Usuário (CSWMEN070)](/modulos/componentes/manuais-de-telas/configuracao-dos-componentes/configuracao-de-permissao-de-perfil-e-usuario.md), onde se deve marcar a opção *Permitir Acesso a Camada de Personalização de Programas* na coluna **Configuração**. Este acesso é automaticamente liberado para **Usuários Administradores** e **Usuários Consistem**.

### Acesso

***

Programa do ERP\
[Ícone de Cubo](https://ajuda.consistem.com.br/tecnologia/erp/componentes7/interface-visual/elementos/barra-de-titulo#id-8.-camada-de-personalizacao) - Camada de Personalização (canto superior direito da tela)\
Opção *Elementos Personalizados*\
[Elementos Personalizados (CSW1CUSTOM020)](/modulos/componentes/manuais-de-telas/camada-de-personalizacao/elementos-personalizados.md)\
Botão **Novo**

### Visão Geral

***

O objetivo deste programa é adicionar componentes personalizados na interface de uma rotina do sistema sem alterar seu código-fonte. Esta tela centraliza a configuração do novo elemento, determinando sua posição, aparência (ícone e texto), a rotina que será executada ao ser acionado, e os parâmetros que essa rotina de destino receberá.

{% hint style="warning" %} <mark style="color:orange;">**Importante**</mark>

É necessário re-autenticar no sistema para que a alteração seja aplicada.
{% endhint %}

{% hint style="warning" %} <mark style="color:orange;">**Importante**</mark>

O item **Instruções** está posicionado no canto superior direito da área de preenchimento. Ao clicar, o usuário acessa as informações detalhadas para a criação do elemento personalizado.
{% endhint %}

### Campos

***

*Campos assinalados com* <mark style="color:red;">**|**</mark> *são de preenchimento obrigatório.*

#### Código da Rotina<mark style="color:red;">**|**</mark>

Informar o código da rotina de origem onde o elemento personalizado será aplicado. Ao executar esta tela este campo é preenchido de forma automática, mas pressionando a tecla **Seta para Cima** este campo habilita.

{% hint style="info" %} <mark style="color:blue;">**Botão F7**</mark>

Apresenta tela com as rotinas configuradas neste programa para seleção.
{% endhint %}

#### Sequência<mark style="color:red;">**|**</mark>

Informar a ordem do elemento na rotina.

#### Tipo<mark style="color:red;">**|**</mark>

Selecionar o tipo de elemento a ser adicionado. A opção é:\
\- *Chamada de Rotina*

#### Descrição<mark style="color:red;">**|**</mark>

Informar o nome do botão que será exibido na rotina de origem.

#### Situação<mark style="color:red;">**|**</mark>

Determinar a situação do elemento. As opções são:\
\- *Ativo*\
\- *Inativo*

#### Botão de Referência

Informar o código de um botão já existente na rotina de origem para que o novo botão copie seu comportamento de habilitação e desabilitação.

{% hint style="info" %} <mark style="color:blue;">**Botão F7**</mark>

Apresenta tela com os botões padrões de referência disponíveis no código-fonte desta rotina para seleção.
{% endhint %}

#### Rotina Executada<mark style="color:red;">**|**</mark>

Informar o código da rotina de destino que será acionada quando o botão for clicado. Pode ser uma rotina padrão ou customizada.

#### Posição Vertical (Linha)<mark style="color:red;">**|**</mark>

Informar a linha vertical na tela onde o botão será posicionado.

{% hint style="warning" %} <mark style="color:orange;">**Importante**</mark>

Se o botão não for exibido na tela, ajuste estas opções até que ele se torne visível.
{% endhint %}

#### Posição Horizontal (Coluna)<mark style="color:red;">**|**</mark>

Informar a coluna horizontal na tela onde o botão será posicionado.

{% hint style="warning" %} <mark style="color:orange;">**Importante**</mark>

Certifique-se de que o botão não esteja sobreposto por qualquer outro componente da tela (como campos, displays, grids ou outros botões).
{% endhint %}

#### Tamanho

Informar a largura que o botão ocupará na tela.

#### Ícone

Informar o nome do ícone válido a ser exibido no botão.

{% hint style="info" %} <mark style="color:blue;">**Botão F7**</mark>

Apresenta tela com os principais [ícones disponíveis](https://react.semantic-ui.com/elements/icon/) para seleção.
{% endhint %}

#### Atalho

Informar uma tecla de atalho para acionar o botão. Não é obrigatório, mas requer atenção para evitar conflitos com atalhos já existentes na rotina de origem.

#### Texto Ajuda

Informar o texto de dica ou *tooltip* que será exibido quando o mouse passar sobre o botão. Pode-se utilizar tags HTML como "\<b>" e "\<br>".

### Colunas do Grid

***

#### Seq. Parâmetro

Informar o código com a ordem sequencial em que o parâmetro será passado para a rotina de destino.

#### Tipo

Definir a fonte do parâmetro. As opções são:\
\- *Variável de Contexto*\
\- *Coluna de Grid (Display)*\
\- *Coluna de Grid (Detalha)*\
\- *Valor Fixo*\
\- *Comando/Função ou Expressão*

{% hint style="warning" %} <mark style="color:orange;">**Importante**</mark>

Para a correta configuração, é necessário ter conhecimento prévio dos parâmetros da rotina e das variáveis de contexto da rotina de origem.
{% endhint %}

#### Valor

Informar o valor do parâmetro. Depende do tipo escolhido: é o nome da variável, o código da coluna do grid, ou a expressão a ser avaliada.

{% hint style="success" %} <mark style="color:green;">**Exemplo**</mark>

$piece(VARIAVEL,Z,1)
{% endhint %}

#### Código Grid

Indicar de qual grid os dados serão obtidos.

{% hint style="warning" %} <mark style="color:orange;">**Importante**</mark>

Esta coluna será habilitada se a coluna **Tipo** estiver com a opção *Coluna de Grid (Display)* ou *Coluna de Grid (Detalha)* selecionada.
{% endhint %}

### Botões

***

#### Manutenção

As colunas permitidas são habilitadas para alteração dos dados.

#### Incluir

As colunas são habilitadas para inclusão de novos dados.

#### Remover

Permite excluir a linha selecionada no grid.

#### Salvar

Salva as configurações do novo elemento personalizado. Após salvar, o botão é imediatamente aplicado à rotina de origem.

#### Excluir

Permite excluir o elemento personalizado que está sendo editado.

{% hint style="warning" %} <mark style="color:orange;">**Importante**</mark>

Este botão será habilitado após a gravação dos dados.
{% endhint %}

#### Cancelar

Limpa as informações descritas na tela e retorna ao programa [Elementos Personalizados (CSW1CUSTOM020)](/modulos/componentes/manuais-de-telas/camada-de-personalizacao/elementos-personalizados.md).

#### Parâmetros

Apresenta tela com os parâmetros esperados para a rotina executada, caso haja.

{% hint style="warning" %} <mark style="color:orange;">**Importante**</mark>

Estes parâmetros estão definidos no código-fonte da rotina e requerem conhecimento técnico para sua correta identificação e uso.
{% endhint %}

***

{% hint style="danger" %} <mark style="color:red;">**Atenção**</mark>

As descrições das principais funcionalidades do sistema estão disponíveis na documentação de [Componentes](/tecnologia/erp/componentes.md).\
A utilização incorreta deste programa pode ocasionar problemas no funcionamento do sistema e nas integrações entre módulos.
{% endhint %}

<p align="center">Esse conteúdo foi útil?</p>

<p align="center"><a href="https://movidesk.consistem.com.br/form/10395/" class="button primary" data-icon="thumbs-up">Sim</a> <a href="https://movidesk.consistem.com.br/form/10395/" class="button primary" data-icon="thumbs-down">Não</a></p>


---

# 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://ajuda.consistem.com.br/modulos/componentes/manuais-de-telas/camada-de-personalizacao/adicionar-elementos-personalizados.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.