Step-by-Step Building with App Wizard

The App Wizard helps you quickly build and customize apps with a live side-by-side preview.

Getting started: To use the App Wizard, you’ll first need some data in tables. If you haven’t already, create a workbook and import a dataset via CSV file, or start from scratch and enter data manually. Our Tables Overview article is a good place to start to familiarize yourself with the capabilities of Honeycode tables

  1. From inside your workbook, click the [+] in the left nav next to Apps, and select Use App Wizard.

  1. Choose a table of data you want to populate your home screen. The App Wizard will automatically configure your table data into a list—don’t worry, you’ll be able to customize as you go.

:hammer_and_wrench: Builder’s tip: One of the most common patterns in app design is List screen → Detail screen→ Form.

  1. In the Data tab, simply drag and drop columns to rearrange the order they appear in the app. Add columns or delete any you don’t want to show.

:hammer_and_wrench: Builder’s tip: By default, you’ll see the first six columns of your table data in the live preview of your list screen—this is how your app will look on the web.

  1. In the Settings tab, you can organize your list layout as columns or stacked. Toggle between the two to see what you like best.

:hammer_and_wrench: Builder’s tip: A columns layout displays data horizontally, like a table. This is a great layout for web apps since you can take advantage of a wider screen. A stacked layout places column data on top of each other vertically, which can work particularly well for mobile apps.

  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.

  1. 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: You can style your app and make changes, like button text and color, in the App Builder.

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

Nicely done— you just built an app in 10 steps . High five! Before you close the App Wizard, there’s a few things you can do:

  • To make edits, select the set of screens you just customized in the right panel
  • Add another set of screens to your app by clicking +Add Screens
  • Click on View App to close the Wizard and go to your web app—it’s live, ready to use and share!

Once you exit the App Wizard, you can continue to edit and style your app using the the Builder. To open the Builder, go into your workbook and select your app from the Apps list in the left nav.

Sign in to Honeycode here!

Was this article helpful?
  • Yes
  • No

0 voters

1 Like