List -->Detail--> Form

Common patterns in app design

One of the most common patterns you’ll see in app design is this progression: List screen → Detail screen→ Form. Let’s break down the list, detail, and form pattern a bit further.

Let’s say you’re building a customer tracking app. Your list screen would show top-level information, like customer lead, owner, contract, status. The detail screen shows more in-depth info about a customer, like meetings, and notes. Finally, the form allows users to add and update your master customer list.


List screen

Picture a simple to-do list. Now, imagine that every item in the list represents a row in a table. A list screen can display all the rows of data from a table, or just a subset. For example, you might choose to display only projects that are active.

You can also give app users the ability to filter data. For example, users might choose to view only projects that are at risk overdue.

:hammer: Builder tip: You can add list filters to your app using the list shortcut in Builder or by using a filter expression. See more about filters.

Once users find the row they need, they can either edit the data, or select it to view additional data for that row.


Detail screen

Detail screens, sometimes called “edit” screens, typically display all or a majority of data from one row in a table. For example, from a list of projects, a detail screen will display data from only one selected project.

Detail screens can have input fields for app users to edit data, and they may also display lists of related data. For example, a project’s detail screen might display a list of tasks associated with the project.


Form

You can use forms to allow users to add new rows of data to your source table, via the app. A form screen has input fields for all the information you want your users to provide, along with buttons to let them submit or cancel their inputs

For example, users could add a new project to a form, and the new project will appear in the main projects list. You can also configure more advanced forms to do things like automatically capture the user’s submission time.


Advanced screen configurations

You can also create some more advanced app screen configurations using personalization and filter expressions. For example, you can build a personalized home screens that only displays data relevant to the user. Or, you can use a filter to display projects in order of due date.

There’s a lot you can do in Honeycode to optimize your team’s work, just based on this common pattern.

Was this article helpful?
  • Yes
  • No

0 voters

1 Like