Configuration

Time to complete: 1-10 minutes (depending on number of sheets in your app)

Add Kompass to your sheet

To start out, you simply drag Kompass onto one of the sheets in your app:

Drag Kompass object onto your sheet

You are now ready to start the setup of Kompass.

Navigation menu setup

Add sheets to the navigation menu

After you have dragged the Kompass extension onto the sheet, go to the property panel to the right and start in the Setup section. To add a sheet as part of the menu just press the Add Widget button:

Add widget

Sheet menu options

Keep the Type in the default option so it displays Navigator. Now you can take each of the below steps one by one for each of the sheets you want to make part of the navigation menu.

1. Disable Widget

This option gives the possibility to NOT show this widget in the navigation menu but still keep its settings in property panel instead of deleting it.

Once a Widget is disabled, the children/grandchildren under this Widget will automatically be hidden as well.

2. Widget Label

This is the label shown in the navigation visible to the end user.

3. Close Navigation (Only used as navigation container)

This gives a possibility for a Level-1 navigator option to NOT do any navigation when clicked but act only as an expand/collapse option in the navigation menu.

When checked, the Nav To Sheet option will automatically hide itself.

4. Nav To Sheet

Pick the destination sheet where the user will navigate to when he clicks on this item in the navigation menu.

5. Navigator Level

A single navigator widget can be set to three levels: level 1, level 2, level 3. That means you can use these to create a navigation hierarchy.

Once set as level 2 or level 3, the navigation menu will automatically find the higher level navigator before this navigator as its parent navigator.

In the below example, the Navigators Table + Form and Popup are set to Level 1 whereas Form is set to Level 2:

6. Navigator Icon

This gives an icon to your navigator. It uses Font Awesome (https://fontawesome.com). Use the css class name to define your icon in your navigator (e.g. home icon refers ‘fa-home’, simply put fa-home into Navigator Icon and the navigator will render a home icon in front of your navigator label).

This will show up in the navigation menu as this:

7. Navigation menu order

It is very easy to change the order of how the sheets are shown in the navigation menu. After you have added them to the menu you simple drag and drop each sheet into the desired position.

Drag and drop to define order

8. Conditional Show

By using normal Qlik expressions you can easily decide conditions for when menu items are shown or not. This can be based both on the logged-in user or it can be based on the data model.

To enable the Conditional Show just toggle on the button and define your Qlik expression that controls the condition:

Conditional show

Here we have use the following expression: =count(distinct Company)=1 which means that the relevant Navigator widget will only be shown in the menu when only 1 Company is selected or available in the data.

Filter setup

To add filters to the menu bar you set the Type so it displays Filter:

Then you select which Field you want to use as filter and define a Label for this as well:

Set label and select field

Below you can see how the chosen filter is displayed in the navigation menu:

You now have a native Qlik filter as part of your navigation menu and you can add as many as you like. However, it might be better to use a Master Object instead which you can setup just as easily as you can see in the next section.

Master Object setup

To add Master Objects to the menu bar you set the Type so it displays Master Object:

Then you simply select each of the master objects you want to display in the navigation menu. You can give them a label and define the height each object should have:

The Master objects you can add should be of the Visualizations type. Below you can see how it looks when a KPI master object and a Filter pane master object are added:

If a newly created Master Object is not shown in the dropdown then simply refresh your browser and it will appear.

Page setup

If you would like to have multiple pages on your navigation menu - e.g. split Navigation and Master Object to be shown separately - then you can use the Page widget.

First you select Page in the Type menu:

All you have to do is to give it a label. This label will only be visible in the property panel and not to the end user.

You can then drag the Page widget to the desired place in the menu hierarchy. E.g. in the below example it is placed after the navigator widgets:

In the top of the navigation menu the end user will now see a small arrow that they can use to switch between Pages:

First page

When pressing this arrow the navigation menu will show all the widgets that comes after the Page widget in the menu hierarchy. In this case it will be the Filters and Master Objects:

Second page

You can naturally add multiple Pages to your navigation menu and then use the navigation arrows in the top to switch between them.

Appearance

Layout

To define your desired layout for the navigation menu go to the Layout section:

Fully Expand

This setting will define whether all the menu items are always shown. If yes, then all items will always be shown. If no, then by default only Level 1 items will be visible. Level 2 and Level 3 items will then be visible when their parent elements are clicked.

Render Mode and Width

You can select between normal mode or Flyout mode. The recommended option is Flyout. This mode will automatically hide original Qlik Sense nav bar and title bar in Analysis Mode.

In the Render Width setting you can define how wide you want the navigation menu to appear.

General

To set a title on the navigation menu go to Appearance => General => Title

Just enter you desired title

The title will appear on the top of the navigation menu:

To add a logo to the top of the Navigation menu go to Appearance => Logo

Add your desired logo

Text

Here you can define the text sizes for each of the navigation levels:

Theme

Here you can define the colors that are used to highlight the text and the background for the active sheet:

Input
Output

Meta text

To add extra information to the top of the navigation menu - e.g. like reload time or version of Qlik Sense app go to the Meta Text section and press the Add New Meta Text button. You can add as many as you like.

Within each Meta Text section you add, there are a several functions and layout options to choose from. As with any other Qlik object you can make calculations and reference data in your Qlik app.

Define your Meta Text

Finalize configuration

To finalize the setup of Kompass do the following.

Add as Master Visualization

Right click on the Kompass extension object on your sheet and choose Add to master items:

Add to master items

Add to each sheet

Last step is to add the Master Item to each sheet on which you want the navigation menu to appear.

Add Master Item to sheets

As the users do not have to see the Master Item itself on the sheet you can make it as small as possible and place it in one of the corners of the sheet.

A good option is to hide the Title of the Master Item. The title will still be shown in the top of the navigation menu but not in the Master Item object on the sheets.

Hide title