Adding items

MENUBAR features ten different item types:

To create a new item, Drag and drop the button item into the builder. This will create a new Button Container including a new button called Button by default. The item type can be changed by clicking on any of the tabs in the properties panel on the right.

The first thing you want to do every time you create a new item is giving them distinctive names in the properties panel by using the field Name (only Property Panel). This will help you to identify your items in the properties panel when the configuration of your MENUBAR grows larger.

Recurring properties

There are some properties that MENUBAR’s items have in common. These are:

Duplicate, Copy/Replace	Actions to duplicate, copy and paste current element.
Items	Specifies the item type for current element. Available types are: Button, Button Container, Date Picker, Single Select, Sense Select, Field Slider, Variable Dropdown, Variable Slider, Variable Input, Group.
Name (only Property Panel)	This is the name of the item used in the property panel.
Show condition	This element will only be shown if this condition evaluates to true.
Show on mobile	By default, this element will be shown when Qlik sense is in mobile mode. If the checkbox is not checked the element is not visible or evaluated in the Qlik sense mobile mode.
Custom Size	By default, the item spans over the entire available area. Set this to Custom to define a custom height or width depending on the menu’s orientation.
Label	For selectable items sets the preferred label of the selection displayed on the item.
Icon	Many item labels can have icons you can select from a list.
Tooltip	The tooltip’s text to appear when the user hovers over the item.
Individual Colors	Every item can define a set of individual colors to create specific designs in your MENUBAR.

Copy/Paste and Replace Items

For easy editing of the MENUBAR Copy/Paste and Replacing items offers a fast way to create a MENUBAR. Once you have one item defined Copy/Paste and Replacing allows you to easily create other items with the exact same definition.

You can either duplicate an item to create an exact copy of the item in the current element. Or you can copy an item and paste it later to replace any item you want.

Furthermore, this function can be used to paste a previously copied element on an element of another MENUBAR object and thus to transfer definitions from one MENUBAR object to another one.

Button

Buttons are grouped by scenarios that are defined by scenario conditional expressions. This allows you to use different settings for the button depending on which of the given conditions is true.

Default properties of a newly created button with one scenario. Additional scenarios can be created by clicking on Add Scenario.

If more than one condition returns true at the same time the first (i.e. uppermost) state will be chosen.

If you don’t need your button to act differently on given conditions just use a single scenario with the condition ='true' which is also the default when creating a new button.

Button Settings

Click here for button settings documentation.

Button Actions

Click here for button actions documentation.

Button Container

The Button Container is an item to group multiple buttons together while inverting the orientation. That means, if your menu is oriented vertically, the buttons in the container will be arranged horizontally and vice verse.

Each button of the container has the option to disable the border. This allows creating individual borders through the button settings.

A vertically and horizontally arranged MENUBAR, each featuring two plain buttons and another two buttons in a Button Container in between.

Date Picker

The Date Picker allows selecting single dates, multiple dates and date ranges for sense fields. With the support of dynamic date formats the Date Picker can select almost every possible date.

Date Picker Element in Property Panel.

The Date Picker uses the default general settings. The only difference is that the selection label positioning is only available for single and multi Date Picker. In the appearance section you can customize the colors used in the Date Picker.

Specific settings for the Date Picker are at the bottom of the properties for the element.

The Date Picker supports three different types:

Single only allows one selected date.
Multi allows multiple dates to be selected.
Range selects a range of dates after picking a start and end date.

Defining a date format is required and the format needs to match the selected dimension. The standard format uses the format from the app settings. When setting the format to custom it is possible to define other formats. Valid formats include MM/YYYY, DD/YYYY, D/M/YYYY.

Depending on the format the Date Picker will only show certain Elements. When defining the format DD/MM/YYYY the date picker will show a Day picker. The format MM/YYYY only uses months and years therefore the Date Picker will only show months and years.

The default value is the value that is always selected if nothing else is selected. With the calendar symbol you can open a Date Picker and choose a date there or you can enter a Sense expression.

Predefines are specific date ranges. There are several default ranges but you can also define custom ranges.

Predefines Options.

