The app menu provides easy access to all of the different functionalities available in the workspace. As such, it is a central component of the app user's experience, and needs to be built in a structured and user-friendly manner.
In this article, Backstage users will find all the information they need to configure the app menu in the workspace. Please note that all the modules that are installed on the workspace will, by default, appear in the app menu.
Overview of the app menu editor
The app menu editor is the tool in Backstage used to configure the app menu.
To open the app menu editor, go to the Backstage menu and select App menu:
The app menu editor includes the following three elements:
- The entire left side of the screen displays how the app menu will look in the app.
- The upper-right part of the screen is where you can configure modules, or add custom items and separators to the app menu.
- The lower-right side of the screen is where you can configure the Navigation bar.
Configuring the app menu
In the left side pane of the app menu editor, Backstage users can select any app menu item.
Clicking on an item on the left displays its configuration options on the right side of the screen:
Reordering menu items
Items in the app menu can be arranged into the order that you want, by selecting the ≡ icon located to the right of the item name, and then dragging and dropping the item up or down in the list.
Displaying or hiding menu items
Backstage users can choose whether a menu item will be displayed or not in the app menu, by selecting the item to the left of the screen, and selecting VISIBLE or HIDDEN.
Note: If an item is hidden from the app menu, it will be added to the Restore hidden items list (available in the app menu editor screen), and can easily be restored to the app menu at any time.
Configuring menu items
To configure a menu item, Backstage users need to associate a label with the app menu item.
Labels contain the translation key (label identifier), the translations (the text actually displayed in the menu item, that can be in multiple languages) and the icon that is displayed for the label. There are existing labels in the drop-down list that you can choose from, and you can also create new labels:
- The translation key: The translation key works as a unique identifier for the app menu item (or label). New labels can also be created by selecting Add a new shared translation in the Label drop-down list. The system will prompt you to enter a new label ID (the i18n key), and then to add the text to be displayed in English.
When creating a new label, the translation key should start with "section_title." followed by the title to be used, with no capitalization, special characters, or spaces.
The period "." in this string is very important so please do not forget to include it.
Spaces can be replaced with underscores.
Each app menu item must have its own separate identical key.
For example: section_title.video_breakout or section_title.agenda
Once this is done, you can add the actual text translations, i.e. the text that will be displayed for the app menu item in the app.
- The translations: This is the text that is actually visible in the app menu item in the app, including the default English text and any other languages that will be displayed if the app is using a different language than English. Existing label translations can be modified and new label translations can added by clicking on the pencil icon to the right of the label name.
- The icon: This can be modified by removing the existing icon, by clicking on the x icon to the right of the screen, and then either choosing another icon from the Icon dropdown list.
User can also upload a new icon file to be used by clicking on the UPLOAD button to the right of the field.
As an example, in the below screenshot, the menu item is currently:
- VISIBLE in the app menu.
- Associated with a label named section_title.presenters.
- This label displays the text Speakers in the app menu item.
- This label displays the Speaker icon (the microphone) in the app menu item.
The associated app menu item looks like this:
In addition to the existing workspace modules, custom items can be added to the app menu and be configured in a similar manner. Up to 20 custom app menu items can be added to a workspace.
In the app menu editor screen, click on the Add an item drop-down list to display the available options:
The same as for the modules, when adding a custom app menu item you need to configure its associated label, including its ID (the i18n key), displayed text, translations, and icon. For more information on this refer to the section called Configuring menu items.
Please see below the additional information on these custom items.
New message launcher
The New message launcher can be used to add a button to the app menu, that app users can use to directly open a new pre-configured message to be sent.
The body of the message can be pre-written by adding text to the Message field.
The recipient can be pre-configured, by completing the Recipient field.
This can for example be used by an app user to save time when asking a specific person for assistance.
The Feed launcher can be used to add a button to the app menu, that app users can use to open a specific feed in the workspace.
For more information on Feeds please refer to the Managing feeds and posts article.
Generic item launcher
The Generic item launcher is the most used item in the app menu. It can be used to add most types of shortcut buttons to the app menu to provide app users with access to a wide variety content. Some examples include:
- Folders containing documents.
- Content pages.
- Activity challenges.
- Single items such as a document, form, page, notification, speaker, session, etc.
- Links to custom users or speakers lists.
- Links to advanced or custom functionalities.
Note: When adding custom items, Backstage users can tick a box to choose whether the content that will be opened will be displayed on full screen or not.
The URL Launcher can be used to create a dedicated button on the app menu that redirects the app user to an external website. The URL is by default opened in the in-app browser.
Adding a separator to the app menu
Separators in the app menu are used to structure or group certain items of the app menu together.
The separators "MAIN MENU" and "SERVICES" are included in the app menu by default.
The default separators can be removed, modified or moved around just like the other menu items, and new separators can be added if needed.
Separators are added via the Add a separator field:
The same as for the modules, when adding a separator menu item you need to configure its associated label, including its ID (the i18n key), displayed text, and translations. For more information on this refer to the section called Configuring menu items.
Adding targeting to app menu items
In the app menu editor, for some menu items, targeting can be configured to determine which specific app users will be able to see the app menu item in their workspace (or app menu).
To configure targeting on a menu item, select the item in the list on he left in the app menu editor page. Then click on the Visible to everyone icons to determine which user(s) will be able to see the item, and which user will not(s).
Note: Targeting is not possible for the following modules: Home, Agenda, Notes, Forms, Chats, Notifications, and Sponsors.
For more information on how to set targets on custom items, refer to the Creating targets in Backstage article.
Configuring the Navigation bar
The navigation bar is always located at the bottom of the screen in the mobile app, and displays shortcuts to the most commonly used functionalities in the workspace.
To make changes to the navigation bar:
- Go to Design > App menu editor in Backstage.
- Scroll down to the Navigation bar section.
- Choose which app menu items you want to display in the toolbar, using the drop-down lists under each icon.
- Click Save.
Important: When an app menu item is added to the navigation bar, it will automatically be removed from the app menu in the mobile app, to avoid duplicating buttons between the navigation bar and the app menu.
You can choose up to three configurable items to be displayed in the navigation bar.
Tip: If you have two or more of the navigation bar items that are pointing to the same selection (for example multiple items pointing to Agenda or Notifications), then only one of those items will remain saved in the navigation bar. This can actually be used in order to remove any unwanted items from the navigation bar, simply by making the item that you want to remove point at a selection that is already used by another item.
The Home and More items are by default displayed in the Navigation bar (except when using Android apps, where the More item may be located up in the left corner of the screen).
For more information on configuring and designing the navigation bar, please refer to the Navigation bar design article.
Configuring the profile header in the app menu
The app user's profile (with photo and personal information) can be displayed in the app menu, and a banner can be included in the background.
To configure the profile header in the app menu editor, click on Profile above the list of app menu items on the left of the screen.
The following fields will appear on the right side of the screen:
Here you can:
- Select VISIBLE or HIDDEN, to determine whether the app user profile should be displayed in the app menu or not.
- Select an option in the Open drop-down list, to add a link to the user profile section and determine where the link will point to when app users click on their profile header.
- Select an option in the Subtitle drop-down list, to add a subtitle below the app user's name.
- Check or uncheck the Hide profile photo box, to display or hide the app user's photo in the profile header.
- Select an existing banner to be displayed using the Banner drop-down list, or upload a new one by selecting UPLOAD.
The recommended size for a banner is 1500x500px. Please refer to the App design templates article for more information on creating banners.
- Select a degree of transparency for the banner, using the Banner overlay transparency field.
For the next steps in this Getting started series, please continue to the Interactivity in the workspace article.