Configuration

Add Kompass to your sheet

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

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:

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 Type

By default this is set to Sheet meaning that when the navigation item is pressed by the user, he will navigate to the defined sheet in the app.

If you select Url the user will instead be taken to the Url you specify and at the same time you can specify whether the external Url should open in the same window or in a new window.

5. Nav To Sheet

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

6. 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:

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

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

9. 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:

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:

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:

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:

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:

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.

Hide Maximize Button in Published Apps

This button is obsolete

Has Expand/Collapse Button

This button is obsolete

Has NPrinting Button

This button is obsolete

Has Bookmark Button

When this button is clicked a simple bookmark menu will appear. Note that it does not have all the native Qlik bookmark functionalities.

Qlik Header Visible

When this is enabled the top Qlik header will be visible to the user. By default this is hidden when using Kompass.

Sheet Header Visible

When this is enabled the Sheet header is visible to the user. By default this is hidden when using Kompass.

General

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

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

Logo

To add a logo to the top of the Navigation menu go to Appearance => 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:

Action

In the Action section you are able to define various actions that should be triggered when you navigate to the different sheets.

Do selection

To force a selection when users navigate to a specific sheet fill out the following settings:

Name: Name of your action

Binding Nav: Select the sheet this action should relate to (i.e. the sheet that is navigated to)

Action: Select "Do selection"

Field Name: Define the Field name in which the selection should be made.

Field Value: Define the selection value(s) of the chosen field

Set variable

To set the value of a variable when users navigate to a specific sheet fill out the following settings:

Name: Name of your action

Binding Nav: Select the sheet this action should relate to (i.e. the sheet that is navigated to)

Action: Select "Set Variable"

Variable Name: Define the Variable name in which the value should be changed

Variable Value: Define the value of the chosen variable

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.

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 each sheet

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

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.