The range Date Picker allows selecting a start and end date. The start date is on the left and the end date is on the right. On the far right are the predefines. On a mobile device the predefines are located in in the header instead. The header also has inputs for the start and end date.

Range Date Picker.

Single and Multi Date Picker

The single Date Picker consists of just one date element and the close and ok button. It only allows one selection and will remove all other selections beside the clicked date. Multi Date Picker allows multiple selected dates.

Single Date Picker.

Colors
To show different states of the dates the Date Picker uses several default colors. Dark grey: out of allowed range. Green: currently selected in Sense. Orange: start or end date. Light orange: date between the start and end date

All date picker related colors can be configured in general for all date picker elements in the Colors section.

KPI Element

The KPI Element visualizes dimension and measure data to track performance and other important data.

KPI Element example

KPI Settings

The configuration of the KPI Element is done through the KPI settings settings editor. To open the settings, click the MENUBAR Settings tab in the Qlik Sense property panel and then the Settings editor button.

The general settings for a KPI element allows you to rename your element, set display conditions, customize the size, change your label, create calculation conditions and change your alternate state

Adding dimensions and measures is done in Data tab by selecting the dimension or measure/aggregation under each section.

Editing a dimension properties can be done by clicking the settings icon next to your dimension. You can set limitations, show totals and include null values and there is an ability to add and action to your KPI item.

Under Sorting, there is a default sorting order or you have various custom sorting options for your dimensions or measures

Under your KPI button you have more settings where you can change the Layout/style and also activate actions

Under Value condition you are able to set conditional formatting on dimensions or measures

How to configure a MENUBAR KPI item:

Add an KPI item to your Builder and select a custom size of 80px

Under "Data", add a dimension and a measure

Enable "Show totals" and add a "Total label"

Under Value condition select your measure and you have the ability to create conditions for your arrow indicators.

In this scenario the arrow will be green and points upwards if the amount is greater than 5000000 and if its lower than 5000000 it will be red and pointing down.

This is how your KPI item will look if expanded:

Selects

Selects are drop-down lists that can be prefilled with existing data from previously defined dimensions. MENUBAR offers two different types of selects, explained in the following sections.

Users can pin the Single Select and Sense Select drop down item to remain open:

This will disable the Select/Sense Select Button

Single Select

A Single Select is a drop-down list that allows the user to make selections for one dimension defined in the Dimension input box.

Examples for a Single Select when using dimension without drilldown (left) and with drilldown-dimensions (right)

The element can have a custom icon defined via the Icon list and label using the Label input box. The latter can be arranged by using the label alignment options for horizontal and vertical alignment (Label: Alignment Horizontal and Label: Alignment Vertical).

The Text Layout option can be set to either Single or Multi which switches between a single-line and multi-line arrangement of label and selection label.

The allow deselect function enables the single select to clear the selection of the dimension by clicking the selected element again.

The Single Select item also allows to set a Default Value from a fixed string or a evaluated expression. This value is automatically set when opening or changing to the sheet and can be changed afterwards but ensures that the corresponding dimension can never be unset in the selection.

Properties of Single Select with some example settings.

The toolbar option adds an optional toolbar at the top of the single select. Currently the toolbar allows to filter the dimension entries depending on the input. When the dimension for the single select is a drill down dimension this option has no effect and the toolbar is always visible.

Just like the Label, the Selection Label is customizable. By default (Predefined) it shows the current selection or the number of items selected if they don’t fit on the element, but can be also set to a custom values or expression.

If you use the Single Select with drilldown dimensions, you get some more options:

Icon	Functionality
	The arrow left icon clears the selection on the lowest level.
	When you click on the field select icon, select a certain level. Selections below this level will be removed.

Sense Select

Sense Selects use the native selection widget of Qlik Sense and is otherwise configured the same way as a Single Select.

Figure 34. Examples for a Sense Select when using dimension without drilldown (right) and drilldown-dimensions (left)

For drilldown dimensions, the same settings apply as when used in a Single Select item.

Field Slider

The Field Slider allows to select values of a dimension with a slider component. Currently the Field Slider has two different slider types.

