Build a Detail Screen

Topic

A detail screen is an app screen that shows one table row of data.

While the above image shows what's going on underneath the hood of a detail screen, below you can see how a detail screen will function in an app.

If you have a list of items displayed on Screen 1 and want your users to be able to click on an item to navigate to a screen that shows the details about the item, a detail screen is super useful.

:hammer_and_wrench: Builder's Tip: If you use the app wizard to build an app, the detail screen can built automatically.

Steps

These steps assume you already have a table of data. We are using the Simple To-do template.

  1. In Builder, click on Column list or Stacked list depending on how you want your data displayed to the end user.

Detail Screen_Image 3

  1. Select the List source (the table) and Display (the columns you want to show in the app). Check the Add a detail screen box.

  1. Click View app and click on an item to view its detail screen. The dropdown on the detail screen allows you to toggle to detail screens for other list items.

Was this article helpful?
  • Yes
  • No

0 voters