trueChart Knowledge Base Live Search
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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)
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.
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.
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.
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 Figure 40. Variable Slider example.
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.
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 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.