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:

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.
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.
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.

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

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:

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).

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:

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

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.
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).

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.
5. Em Selection Options (Opções de seleção), adicione as seguintes opções:
6. Quadro de bicicleta
7. Roda
8. Drivetrain

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.
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.

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

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).
5. Em Fields (Campos), adicione os seguintes campos:
6. ID
7. Produto
8. Quantidade
9. Data de criação
10. Status
11. Cor

1. Clique e arraste os quadrados ao redor do widget para ajustar as dimensões e ver todos os campos.

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:

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.

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
• Passo a passo: Criar sua primeira análise