trueChart Knowledge Base Live Search

Search

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

Image Added

Figure 15. Adding items

Image Added

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.

Image Added

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.

Image Added

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

...

Tip

Help other users to understand your button’s effect by describing it in the tooltip.

Image Added

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.

Image Added

Figure 20. The Button Editor as Image type with specific input elements.

...

Warning

The trueChart Image Library could not changed in published apps since theese are read only in Sense. Existiing images still could be reused.

Image Added

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 margin syntax.

Image Added

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 box-shadow syntax:
none|h-shadow v-shadow blur spread color |inset|initial|inherit.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

Figure 33. Properties of Single Select with some example settings.

...

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

IconFunctionality

icon-drillup-returnImage RemovedImage Added

The arrow left icon clears the selection on the lowest level.

icon-drillup-field-selectImage RemovedImage Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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 FiguImage Addedre 40. Variable Slider example.

...

Single slider requires a variable and its default value.

Image Added

Figure 41. Variable Slider Single.

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

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

Figure 45. Variable Input options.

...

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

Image Added

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.

Image Added

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

Image Added

Figure 48. Multi Select group example.

...