Using Menu Layers
This applies to: Managed Dashboards, Managed Reports
This article explains how to use a menu layer to display content, such as a menu, that is separate from the rest of the dashboard's template grid.
Walkthrough
This walkthrough will guide you through the steps for creating a menu layer containing a collapsible navigation menu as an example. Use this type of menu when viewing dashboards, reports, or other views for navigation.
When you use responsive resize mode in Symphony, content is automatically re-organized when necessary to remain readable. The re-organized content fills the given screen real estate and allows all content to be accessed by scrolling in one direction.
When you design for smaller screen sizes, you may want to further minimize the amount of space taken up for navigation or other options. You can do this by using a button to show and hide this content in another layer. By using a menu layer, content that fills the screen is independent from the responsive grid.
Add a Menu Button
In this example, an image of a menu button is used to open the navigation menu on the dashboard.
In the Explore window, expand Images and drag and drop an image onto the dashboard. Ensure that the image is positioned where you want it on the dashboard.
Add a Menu Layer
For this example, add a menu layer containing a menu component and a close button.
Note: When you add a new menu layer, all visible layers are deactivated and any other menu layers on the dashboard become active allowing you to edit only the menu layers.
In the Layers window, click the + button in the toolbar and then choose a Menu Layer.
The new menu layer is now the current layer. Double-click the name if you want to rename it.
Add a Close Button
In the Explore window, expand Images and drag an image to use as the close button onto the canvas. This will allow viewers to close the navigation menu and switch back to the main layer.
Position the button in such a way that when viewing the dashboard, the menu button image is placed so that clicking one appears to turn it into the other.
Add and Configure the Menu
With the menu layer still selected as the current layer, go to the toolbar, select Components, and then Menu to add a menu component. Other components such as buttons or images can also be used for navigation.
Position and size the menu, and set up the menu items as required. For more information about menu components, see How To Set Up Menu Navigation.
Configure Click Actions
The following steps set up change layer actions to run when the menu button and the close button are clicked.
Configure the Menu Button
In the Layers window, select the main layer to switch to it.
Select the menu button image, select Set Up Interactions in the toolbar, then choose Show/Hide.
Under Hide Layers, optionally select the main layer. Under Shown Layers, select the menu layer.
Configure the Close Button
Switch back to the menu layer, select the close button, and select Set Up Interactions again, and choose Show/Hide.
Under Hide Layers, select the menu layer, and if the main layer was set up to be hidden, also select the main layer under Shown Layers.
The menu layer is now configured and can be shown and hidden when viewing to access the navigation menu.
When a template grid is used for the dashboard content below, the menu is positioned separately on top.
For more information, see:
Comments
0 comments
Please sign in to leave a comment.