---
title: Formulário
slug: builder/formulario
description: Learn how to create interactive forms in this document. Discover how to use drag and drop components, CSS, and JavaScript/AngularJS code to build an application. Find out how to add multiple pages with their own HTML code, AngularJS controllers, and depen
createdAt: 2021-10-01T18:55:10.000Z
---
É através do formulário que o usuário interage com a aplicação. Ele é criado combinando componentes drag and drop de interface de usuário, recursos CSS e código JavaScript e AngularJS.
## Características
- Cada formulário pode conter uma ou mais páginas e cada uma possui código HTML, um controlador AngularJS e uma coleção de dependências;
- O layout da tela é comum a todas as páginas de formulário e é construído arrastando e soltando componentes da interface do usuário;
- O layout da tela, desenhado na guia Desenho da tela, contém uma coleção de linhas, em que cada linha pode ter um ou mais componentes da interface do usuário;
- Páginas previamente configuradas no sistema:
- **Página de CRUD** – Página configurada automaticamente pelo sistema, durante a criação do Objeto de Negócios, que fornece a funcionalidade CRUD (criar, ler, atualizar e excluir) ao Objeto de Negócios;
- **Página padrão** – Página usada para fornecer dados do usuário durante a criação de uma solicitação de serviço do **4biz**;
- **Página de processo** – Página usada para iniciar um Processo de Negócios do Builder;
- **Página de tarefa** – Página que renderiza um formulário do Builder na tela de ticket de um workflow do **4biz** Tracker;
- **Página de relatório** – Página para integração do formulário com os relatórios gerados pelo sistema, incluindo dependências específicas para a execução de um relatório JASPER.
## Antes de começar
- [x] É necessário ter criado a **Aplicação Builder**.
## Procedimento
1. Acesse a funcionalidade pelo menu de navegação `Builder > Gerenciamento > Formulário`;
2. Clique em "**Cadastrar**";
3. Complete os campos disponíveis na aba "**Identificação**":
- Nome da Aplicação Builder a qual o formulário pertence
- Nome do formulário
- Descrição do formulário
- Regra de negócio de validação, se necessário
- Pasta onde as configurações do formulário serão armazenadas
:::hint{type="warning"}
⚠ **Atenção****!**
A versão é incrementada automaticamente pelo sistema sempre que uma nova versão do formulário é criada.
:::
4\. Adicionar Página
::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/ergMChyH43_htdTnDJ_Iy_image.png" size="46" width="301" height="181" caption="Figura 2 - Adicionar Página" position="center" showCaption="true"}
5\. As abas geradas terão a seguinte estrutura:
- **Propriedades****: **dados gerais
- **HTML****: **estrutura de página HTML
- **Controlador****: **código do controlador referente ao formulário
- **Dependências****: **Se o formulário precisar de código externo, esse código deverá ser registrado como uma dependência. O nome da dependência, caminho em que está localizada e se deve ser injetada no controlador também deve ser informados.
6\. Desenhe a tela. Para criar o design da tela, clique em "**Editar**" ou navegue até a guia do sistema Desenhar Tela, que se abre automaticamente.
- Arraste os componentes localizados na paleta do lado esquerdo e solte-os no centro da tela. Os componentes são organizados em linhas e colunas, cada linha tendo uma largura de 12 colunas.
- Você pode criar guias para os formulários. Para fazer isso, vá para o menu da guia e escolha as guias na organização horizontal ou vertical. Arraste e solte componentes nas guias, conforme explicado acima.
7\. Clique em "**Salvar**" para efetivar as alterações. Você pode salvá-lo na versão original (versão atual) ou em uma nova versão.
:::hint{type="success"}
**JS para teste**
Nessa guia, é possível incluir variáveis para testar o código JavaScript do controlador. Mais informações podem ser encontradas em Desenvolvendo aplicativos.
:::