Anaplan XL Reporting's Dashboard Designer enables you to create responsive and dynamic dashboards. The steps in this tutorial outline how to create a full-width navigation bar for a multi-sheet dashboard suited to any screen size.

Create a navigation bar

  1. Create a navigation bar design in an Excel sheet. This should include XL3Links that link to the required pages, and could also feature a company logo, title, and so on.
  2. Duplicate this design and create highlighting for each page. This makes it clear which page is being displayed. Add a viewport to each page to point to the relevant range.
  3. Create a paged viewport that points to this range on the dashboard sheet. The viewport should be set to Scale to fill and Lock aspect ratio.
  4. Set the background of the paged viewport. To create the effect of a continuous full-width navigation bar, set it to be the same as the fill color of the navigation bar design.

Any page in your dashboard or workbook needs a new paged viewport that points to the relevant highlighted design. If the row heights are the same across each page, it'll appear as if the navigation bar is fixed but the highlighted cell moves across.

Set different targets

The navigation bar may fit well on landscape screens or large screens, but become too small for mobile views. Dashboard targets let you create different layouts for different screen sizes and different navigation bars.

  1. Create a second design to be used for mobile. Use the same color scheme and fonts to give the appearance of a continuous design. Highlighting for each page is also needed as before.
  2. Create a new target in the dashboard. Hide the original paged viewport and create a new one that points to the mobile navigation bar design. 
    1. Go into design mode on the dashboard sheet and select Edit targets in the dashboard panel. 
    2. Add a new target for mobile portrait, select OK, then switch to editing this target. 
    3. Under the item settings, hide the original viewport that displays the full-width navigation bar. 
    4. Create a new paged viewport using the same method as before that points to the mobile design. 
    5. Hide the new paged viewport on any other dashboard targets.
      The dashboard shows the best goal for the screen size. When you view it on a phone, the navigation bar will look different.
      You may find unexpected white borders in the viewport when viewing in Chrome or Firefox. You can fix this by setting the background color on the entire sheet holding the navbar range, rather than ‌the range itself.