How to set up navigation in a Sapho micro app

Audience: Developers building Sapho micro apps

Sapho Builder allows setting up basic micro app navigation using headers and button bars.

Header

The Header lets users navigate across micro apps and is divided into three sections:

  • Left Items - items on the left side of the header.
  • Center Items - items centered between the Left and Right Items.
  • Right Items - items on the right side of the header.

01-header-items.jpg

Each header section supports the following items:

  • Button - a button with the standard actions that you can set within Sapho Builder (e.g. Go to Page, Go to Home, Back, etc.)
  • Image - upload and display a static image
  • Text - static text
  • Variable - displays the value of a session variable (e.g. User Email, User Login Name, etc.)
  • Micro App Name - displays the name of the current micro app
  • Micro App Icon - displays the icon of the current micro app
  • Page Name - displays the name of the current page within a micro app page
  • Menu - a dropdown menu opened from an icon or label with further items and dividers you that can be further customized in a dialog window

Button Bar

The Button Bar is typically the list of main navigation options at the bottom of the screen within micro app itself. Click Edit Buttons to edit the buttons that appear in your Button Bar.

You can add a new button by clicking the blue + icon in the dialog window. Button Bar buttons have the same setting options as the buttons that can be added to the Header.

Buttons in the Button Bar settings can be customized for the following:

  • Default Bar Position - top or bottom of the screen
  • iOS Bar Position - top or bottom of the screen
  • Android Bar Position - top or bottom of the screen
  • Icon size - adjusts the size of the micro app icons shown in the button bar
  • Font size - adjusts the size of the font shown in the button bar

Inherit the Home app’s navigation in other apps

To simplify bulk setup for multiple micro apps, Sapho allows you to set up navigation in the Home App first and allow other micro apps to inherit these settings.

  1. Go to Sapho Builder.
  2. Select the Home App from your micro apps list.
  3. Go to Look to set up basic navigation. You can do this in Header and also in Button Bar. The available navigation options will be explained in the sections below.

Once you have set up navigation in the Home App, you will now see the option Inherit from Home in other micro apps when you go to Look in the left-side navigation.

For each of the available subsections under Look, you can set whether you want to customize on the level of the micro app, or inherit settings from the Home App.

The Home App’s auto-generated navigation

Inheriting settings from your Home App is based on its auto-generated navigation. Here is a quick overview of how auto-generated navigation behaves.

Right Header Items in your Home App are auto-generated in the following order:

  • Feed
  • Your apps grid
  • A list of all your available published micro apps
  • Settings
  • Logout

Please note: Your list of published micro apps is automatically updated when you create new micro apps, and update or remove existing micro apps.