Follow

Crafting Your Navigation Menu

The navigation menu is the backbone of the event app that provides access to all of the different areas within the app. It is important to structure your menu in a coherent and sensible manner so that participants can easily locate features as desired.

This tip sheet is a step-by-step guide for customizing the navigation menu in your event app.

Using the Navigation Menu Editor

SpotManMenuEditor.png

The Navigation Menu Editor can be found in the SpotMan Menu module in Backstage. The menu editor includes a mock-up of the menu as it appears within the app. From there, you can add separators and custom items, update the order of menu items, and hide or unhide menu items as needed.

Testing Updates on a Device

As changes are made in the menu editor in Backstage, they should also be confirmed within the event app as well. Once you’ve made a change in the menu editor in Backstage, tap the “Synced” button in the menu in-app to pull in the latest updates. As the event app syncs the latest changes to the menu, it will appear blank for a moment before returning with the menu items updated to reflect the latest changes. Once the menu items reappear, confirm that the changes are appearing as expected.

Adding a Separator to the Menu

Screen_Shot_2017-07-07_at_5.34.31_PM.png

A separator is a section header within the menu that identifies a grouping of the following menu items. The separators "MAIN MENU" and "SERVICES" are included in the menu by default when an event is first created.

Choosing a Translation

In order to add in text for a new separator, a translation must be selected that includes the desired title. To select a translation, click the dropdown menu in the “Title” field under the “Add a Separator” section and select the corresponding translation.

Creating a New Translation

If a translation does not exist that contains the desired title, a new translation must be created. To create a new translation, select the "Add a New Shared Translation" option from the dropdown.

Once selected, a pop-up menu will appear which asks for an i18n key to be entered. The i18n key should start with "section_title." followed by the title that will be used with no capitalization or special characters and the spaces replaced with underscores. In the example below, the i18n key is "section_title.new_section". Once the i18n key has been entered, click "OK".

The next menu will prompt for an English translation to be entered. Enter in the separator title in English with proper capitalization, special characters, and spacing here. Note that the default separators contain all capital letters, so you may want to include all capital letters in the new separator title to remain consistent. If additional translations will be included, click the "Add a language" button to add in support for additional languages. Once all translations have been entered, click the "Save and Close" button to save the translation.

Once you have been brought back to the Navigation Menu Editor page, click the dropdown menu in the "Title" field under the "Add a Separator" section, and select the translation that was just created. Click the "Save" button, and a separator will be added to the menu in Backstage.

Adding a Custom Item in the Menu

In addition to being able to add separators to the menu, various interactive features within the app can be added to the menu as well.

Types of Custom Items

There are 4 main options, known in Backstage, which you can use in order to add different items on the Navigation can be added to the menu in the Navigation Menu Editor. 

Screen_Shot_2018-01-23_at_09.41.19.png

  • New Message Launcher

The New Message Launcher allows you to create a button on the Navigation menu, which once clicked, prompts the user to directly send a new message.

  • My Profile Launcher

My Profile Launcher allows you to add the option for participants to be able to edit their contact information, as well as upload profile pictures from their devices. The profile row is available by default on any new event at the top of the Navigation Menu. 

  • URL Launcher

Using the URL Launcher, you can create a dedicated button on the Navigation menu that redirects the user to an external URL. The URL is opened in the in-app browser by default but can be set to open in the default device browser outside of the app by unchecking the "Open in Browser?" checkbox. 

  • Generic Item Launcher

Using the Generic Item Launcher you can create buttons on the Menu linked to any other content available in the app. Some examples include:

  1. Folder containg documents;
  2. Content pages;
  3. Single items - a single document, survey (form), page, message, presenter, session, etc.;
  4. Links to cutoms participants or presenters lists;
  5. Links to advanced or custom features;

Creating a New Custom Item

Screen_Shot_2017-07-07_at_5.40.57_PM.png

There are four steps that need to be taken to create a new custom item in the Navigation Menu Editor:

  1. Setting a translation for the item;
  2. Choosing an icon for the item;
  3. Selecting the item to be opened;
  4. Setting a target on the item if only a certain group of participants should see it in the menu (optional step).

Choosing the Translation

