---
title: "Walkthrough: Criar um formulário de entrada de dados  "
slug: "walkthrough-build-a-data-entry-form"
updated: 2025-05-27T14:53:05Z
published: 2025-05-27T14:53:05Z
canonical: "support.tulip.co/walkthrough-build-a-data-entry-form"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.tulip.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Walkthrough: Criar um formulário de entrada de dados



**Neste passo a passo, você verá:*** **Criar um formulário de entrada em uma etapa usando widgets de entrada*** **Salvar dados de entrada em variáveis e em uma tabela*** **Revisar registros de tabela em uma etapa**

Neste passo a passo, você aprenderá a armazenar dados em um aplicativo e também a armazenar dados de entrada de um aplicativo em uma tabela.

Ao final dos dois exercícios, você terá um aplicativo de entrada de dados com a seguinte aparência:![ex first data entry app walkthrough](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20app%20walkthrough.gif)

## Exercício 1: Salvar dados de entrada no aplicativo

Neste exercício, você criará uma etapa básica que salva os dados de entrada em variáveis.

### Crie um novo aplicativo

1. Na guia **Apps**, clique em **Apps**.![Apps tab](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Apps%20tab.png)
2. Clique em **+ Create App (Criar aplicativo** ) no canto superior direito.
3. Nomeie o aplicativo como "Data Entry Form - Example" (Formulário de entrada de dados - Exemplo). Opcionalmente, você pode adicionar uma descrição para que outros usuários saibam para que serve esse aplicativo.![ex data entry create new app](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20data%20entry%20create%20new%20app.png)
4. Clique em **+ Create (Criar**).

Na página de detalhes do aplicativo, você pode clicar em **Edit (Editar** ) no canto superior direito ou clicar no nome **Untitled Step (Etapa sem título** ) para entrar no App Editor.

### Adicionar widgets de entrada com fontes de dados variáveis

1. Clique na guia **Inputs** e selecione **Checkbox**.
2. No **painel lateral**, nomeie o **Rótulo**: "Work order completed" (Ordem de trabalho concluída).
3. Em **Datasource**, clique na caixa vazia e depois em **+** **Add variable (Adicionar variável**).
4. Nomeie a variável como "Work order completed" (Ordem de trabalho concluída) e altere o **valor Default (Padrão** ) para **no (não)**. Clique em **+ Create**.![ex data entry work order completed variable](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20data%20entry%20work%20order%20completed%20variable.png)

A configuração do widget terá a seguinte aparência:

![ex first data entry Input widget side pane config](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20Input%20widget%20side%20pane%20config.png)

1. Adicione um widget **de seleção de data** na **guia Inputs (Entradas**).
2. No **painel lateral**, nomeie o **rótulo**: "Date completed" (Data concluída).
3. Em **Datasource**, clique na caixa vazia e depois em **+** **Add variable (Adicionar variável**).
4. Nomeie a variável como "Date completed" (Data de conclusão) e clique em **+ Create (Criar**).

A configuração do widget terá a seguinte aparência:![ex first data entry input widget config2](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20input%20widget%20config2.png)

### Crie um acionador para salvar os dados de entrada

1. Clique na guia **Buttons (Botões** ) e selecione **Submit (Enviar**).
2. No **painel lateral**, clique no  **sinal de mais +** ao lado de **Triggers**.
3. Dê ao acionador o título "Save app data" (Salvar dados do aplicativo).
4. Na seção **Then (Depois** ), selecione **App (Aplicativo** ) no menu suspenso. Em seguida, selecione **Save All App Data (Salvar todos os dados do aplicativo**). Clique em **Save (Salvar**).![ex first data entry save app data trigger](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20save%20app%20data%20trigger.png)

Agora você tem uma etapa básica de entrada de dados que usa variáveis para armazenar valores. Esta é a aparência do aplicativo quando você o **testa** no modo de desenvolvedor:![ex first data entry exercise 1 test](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20exercise%201%20test.gif)

Observe que as variáveis armazenam dados de conclusão, que podem ser vistos abaixo da tela da etapa.

## Exercício 2: Armazenar dados de entrada em uma tabela

              
              

In order to follow this walkthrough, you must first complete the exercises in [Build Your First Table](/r230/docs/walkthrough-build-your-first-table).

Neste exercício, você criará uma etapa de entrada de dados que salva valores em uma tabela de ordens de serviço. Também será possível visualizar os registros na tabela a partir da etapa do aplicativo.1. Adicione uma **nova etapa** e nomeie-a "Exercício 2".

