The app menu provides easy access to all 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 or build the app menu.
To open the app menu editor, go to the Design category in the main 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 to
displays its configuration options on the right side of the screen:
Reordering app menu items
Items in the app menu can be arranged into the order that you want. Select the ≡ icon located to the right of an item name to move the item up or down in the list.
Displaying or hiding app menu items
Backstage users can choose whether a menu item listed in Backstage will be displayed or not in the app, 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 app menu items
To configure an app menu item, Backstage users need to associate a label with an app menu item.
Labels determine the text displayed in the menu item, any available translations for the displayed text, and the icon that is shown.
- The text: Text in existing labels can be modified by clicking on the pencil icon to the right of the label name. 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.
Note: The i18n key should start with "section_title." followed by the title to be used, with no capitalization, special characters, or spaces. Spaces can be replaced with underscores.
- The translations: These are the translations associated with the label text, and 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 resulting app menu item looks like this:
Adding custom items to the app menu
Generic item launcher
The Generic item launcher can be used to add shortcut buttons to the app menu, that app users can use to access a wide variety content available in the app. Some examples include:
- Folders containing documents.
- Content pages.
- Single items such as a document, URL, Activity challenge, form, page, feed, notification, speaker, session, etc.
- Links to custom users or speakers lists.
- Links to advanced or custom functionalities, such as an Activity challenge
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.
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.
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 app, and displays shortcuts to the most commonly used functionalities in the workspace.
To enable and configure the toolbar:
- Go to the 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
You can choose up to three configurable items to be displayed in the Navigation bar.
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, displaying their photo and personal information, can be edited 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.