In order to add in text for a custom item, a translation must be selected that includes the desired title. To select a translation, click the dropdown menu in the "Label" field under the "Add a Custom Item” section and select the corresponding translation.

If a translation does not exist that contains the desired title, a new translation must be created. Reference the "Creating a New Translation" section included in the "Adding a Separator in the Menu" section of this tip sheet for a full list of instructions to complete this step.

Choosing the Icon

An icon must be chosen to display alongside the item title in the menu. To select an icon from the existing list, click the "Choose" button in the "Icon" field under the "Add a Custom Item" section and select the desired icon. To add a new icon in, click the "Upload" button in the "Icon" field, enter the unique identifier for the image in the pop-up that appears, and upload the new icon image file here. Note that any icon images that will be used in the menu should be uploaded as a 72×72px .png file with 16 px padding on each side.

Choosing the Item

The method for choosing the item that will be opened when the menu item is clicked on in the app will differ based on the custom item type being used. Regardless of the item type, the location of the desired item in Backstage should be chosen or the link provided in the corresponding field. Once the correct item has been selected or input depending on the item type, click the "OK" button to save that item.

Setting a Target on the Custom Item (Optional)

There is an optional setting on all custom items in the SpotMan Menu Editor that allows you to set a target on the visibility of the item in the menu. This can be used to expose the item to a certain group of participants.

To set a target on the item, choose the proper target or exception rule in the "Visibility Targets" field under the "Add a Custom Item" section and set the appropriate rule for the desired participant group. For more information on how to set targets on custom items, refer to the "Creating Targets in Backstage" page.

Editing Items in the Menu

The translation, icon, selected item, and targets of a menu item can be edited by clicking on the item in the Navigation Menu Editor. The item details will appear to the right of the menu mock-up and can be edited at any time. After editing the item details click the "Save changes" button that appears on screen to save the updated menu settings.

Rearranging Items in the Menu

All items within the menu can be reordered in the Navigation Menu Editor. To reorder an item in the menu, click the 3 lines icon next to the corresponding menu item and drag it to the order in the menu where you would like it to appear. Once you release the item, save the changes in Backstage by clicking on the "Save changes" button that appears on screen.

Hiding and Restoring Items in the Menu

All items can be hidden from or restored to the menu as needed. To hide an item from the menu, click on the item in the Navigation Menu Editor. In the item details that appear to the right of the menu mock-up, a "Visible" button will appear next to the item title. Click on the button to toggle it to "Hidden". Once the button has been set to "Hidden", it will no longer appear in the menu. Click the "Save changes" button that appears on screen to save updated menu settings.

In order to restore an item to the menu, find the "Restore Hidden Items" section in the Navigation Menu Editor page. The icons for all items that have been hidden from the menu will appear in this section. You can mouse over the icons to see the titles of each item appear in a pop-up for further confirmation. Click on the icon for the corresponding item to restore it to the menu. Click the "Save changes" button that appears on screen to save the updated menu settings. 

Navigation Bar

The Navigation bar allows to make the most commonly visited and relevant features for the event participants easily accessible on a bar placed at the bottom of the Menu.

To enable and configure the toolbar:

  1. Navigate to SpotMan menu section in Backstage and then:
    • Scroll down to the end of the page
    • Configure which SpotMan items you wish to have in the toolbar
    • Click Save changes
    • Tick Enable navigation bar
    • Sync your app and restart it for the changes to be applied
  2. Navigate to the Theme editor in Backstage and click Save (or customise the Navigation bar's appearance under Advanced settings)

Screen_Shot_2018-01-23_at_21.15.01.png

You can define which feature will be shown on the bar by selecting them from the available dropdown menus. You can shoose up to three features.

The bar is visible only on phones and small Android tablets in portrait mode.

Release_201709_nav_bar.jpg

Profile header

Profile row can now display a banner in the background, enforcing customer's branding throughout the app from any screen. The new modern layout also works better with long user and event names should that have ever been a problem.

To upload a custom banner you will need the latest version of profile package (2.4.0) installed. To upload a custom banner:

  1. Navigate to SpotMan menu in Backstage
  2. Click on the Profile row at the top of the menu
  3. Click Upload to upload a new banner or Choose to upload an existing one

You might have to sync and restart the app after applying a banner for the first time.

Release_201709_profile_row_ios.jpg

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.