### Adicione a tabela ao aplicativo

1. Clique na guia **Registros** e selecione **+ Adicionar tabela**.
2. Selecione a tabela **Work Orders** e clique em **Add**.![ex first data entry add table](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20add%20table.gif)
3. Clique no ícone **+** ao lado de **Placeholder de registro**.
4. Nomeie o espaço reservado do registro: "Current Work Orders" (Ordens de trabalho atuais). Clique em **Add record placeholder (Adicionar espaço reservado para registro**).

![ex first data entry record placeholder](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20record%20placeholder.png)

### Criar as entradas do formulário de dados

1. Clique em **Inputs** e selecione **Single select**.
2. No painel lateral, rotule o widget: "Product" (Produto).
3. Em **Opções de dados**, clique no campo em branco **Fonte de dados** e, em seguida, em **+ Adicionar variável**.
4. Nomeie a variável como "Product" e clique em **+ Create**.![ex first data entry product input data source](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20product%20input%20data%20source.gif)
5. Em **Selection Options (Opções de seleção**), adicione as seguintes opções:
6. Quadro de bicicleta
7. Roda
8. Drivetrain

![ex first data entry product selection options](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20product%20selection%20options.png)

1. Adicione um widget **Number Input** à etapa.
2. Nomeie o rótulo: "Quantity" (Quantidade).
3. Em **Data options (Opções de dados**), clique no campo **Datasource (Fonte de dados)** em branco e, em seguida, em **+ Add variable (Adicionar variável**).
4. Nomeie a variável como "Product" e clique em **+ Create**.![ex first data entry quantity config](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20quantity%20config.png)
5. Em **Validation Rules (Regras de validação**), clique em **+** para adicionar uma regra.
6. Selecione **Greater Than (Maior que)** e digite "0" como um valor estático.

![ex first data entry validate quantity input](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20validate%20quantity%20input.gif)

### Criar acionador de botão para armazenar valores de entrada

1. Adicione um **botão** à etapa.
2. No painel lateral, adicione o texto: "Create work order" (Criar ordem de serviço).
3. Em **Triggers**, clique em **+**.
4. Nomeie o acionador: "Store input values to new Work order record" (Armazenar valores de entrada no novo registro de ordem de serviço).
5. Adicione as seguintes ações ao acionador:
6. Registros de tabela → Criar registro → Expressão: `RANDOMSTRING()` → Ordens de trabalho atuais
7. Manipulação de dados → Store → Variable → Product → Registro de tabela → Current Work Orders → Product
8. Manipulação de dados → Store → Variable → Quantity → Registro de tabela → Current Work Orders → Quantity

![ex first data entry trigger actions](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20trigger%20actions.png)

### Exibir a tabela de ordens de serviço na etapa

1. Clique em **Embed** e selecione **Tabela interativa**.
2. No **painel lateral**, em **Datasource**, selecione **Tulip Table**.
3. No próximo menu suspenso, selecione a tabela **Work Orders (Ordens de trabalho** ).
4. Em **Linked Placeholder**, selecione **Current Work Orders (Ordens de trabalho atuais**).![ex first data entry interactive table datasource](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20interactive%20table%20datasource.png)
5. Em Fields (Campos), adicione os seguintes campos:
6. ID
7. Produto
8. Quantidade
9. Data de criação
10. Status
11. Cor

![ex first data entry interactive table fields](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20interactive%20table%20fields.png)

1. Clique e arraste os quadrados ao redor do widget para ajustar as dimensões e ver todos os campos.![ex first data entry adjust interactive table](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20adjust%20interactive%20table.gif)

Agora você tem um formulário de entrada de dados que armazena variáveis em um espaço reservado de registro e cria um registro de tabela a partir do espaço reservado atual. Esta é a aparência da etapa quando você a testa no modo de desenvolvedor:

![ex first data entry exercise 2 test](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20exercise%202%20test.gif)

Se você digitar "0" na quantidade, verá uma mensagem de erro que solicita que o usuário insira um valor aceitável. Isso é possível com a **regra de validação** que você definiu no widget.![ex first data entry number widget error message](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20number%20widget%20error%20message.png)

## Próximas etapas

Agora que você criou um formulário de entrada de dados, aprenda sobre a criação de aplicativos ou como visualizar dados:

- [Passo a passo: criar seu primeiro aplicativo](/r230/docs/walkthrough-build-your-first-app)
- [Passo a passo: Criar sua primeira análise](/r230/docs/walkthrough-create-your-first-analysis)