The two types are single and range slider.

Single allows to set one value just like a single select.
Range sets a start and end value and everything between the two values.

Figure 35. Field Slider examples.

Each slider type has unique settings and some general settings that are the same as selects. General settings include the type, orientation, visibility of min/max and the default values. A Field Slider always requires a selected value therefore a default selection is always required. Each type of the Field Slider requires different default values. The single type requires just one default value but, a range type requires a start and end default value of the dimension.

There can be some special cases with selections and Field Sliders. When the type of the slider is single but there are more values selected the slider will only show the first selected value. Otherwise when the type is range and the selection is not done with the slider it can happen that a range is not complete, meaning not every value between start and end value is selected. In that case the Field Slider is rendered with the complete range selected even though not all values are selected. Best practice would be to only use the slider to guarantee useful selections.

Field Slider Range Properties.

Colors

All slider related colors can be configured in general for all slider elements in the Colors section.

Variable Dropdown

The Variable Dropdown element is a drop-down list that allows setting custom values to Qlik Sense variables. Every item in the list represents a value that will be set when the user selects the item. These variables can be used to control other aspects of your apps.

Variable Dropdowns can be pinned to remain open like Singe and Sense Select items:

The definition for a variable value in the properties panel setting the number 10 to the defined variable results.

Before using variables you need to create them. This can be done by opening Variables and clicking the Create new button to create a new variable.

Creating a new variable in the Variables dialog.

In the properties panel of the Variable Dropdown element, define the variable name in the Variable Name input box and add as many selectable values as desired by clicking on Add Variable Value. There you can define the value itself, the label and all the custom alignment settings for each of the added values separately.

Example setup of a variable dropdown. Note that the variable being modified by this is captured in 'single quotes'

Variable Slider

The Variable Slider allows to modify the value of variables. Currently the Variable Slider has three different types of variable values.

The three types are single, range and multi slider.

Single allows to set one variable in a specific range.
Range sets a start and end value to two different variables.
Multi slider allows setting multiple variables in a specific range.

Variable Slider example.

Each slider type has unique settings and some general settings. General settings include the type, orientation, min and max value, step frequency, visibility of min/max and step values and the date settings. Date settings allow the slider to not only modify number values but also dates. When using dates it’s important to change the date toggle to true and then define the correct date format. Furthermore all general settings need to be in the specified date format or else it will not work.

The slider does not support decimal values for the frequency input. Additionally the frequency shall never be zero.

Single slider requires a variable and its default value.

. Variable Slider Single.

Range slider requires a start and end variable and a default value for both.

Variable Slider Range.

Multi slider support a list of variables. Each entry consists of the name of the variable to me modified and its default value. It’s important to note that multi sliders will always be in the defined order. E.g. the third variable in the list will always be the third handle on the slider.

Variable Slider Multi.

Colors
All slider related colors can be configured in general for all slider elements in the Colors section.

Variable Input

The Variable Input allows to modify the value of variables. Variable Inputs blend in with the menu and are only visible when the input is clicked.

Figure 44. Variable Inputs in a menu.

The Variable Input can be restricted by a type, so that users can only enter certain values.

The restriction types are:

No type: no restriction, all inputs are allowed
Numeric: only numeric values are allowed
Decimal: only decimal values are allowed
Date: only dates that follow a specified format are allowed

The property panel for the Variable Input has the standard general settings and a unique section at the bottom. In the Variable Input section you can define the type, variable name, default value, vertical alignment and horizontal alignment. When defining a date type it’s also required to define a date format.

Variable Input options.

Group

The Group Element is a dropdown list that allows to combine different MENUBAR elements into a single dropdown.

Group element in property panel.

Group Element makes it possible to create dropdowns with multiple button actions (button dropdowns), dropdowns with multiple single and sense selects (multi selects) or completely new combinations of the different MENUBAR elements.

Multiple elements in a single group.

Button dropdowns can be created by adding multiple buttons to the group element and Multi Selects can be created by adding multiple single or sense selects to the group element

Multi Select group example.

Currently the Group Element supports

Browser not supported