Step-by-Step Building with App Wizard

Topic

The App Wizard helps you quickly build and customize apps with a live side-by-side preview and will guide you through building one of the most common patterns in app design known as List screen → Detail screen → Form screen.

This pattern is great for displaying spreadsheet data to app users. It provides a birds eye view of the data with the list, an up close and personal view on the detail screen, and the ability to enter new data on the form screen.

  • Lists: Often found on the home screen of an app, a list shows high level information. Lists are app objects that can display multiple rows of data from a table.
  • Detail screens: After clicking an row in a list, it's common for the app to navigate to a detail screen that shows more in-depth information about the row. It's also common that you can edit the row's data or even delete the row on this screen.
  • Forms: Common in Honeycode apps, these app objects allow users to make new rows. Typically, the app user will fill out the fields and click a button, which triggers the data to be added in the form of a row to a specified table.
    This might sound complicated, so that's why we have our App Wizard that will do all the work for you.

Steps

  1. To use the App Wizard, you’ll first need some data in a table. You can start from scratch or you can import a dataset via a CSV file. Our Tables Overview article is a good place to start to familiarize yourself with the capabilities of Honeycode tables.

  2. You can access the App Wizard two different ways from inside your workbook. Click the [+] in the left nav next to Apps, and select Use App Wizard. Or click on the [+] Build app icon.

  1. Choose Use app wizard from the pop-up box.

  1. Choose a table of data you want to use for the app. Click Next.

:hammer_and_wrench: Builder tip: The table you select in this step is what is being used for the List screen → Detail screen → Form screen.

  1. In the Data tab, simply drag and drop columns to rearrange the order they appear in the app. You can also add or delete columns. Once you've set up your list screen, click Next.

:hammer_and_wrench: Builder tip: By default, you’ll see the first six columns of your table data in the live preview of your list screen using the Columns List Layout (often preferable for Web apps). This is how your app will look on the web. To switch to the Stacked List Layout (often preferable for mobile apps) simply toggle to the Stacked setting.

  1. If your data has any table columns that contain Contacts formats, you can turn on personalization, which means your app users will only see data from table rows they’re tagged in. Check the box to show only user-specific data.

  2. A detail screen and a form screen will be automatically created. The detail screen is a drill-in view of one row in your app. The form screen allows app users to add items to the list. Click Next to configure your detail screen.

:hammer_and_wrench: Builder’s tip: The live preview of the detail screen will only show data from the first row in your table. In your app, every row in the list will have its own detail screen with corresponding data.

  1. Drag and drop columns to rearrange the order they appear in the app. Clicking on the pencil icon allows app users to edit column data.

  1. Click Next to configure the form screen.

  2. Just as in the list and detail screens, you can add, remove, and rearrange columns in the form screen.

:hammer_and_wrench: Builder's tip: Although not part of the App Wizard, you can style your app and make changes, like button text and color, in the Builder once you've completed these steps.

  1. Click Apply to put the finishing touches on your list, detail and form screens.

Nicely done. You've just built an app. Before you close the App Wizard, there are a few things you can do on this screen:

  1. To make edits to what you just built, click Edit in the box in the right panel
  2. To add another set of screens to your app, click +Add Screens
  3. Click on View App to close the Wizard and go to your web app—it’s live, ready to use, and ready to be shared.
  4. Click Done to navigate to the Builder for more advanced customizations.

Sign in to Honeycode here!

Was this article helpful?
  • Yes
  • No

0 voters

2 Likes