---
title: "Walkthrough: Build a data entry form"
slug: "walkthrough-build-a-data-entry-form"
updated: 2025-05-09T22:12:24Z
published: 2025-05-09T22:12:24Z
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: Build a data entry form

**In this walkthrough, you will:**

- **Create an input form on a step using input widgets**
- **Save input data to variables and a table**
- **Review table records on a step**

In this walkthrough, you’ll learn how to store data in an app and also store input data from an app to a table.

At the end of both exercises, you’ll have a data entry app that will look like this: ![ex first data entry app walkthrough](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20app%20walkthrough.gif)

## Exercise 1: Save input data to app

In this exercise, you will create a basic step that saves input data to variables.

### Create a new app

1. In the **Apps** tab, click **Apps**. ![Apps tab](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Apps%20tab.png)
2. Click **+ Create App** in the top right corner.
3. Name the app “Data Entry Form - Example”. Optionally, you can add a description so other users know what this app is for. ![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. Click **+ Create**.

From the app details page, you can either click **Edit** in the top right corner, or click the **Untitled Step** name to enter the App Editor.

### Add input widgets with variable data sources

1. Click the **Inputs** tab and select **Checkbox**.
2. In the **Side pane**, name the **Label**: “Work order completed”.
3. Under **Datasource**, click the empty box and then **+** **Add variable**.
4. Name the variable “Work order completed” and change the **Default value** to **no**. Click **+ 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)

The widget configuration will look like this:

![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. Add a **Date picker** widget from the **Inputs tab**.
2. In the **Side pane**, name the **Label**: “Date completed”.
3. Under **Datasource**, click the empty box and then **+** **Add variable**.
4. Name the variable “Date completed” and click **+ Create**.

The widget configuration will look like this: ![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)

### Create a trigger to save input data

1. Click to **Buttons** tab and select **Submit**.
2. In the **Side pane**, click the **+ plus sign** next to **Triggers**.
3. Title the trigger “Save app data”.
4. Under the **Then** section, select **App** from the dropdown. Then select **Save All App Data**. Click **Save**.  

![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)

Now you have a basic data entry step that uses variables to store values. Here is what the app looks like when you **Test** it in Developer Mode: ![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)

Notice that the variables store into completions data, which you can see below the step screen.

## Exercise 2: Store input data to table

          
          

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

In this exercise, you will create a data entry step that saves values to a Work Orders table. You will also be able to view the records in the table from the app step.

1. Add a **new step** and name it “Exercise 2”.

### Add the table to the app

1. Click the **Records** tab and select **+ Add table**.
2. Select the **Work Orders** table, then click **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. Click the **+** icon next to **Record Placeholder**.
4. Name the record placeholder: “Current Work Orders”. Click **Add record placeholder**.

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

### Create the data form inputs

1. Click **Inputs** and select the **Single select**.
2. In the Side Pane, label the widget: “Product”.
3. Under **Data options**, click the blank **Datasource** field and then **+ Add variable**.
4. Name the variable “Product” and then click **+ 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. In **Selection Options**, add the following options:

- Bicycle frame
- Wheel
- 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. Add a **Number Input** widget to the step.
2. Name the label: “Quantity”.
3. Under **Data options**, click the blank **Datasource** field and then **+ Add variable**.
4. Name the variable “Product” and then click **+ 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. Under **Validation Rules**, click **+** to add a rule.
6. Select **Greater Than** and type “0” as a static value.

![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)

### Create button trigger to store input values

1. Add a **button** to the step.
2. In the side pane, add text: “Create work order”.
3. Under **Triggers**, click **+**.
4. Name the trigger: “Store input values to new Work order record”.
5. Add the following actions to the trigger:

- Table records → Create record → Expression: `RANDOMSTRING()` → Current Work Orders
- Data manipulation → Store → Variable → Product → Table record → Current Work Orders → Product
- Data manipulation → Store → Variable → Quantity → Table record→ 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)

### View Work orders table in step

1. Click **Embed** and select **Interactive Table**.
2. In the **Side Pane** under **Datasource**, select **Tulip Table**.
3. In the next dropdown, select the **Work Orders** table.
4. Under **Linked Placeholder**, select **Current Work Orders**. ![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. Under Fields, add the following fields:

- ID
- Product
- Quantity
- Date Created
- Status
- Color

![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. Click and drag the squares around the widget to adjust the dimensions and see all the fields.  

![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)

Now you have a data entry form that stores variables into a record placeholder and creates a table record from the current placeholder. Here is what the step looks like when you test it in Developer Mode:

![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)

If you type “0” in the quantity, you’ll notice an error message that prompts the user to input an acceptable value. This is possible from the **Validation Rule** you set on the 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)

## Next Steps

Now that you've created a data entry form, learn about app building or how to visualize data:

- [Walkthrough: Build your first app](/r230/docs/walkthrough-build-your-first-app)
- [Walkthrough: Create your first analysis](/r230/docs/walkthrough-create-your-first-analysis)

**App Editor**

The web interface used for building applications. Where you design a user interface, add logic, and connect your applications to **Tables**. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screen%20Shot%202022-09-13%20at%207.50.23%20AM.png)

**Developer Mode**

**Developer Mode** is a dedicated interface to test your applications. Dev mode doesn't write to **Tables** or create **Completions** so production data isn't impacted.