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:

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.
   

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.
   

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.
   

The widget configuration will look like this:

5. Add a Date picker widget from the Inputs tab.
6. In the Side pane, name the Label: “Date completed”.
7. Under Datasource, click the empty box and then + Add variable.
8. Name the variable “Date completed” and click + Create.

The widget configuration will look like this:

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.
   

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:

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

Exercise 2: Store input data to 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.
   

3. Click the + icon next to Record Placeholder.

4. Name the record placeholder: “Current Work Orders”. Click Add record placeholder.

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.
   

5. In Selection Options, add the following options:

• Bicycle frame
• Wheel
• Drivetrain

6. Add a Number Input widget to the step.

7. Name the label: “Quantity”.

8. Under Data options, click the blank Datasource field and then + Add variable.

9. Name the variable “Product” and then click + Create.
   

10. Under Validation Rules, click + to add a rule.

11. Select Greater Than and type “0” as a static value.

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

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.
   

5. Under Fields, add the following fields:

• ID
• Product
• Quantity
• Date Created
• Status
• Color

6. Click and drag the squares around the widget to adjust the dimensions and see all the fields.
   

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:

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.

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
• Walkthrough: Create your first analysis