Extend a Template by Adding a Summary Screen

Topic overview

Honeycode templates offer fully functioning, feature rich apps, but what if your team needs more? Let's look at the project tracker template and customize it to include a task summary page. This page offers you and your stakeholders a quick glance to tasks involved for each project.

We'll walk through how you can quickly customize your apps for your team. You'll learn:

  • Adding screens
  • Managing fields on screens
  • Allow users to filter what's shown on the screen
  • Adding screens to app navigation

Screen layouts

Honeycode offers two summary screen layouts - card view and list view. The project tracker uses the card view for the opening screen. We’ll use the list view to show a simple table.

Add the screen

For this exercise, you’ll add a list view to offer stakeholders a glance into progress on tasks:

  1. If you are viewing the live app, select Edit screen.
  2. Select Insert + in the top bar.
  3. Select a view.
  4. Under source table, Honeycode lists the tables contained in the workbook. Choose Tasks as the source table.
  5. Select Add screen to app.

The new screen displays in the central editor and is listed at the bottom of the left panel App Screens list.

Update the screen name

We suggest updating screen names, its easy to do and helps you keep track.

  1. In the left panel App Screens list, float over the new screen (on the bottom) to activate the ellipsis menu.

  1. Select the ellipsis, then Rename.
  2. Type the name most meaningful for you. We limit screen names to ensure readability across platforms and screen sizes.

Edit fields displayed

Honeycode drops some fields on the screen to help you visualize how you’ll work with the information. You have control of what displays and where on the screen. Work your way down the screen to show the information you want and remove what isn’t important.

Update the text box

To begin, a text field with Sample text shows on the top of the screen. You can use this section to provide your app users with some context around what the screen offers, how the app works, or just remove it.

  1. Select the text field to activate it’s properties panel. The field highlights with a blue outline.
  2. In the properties panel, select Sample text to open the text field editor.
  3. Update the text to meet your needs, then click Save.
  4. Expand Appearance in the properties panel and set the style for the text box.

Alternatively, you can choose to delete the field. Be certain the field is selected, then click Delete on your keyboard.

Update available fields

Consider what information your stakeholders need, then use the properties panel to set the fields.

  1. Select the list component to activate it’s properties panel. The screen component highlights with a blue outline.
  2. Use the properties panel to select which fields you’ll show on the screen.
    • Click the down-arrow to view all available fields, then select which you want on the new screen.
    • To leave a field blank, select Unmap field.
  3. With the fields determined, use the Appearance section to set:
    • Style - Enhanced, Standard, or Compact
    • Group by - Adds navigation tabs to the screen

Allow users to filter, sort, and search

Honeycode offers a quick means to add filtering, sorting, and searching capabilities to your screens.

  1. Select the list component to activate it’s properties panel. The screen component highlights with a blue outline.
  2. In the properties panel, expand Add ons, select which options you want to offer your app users - Search, Filter, Sort.
  3. If you want, you can restrict filtering and sorting to specific fields. Select the add ons' ellipsis and select which fields are available.

Filter Options

Add the screen to app navigation

With the screen ready, you’ll add it to the app navigation. This makes the screen accessible by your app users.

  1. Select Overview in the top bar. The right panel updates to serve App Settings.

  1. In the right panel, under Screen Navigation, select the down-arrow on an open slot.
  2. Select Task Status from the listed screens.

In this article, you’ve expanded on a Honeycode template to offer your stakeholders a view to the information most important to them.

Was this article helpful?
  • Yes
  • No

0 voters