TRUECHART Knowledge Base Live Search
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.
There are some properties that MENUBAR’s items have in common. These are:
Actions to duplicate, copy and paste current element. Please read for further explanations in the following chapter Copy/Paste and duplicating 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.
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.
Use 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.
Can be set to Single for a single line or Multi for a multi-line to show a selection in a Select item.
Label: Alignment horizontal
Sets the horizontal alignment of the item’s label.
Label: Alignment Vertical
Sets the vertical alignment of the item’s label.
For selectable items sets the preferred label of the selection displayed on the item.
Many item labels can have icons you can select from a list.
The tooltip’s text to appear when the user hovers over the item.
Every item can define a set of individual colors to create specific designs in your MENUBAR.
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.
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.
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 state with the condition
='true' which is also the default when creating a new button.
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.
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.
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.
The KPI Element visualizes dimension and measure data to track performance and other important data.
KPI Element example
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.
In the settings dialog the general MENUBAR item settings, the context settings for the MENUBAR and the KPI settings are defined. The general settings are the normal MENUBAR item settings that every item of the MENUBAR has. In the data settings contexts are created, deleted, and edited. They contain the information to display as a KPI element.
To create a new context, click the plus icon in the context overview. Adding dimensions and measures is done on the same 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. To edit a context the top menu is used to navigate to the different context settings.
Context settings tab
The rest of the settings are for configuring the KPI element.
In the KPI settings tab, the context for rendering KPI data is selected.
Then comes a list of KPIs that are rendered in the final visualization. If there are multiple KPIs defined, the top element is the main element in the MENUBAR and every other KPI is rendered as a dropdown entry.
Every KPI has settings for actions that are the same as the button actions and the settings for the KPI elements.
KPI elements are the visualizations that are displayed inside each KPI button such as labels, icons, and images. Every KPI can have as many elements as you want. Each element is configured like a MENUBAR button with general, layout, style, and color settings. For more information on what the button is capable of checking the button documentation.
Render with data
If a context is selected in the KPI settings the rendering and configuration of the KPI element change slightly.
Instead of multiple KPI elements, only one or two are used for rendering. The rules are the following:
- If only one KPI is defined all the context data is rendered with the settings of this element.
- If there are two KPIs the top element is rendered with the settings of the first KPI and the dropdown KPIs are rendered with the settings of the second KPI.
The top element for the KPI visualization is either the first data entry of the context or the total if one is defined in the dimension.
Hypercube based expressions
In order to use the hypercube data in the KPI setting expressions, the name or id of the dimension or measure must be used at the intended place. An example is shown in the following screenshot.
In the expression, the measure Sum(Sales) is used. When rendering the KPI the Sum(Sales) is replaced with the data value and the expression is resolved accordingly. The result is then either green or red text depending on the value.
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.
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:
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 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.
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.
All slider related colors can be configured in general for all slider elements in the Colors section.
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.
Figure 37. The definition for a variable value in the properties panel setting the number
10 to the defined variable
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'
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.
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.
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.
All slider related colors can be configured in general for all slider elements in the Colors section.
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.
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