Items of MENUBAR

Adding items

MENUBAR features ten different item types:

To create a new item, open Items in the properties panel and click on Add Items. This will create a new Button Container including a new button called My Button by default. The item type can be changed by clicking on the Type drop-down list, which gives you the selection between the different types mentioned above.

Figure 15. Adding items

Figure 16. Initial items

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 menu bar grows larger.

Recurring properties

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

Copy/Paste and duplicating Items

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

Figure 17. From left to right: duplicate, copy, paste button.

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 states that are defined by conditional expressions. This allows you to use different settings for the button depending on which of the given conditions is true.

Figure 18. Default properties of a newly created button with one state. Additional states can be created by clicking on Add State.

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.

Figure 26. Button Container Settings.

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

Figure 27. A vertically and horizontally arranged menu bar, 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.

Figure 28. 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 datepicker will show a Daypicker. 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.

Figure 29. Predefines Options.

Range Date PickerThe 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.

Figure 30. 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.

Figure 31. 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 dialog. To open the settings dialog, click the button in the Qlik Sense property panel for the KPI item inside MENUBAR.

The general settings for a KPI element allows you to rename your element, set display conditions and customize the size,

Adding dimensions and measures is done on Data tab by pressing the plus icon on the dimension or measure section. Editing a dimension or measure is done by clicking on the wrench icon inside the list.

The Settings tab allows you to change your Label, create calculation conditions and change your alternate state

Under your KPI title you have more setting where you can change the Layout/style and also activate "On click" actions

Under your Dimensions and Measures you are able to set conditional formatting and activate "On click" actions

How to configure a MENUBAR KPI item:

• Add an KPI item to your MENUBAR and select settings

• Under your General > Custom size change the "Height" to 100px

• Under "Data", add a dimension and a measure
• Enable "Show totals" and add a "Total label"

• Expand 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 50000000 and if its lower than 50000000 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.

Figure 32. 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.

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

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.

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

Figure 37. 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.

Figure 38. 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.

Figure 39.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.

Figure 40. 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.

Single slider requires a variable and its default value.

Figure 41. Variable Slider Single.

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

Figure 42. 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.

Figure 43. 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.

Figure 45. Variable Input options.

Group

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

Figure 46. 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.

Figure 47. 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

Figure 48. Multi Select group example.

Currently the Group Element supports