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 Containerincluding 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 Editor
The Button Editor is a powerful tool for setting both a button’s appearance and its behavior, i.e. the action triggered when the button is pressed. It will be opened when you click on State Settings in one of the button’s states.
The settings are divided into five categories (General, Layout, Style, Color and Actions) covered in the following sections.
The General tab features five options:
The Type list gives you a selection of various predefined button appearances, all of which can be fine-tuned in the adjacent tabs. Apart from that, you can choose between simple, image, and custom in the General section. The latter two of which can be used to create an image-based or custom-CSS-based button respectively.
The State list is a sub-list of the Type list and covers the normal, active and disabled state of the previously chosen type.
Using the Icon option you can define an additional icon for the button out of the Font Awesome or Qlik Sense icon repository.
The Text field is the text used as the label on the button.
With the Tooltip option, you can define the text shown when the user hovers over the button.
Help other users to understand your button’s effect by describing it in the tooltip.
Figure 19. The Button Editor showing the first tab (General).
If you’ve chosen the image type you can additionally define an Image url, the Position, and Size of your background image in the Image section.
Figure 20. The Button Editor as Image type with specific input elements.
To be able to display images with an image button, these images must first be saved (uploaded) to the trueChart Image Library and selected from there. All images of the trueChart Image Library are stored within the Sense app and are automatically available in duplicated and exported apps.
The trueChart Image Library could not changed in published apps since theese are read only in Sense. Existiing images still could be reused.
Figure 21. The trueChart Image Libary dialog to import, export, insert, rename and delete images.
The trueChart Image Library offers the possibility to import images from different sources, so you can upload one or more files directly or via a URL. To use images from the Qlik Sense media library, it is necessary to manually store the URL of the individual images as image URL in the button or to import them into the trueChart Image Library using the URL import function.
Other features available in the trueChart Image Library are: Rename, Replace / Update, Delete. The image download is not supported in ie11.
Since the contents of the image library are saved globally in an app, they can not be copied to an other app when copying an extension object. The recommended way to do this is: first export the necessary images in the source app and then import them again into the target mage library. Since the used image has the same names, these images then will be displayed correctly in the copied objects.
If you’ve chosen the custom type you can define your own CSS rules on the button, giving you the maximal flexibility for the button’s appearance.
The Layout tab is for defining the metrics of the button. You can set…
In the Dimension section, you can set the width and height of the button inside its boundaries. This is set to
100% by default but can be set to any value using CSS units or
auto to make the button as large as its contents demands.
In the Position section, you can set the horizontal and vertical alignment of the button inside its boundaries, which is only effective if the respective width or height is set to a value other than
In the Content alignment section, you can define the alignment of the button’s text and the icon. The Text alignment is only effective for multiple lines of text on the button.
In the Content position section, you can set the horizontal and vertical alignment of the content itself (i.e. the text and the icon together). This is only effective if the respective width or height of the button is not set to
With the Padding setting, you can disable a predefined padding by choosing Off or override the default padding by choosing On which allows you to set the values in CSS
With the Margin setting, you can disable a predefined margin by choosing Off or override the default margin by choosing On which allows you to set the values in CSS
Figure 22. An example showing the different layout settings and its effects on the button’s appearance.
In the Style tab, you can set the visual appearance of the button’s content including:
In the Font section, you can set the font properties, i.e. Family, Weight, Style, and Size. For Size we suggest you use px, emor % as the unit of measurement. If you use units like vw and vh you may have problems with the export function of Sense.
Icons have a fixed size, but you can change the scaling in the Icon section using the Size slider to choose between 1x, 1.5x, 2x, 3x, 4x or 5x.
If you defined a background on your button you can control how the background is repeated with the Repeat setting in the Background section.
With the Border setting, you can disable a predefined border by choosing Off or override the default border by choosing On which allows you to set the border’s color, radius, width, and style. The radius is given in CSS
The same applies for the button’s shadow in the Shadow section. By using On you can define a custom border according to the CSS
none|h-shadow v-shadow blur spread color |inset|initial|inherit.
Figure 23. An example showing the different style settings and its effects on the button’s appearance.
The Color tab is used to set the colors for the normal and hover state of the button. This overrides the colors you’ve set in the Colors section of the Appearance pane and those given by the button type in the General tab of the Button Editor. For a detailed list of accepted color expressions, refer to Appendix A.1.
Figure 24. An example showing the different color settings and its effects on the button’s appearance with the button in the hover state.
In the Actions tab, you can define triggers, that is the actions to take effect when a certain event on the button is triggered.
Possible events to attach actions are:
Triggered when the user clicks the button.
Buttons without triggers and actions, for example, when used as text or image placeholders, do not apply hover effects. In order to achieve this behavior, all triggers must be removed via the delete icon.
Triggered when the sheet is closed or changed.On loadTriggered when the element loads. This can be used to define initial actions like making selections.
To avoid critical actions being scattered all over other different items, On load actions like those for initial selections should be defined on a designated element (such as an otherwise non-functional button that serves to show the company’s logo).
Triggered when the button is selected.
Define your own event you can give a custom name. This can be used by involving HiCo.performCustomTrigger("triggername", "triggerdata") in a custom action.
For every event, you can define one or multiple actions, such as Go to sheet to change the view to a different sheet or Select match to alter the current selection.
A full list of provided actions can be found in Appendix B.
Figure 25. This example establishes an action that sets the City field to New York for the current selection on click of the button.
Actions of a specific trigger are executed in the order they are defined (from top to bottom) without explicitly waiting for each other to be finished before executing the next one. In case of asynchronous calls this may lead to a different execution order.
For most actions (like selecting fields, setting variables, etc.) this is the best option, because they will be performed as fast as possible. This leads to less requests to the "Qlik Sense Engine" and results in better performance/stability.
For use cases were the execution order is important, every action can be defined as "sequential" where the execution order will then be respected, by executing them one by one.
Apart from static values, every input box that features Qlik Sense’s fx icon also accepts Sense expressions.
Arranging buttons using 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.
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.
ColorsTo show different states of the dates the Date Picker uses several default colors.Dark grey: out of allowed rangeGreen: currently selected in SenseOrange: start or end dateLight orange: date between start and end date
All date picker related colors can be configured in general for all date picker elements in the Colors section.
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 Dimensioninput 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.
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 but you cannot define a default value.
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. A bar chart that uses a variable as the number of displayed results.
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.
ColorsAll 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