Build a Form from Scratch

Topic

Forms in Honeycode provide an easy way for your users to add and update data in your tables. You can build a form for just about anything from a simple contact form to a detailed survey.

The image below shows an example of an Add Task form in a Task Tracker App that we'll be showcasing throughout this article. This form let's users add new tasks to the Tasks table via the app.

This Add Task form is an app screen that allows your teammates to fill out a form that adds a new task (a row of data) to the Tasks Table.

Starting with the table, we can see it contains four key columns:

  • Task contains the task name
  • Assignee contains the task owner (formatted as a Contacts column)
  • Date contains the due date (formatted as a Date Column)
  • Done tracks whether the tasks is completed (uses a picklist from another table with values Yes and No)

Steps

Add Task button

We already have an app with a screen that displays all the tasks from the table.

  1. From the builder, we will add a button on the list screen and change the button label to Add Task. This button will allow to user to access the form screen.

  1. Next let’s create a new screen. This is will become our form and we'll also call it Add Task. Click the [+] sign in the Screens panel to add a new screen and rename it in the Screen Properties panel.

New Screen_Image

  1. We don’t want users to access this screen directly. We only want them to access it through the Add Task button we created in the last step. To do this, we'll edit the app navigation settings. Click on App navigation in the toolbar.

Add App Navigation_Image

  1. Now we'll drag the Add Task screen from the Show in navigation section to the Hide from navigation This removes the Add Task screen from the navigation bar at the bottom of the app.

App Navigation Properties_Image

  1. Next, we'll configure the Add Task button on the Tasks screen to navigate to the Add Task screen form. We can do this by selecting the Add Task button. Then in the properties panel, go to Actions > Edit Automation > Navigate to new screen and select Add Task.

Click on View app in the toolbar to use the app. In the app, click on the Add Task button and you should see the Add Task screen. It’s empty, so we'll need to set it up.

Build the form

We need to create a form to allow the user to provide all the information needed to create a new task. The Tasks table has four columns. Hence, the form needs four fields - one for each column. Each field needs a label to display the column name so that user knows what information we are looking for.

Additionally, the form needs allow the user to submit the data when they are ready or cancel if they want to abort. So the form needs two buttons - Save and Cancel.

  1. To build this form, add a blank block.

  1. Next, let’s add fields for each column. For the Task field, in the content box, type Task. Since the Task column is auto formatted, we will insert an Input field.

Add Fields_Image

  1. Add a content box and type Assignee in it. Since the Assignee column is formatted for contacts, insert a contact user input. This will ensure our app users get a contact picker (a feature that populates existing contacts that you chose from in runtime).

Add Content Box_Image

  1. The same thing goes for Due. Since the Due column is formatted for dates, we add a Date field. This will ensure our app users get a date picker.

  2. Since the Done column is a picklist (from the Done table), we will add a picklist from the Done table. This will ensure our app users get a picklist (a UI dropdown menu) to choose from.

This is what the form should look like:

Add Save and Cancel buttons

Next let’s add the Save and Cancel buttons.

  1. Add a segment if you do not want full width buttons. In the new segment, let’s add two buttons.

  2. Edit the labels to say Add & Cancel.

  3. After resizing the buttons, drag and drop the Add button to the right.

  4. Format the Cancel button with a light red to give the appearance of a secondary button.

Add automations to buttons

Now, lets setup the Add button to trigger the automation that will save what the user entered to the table.

  1. Select the Add button and in the properties panel go to Actions > Automation and click on Create an Automation.

  2. This automation will be triggered when the button is clicked. Click on Add actions and select the Add a row option. This will add a row to the table with the user’s data input.

  1. Select Tasks in the Add row to dropdown

If you click on this button in you app, an empty row will be add to the Tasks table. Try it.

Rename data cells and add automations

  1. Let’s rename the data cells and configure the fields for saved data.

Rename:
Input field → Task
Contact → Assignee
Date → Due
Picklist → Done

  1. Now, let’s edit the automation. Select the Add button and in the properties panel and click on Actions > Edit Automation.

  2. We want to save the data in the Task data cell in the Task column in the new row. So, in Take data from enter '=$[Task]' and in the Write to column pick Task.

  1. We will repeat the process for all other fields.

Take data from → Write to
= $[Assigneed] → Assigned
= $[Due] → Due
= $[Done] → Done

  1. In the Automation Edit view, click on Add actions > Navigate.

Automation Edit_Image

  1. In the dropdown in the Navigate block, select Previous screen. This take the user back to the last screen they were on. Remember, our users access the form through a button on the Tasks screen. So, Previous screen will take them back to the Tasks screen where they can see the newly added row.

Cancel button automation

We need to setup the Cancel button too. It just needs to navigate to the Previous screen since the user wants to abort and no data needs to be saved.

  1. Select the Cancel button on the Add Tasks screen.

  2. Go to Properties > Actions. Under Quick actions > Navigate to new screen, select Previous screen.

That is it. You just set up a form from scratch.

Was this article helpful?
  • Yes
  • No

0 voters

2 Likes