In this article

    Building the app menu

    • Updated
    Follow

    Summary

    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:

    App_menu_editor_1.png

    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:

    App_menu_editor_15.png

    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 determine the text displayed in the menu item, any available translations for the displayed text, and the icon that is displayed.

    There are many existing labels in the drop-down list that you can choose from, and you can also create new ones:

    • 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.

    Example

    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.

    app_menu_editor_8.png

    The associated app menu item looks like this:

    app_menu_editor_9.png

    Adding custom items to the app menu

    In addition to the existing workspace modules, custom items can be added to the app menu and be configured in a similar manner.
    In the app menu editor screen, click on the Add a custom item drop-down list to display the available options:
    App_menu_editor_6.png
    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.

    Feed launcher

    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.

    Activity Challenge launcher

    The Activity Challenge launcher can be used to add a shortcut button to the app menu, that app users can use to easily access an Activity Challenge in the workspace.

    For more information please refer to the How to use Activity Challenge article.

    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:

    1. Folders containing documents.
    2. Content pages.
    3. Single items such as a document, form, page, notification, speaker, session, etc.
    4. Links to custom users or speakers lists.
    5. 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.

    URL launcher

    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:

    App_menu_editor_7.png

    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).

    App_menu_editor_10.png

    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:

    1. Go to the App menu editor in Backstage.
    2. Scroll down to the Navigation bar section.
    3. Choose which app menu items you want to display in the toolbar, using the drop-down lists under each icon.
    4. Click Save

    app_menu_editor_14.png

    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 (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.

    app_menu_editor_12.png

    The following fields will appear on the right side of the screen:

    app_menu_editor_13.png

    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.

     

     

    Related articles

    Comments

    0 comments

    Please sign in to leave a comment.