1. Introduction

trueChart Menubar allows for vertical and horizontal buttons and selections (fields, drill-down dimensions, master dimensions and variables) as well as unlimited trigger based Actions.

In addition, you can share apps with the current selection with a single click, as well as conveniently chain documents including current or changed selections to navigate between apps.

trueChart Menubar intro
Figure 1. Qlik Sense showing a sheet in edit mode with a trueChart Menubar (left) next to trueChart (center) with the menu bar’s options in the properties panel (right).

1.1. Qlik Sense® Support

trueChart-Menubar supports Qlik Sense® from version 3.0.0 up to currently latest version June 2018 including exporting and story mode capability.

1.2. Printing & Export Support

The trueChart-Menubar fully supports nPrinting from version June 2018.

The trueChart-Menubar also fully supports with external partner solution Mail&Deploy. For more information on the Mail&Deploy export solution, click here: http://www.mail-and-deploy.com.

1.3. Browser Support

At present trueChart-Menubar supports the browsers listed below:

  • Microsoft Internet Explorer 11

  • Microsoft Edge (lastest version - v41, at the time of writing)

  • Mozilla Firefox (latest version – v60, at the time of writing)

  • Google Chrome (latest version – v67, at the time of writing)

  • iOS 10.3.2 or later

    • We recommend upgrading to iOS 11.2.2 or later.

2. What is new in trueChart Menubar 1.3.3?

New element Date Picker

The fully customizable new element 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. Standardized and freely customizable date ranges allow a wide variety of date selections with just one click.

datepicker-range
New element Variable Slider

The new element Variable Slider allows to modify the value of variables in different ways. Three different types are supported: single, range and multi slider.

variableslider-examples
New element Variable Input

The new Variable Input allows you to modify the value of variables with an input field. Variable Inputs blend in with the menu and are only visible when the input is clicked.

variableinput-example
Figure 2. Variable Inputs in a menu.
Options to disable sense snapshot and maximize object buttons

Two new properties in the Sense property panel allow conditional hiding of the snapshot and maximize button.

sense-navbarbuttons
Figure 3. Sense navbar buttons.

For more information about the changes in this version, refer to the chapter trueChart Menubar v1.3.3

An upgrade from version less than v1.1.0 to the current version may require an migration. If this migration is not done carefully, apps may break. The procedure is described in detail in Migration from version less v1.1.0..

2.1. Migration for published apps

In the context of new versions, necessary adjustments within the apps are usually carried out automatically during loading. This is transparent for the users. An indication of this are corresponding logging entries in the development console of the browser.

Since changes to published apps cannot be saved, these automatic changes must be made at every load, which can have a negative effect on the loading speed of the visualization.

To avoid permanent migrations of the apps, we therefore recommend opening the corresponding apps as soon as possible in an unpublished mode, so that migration is then performed once and the changes are saved automatically. These apps should then be published again.

2.2. Migration from version less v1.1.0.

With the release of version v1.1.0 we introduced the support of master and dynamic dimensions. To use this feature, you have to be sure that all expressions correspond to the expression syntax known from Qlik Sense, which means:

  • No ' or " before and after field or dimension names

  • Expressions should begin with =

  • Correct spelling (upper-/lowercase) of field or dimension names

After updating, trueChart Menubar will guide you through this process. At first, navigate to the sheets where you use trueChart Menubar. Now, it will automaticly check if you use expressions somewhere. If so, you will see the dialog below. Please make sure that all expressions comply with the above mentioned specifications. Once you have done this, you can confirm by clicking on the appropriate button. Only when all expressions have been confirmed, you are able to save the changes and close the dialog.

migration dialog
Figure 4. The dialog that leads you trough the migration process
Automatic migration for published apps in production

Changes to a published app cannot be persisted. So it is necessary to perform the migration in another way:

migration procedure
Figure 5. Process to migrate published apps
  1. Install the new trueChart Menubar version in your testing environment.

  2. Now open all relevant apps. Check and confirm all expressions. But you will not be able to perform the save operation.

  3. Unzip the tcmenu.zip and copy the content of all apps from the Config settings dialog in between the curly brackets at expressionMigration. Make sure that the existing format is maintained.

  4. Finally, zip the complete tcmenu directory and upload the ZIP file to the Qlik Management Console on the production environment. For all expressions in the config file you will not be asked to reconfirm them.

When you are using trueChart Menubar in a publicated app or in mutiple apps with the same expressions, we recommend to update the config.js. The advantage of this variant is that expressions added in the config file do not have to be reconfirmed.

For published apps, this is the only way to persist changes on the expressions.

An update to the latest version of the trueChart Menubar without prior adjustment of the dimension expressions leads to incorrect evaluation of the dimensions and therefore corrupt published apps!
migration config settings dialog
Figure 6. The Config settings dialog

3. Installing trueChart Menubar

3.1. Installation on Qlik Sense Desktop

To install trueChart Menubar for Qlik Sense Desktop, you just have to put the contents of the trueChart Menubar ZIP file into the directory %USERPROFILE%\Documents\Qlik\Sense\Extensions.

3.2. Installation on Qlik Sense Server

To install trueChart Menubar for Qlik Sense Server, go into the Qlik Sense Management Console (QMC) and navigate to Extensions via the sidebar. Then click on the Import button which opens the Import extension file dialog where you can browse and import the trueChart Menubar ZIP file.

qmc-import
Figure 7. Importing the extension ZIP file in the QMC.

4. Creating a new menu bar

After installing trueChart Menubar you can add a new menu bar to your sheet in Edit mode by dragging the entry from the extension sidebar into your sheet. You can add as many menus to your sheet as you need and each can be set up differently.

new-menu
Figure 8. A new empty menu bar

trueChart Menubar features six panes in the properties panel — Dimensions, Sorting, Items, Add-ons, Appearance and Info — which are covered in the following sections.

5. Defining dimensions in the Dimensions pane

The Dimensions pane is used to define all the dimensions needed for the Select items of trueChart Menubar.

Dimensions can be added in the way known from Qlik Sense. The dimension’s name is subsequently used as the Dimension Title. This value is only for usage in trueChart Menubar and can be changed if desired.

adding-dimensions
Figure 9. Adding a new dimension to the menu.

The dimensions defined here can be later used in the Single Select or Sense Select items.

adding-dimensions
Figure 10. Using the predefined dimensions in a Single Select.

5.1. Sorting

The sorting of dimensions can be edited in the Sorting pane.

The sort order can be set to Automatic or User Defined. When the latter is chosen, you can set your desired sorting order which can be one or multiple of:

Load Order

This is the original order of the records in the data source.

Selection State

Shows the currently selected values first. For Sense Selects this is the default.

Frequency

Sorts the values by the frequency of occurrence.

Numeric

Sorts the values numerically.

Alphabet

Sorts the values alphabetically.

Expression

Use a custom expression to control sorting.

dimensions-sorting
Figure 11. User-defined sorting options for dimensions

6. Items of trueChart Menubar

6.1. Adding items

trueChart Menubar features six 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.

add-item
Figure 12. Adding items
initial-items
Figure 13. 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.

6.1.1. Reoccurring properties

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

Duplicate, Copy/Paste

Actions to duplicate, copy and paste current element. Please read for further explanations in the following chapter Copy/Paste and duplicating Items.

Type

Specifies the item type for current element. Available types are: Button, Button Container, Date Picker, Single Select, Sense Select, Variable Dropdown, Variable Slider, Variable Input, Group.

Name (only Property Panel)

This is the name of the item used in the property panel.

Show condition

This element will only be shown if this condition evaluates to true.

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.

Text Layout

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.

Selection Label

For selectable items sets the preferred label of the selection displayed on the item.

Icon

Many item labels can have icons you can select from a list.

Tooltip

The tooltip’s text to appear when the user hovers over the item.

6.2. Copy/Paste and duplicating Items

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

copypaste
Figure 14. 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 trueChart Menubar object and thus to transfer definitions from one trueChart Menubar object to another one.

6.3. 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.

default-button
Figure 15. 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.

6.3.1. 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.

Features

The settings are divided into five categories (General, Layout, Style, Color and Actions) covered in the following sections.

General

The General tab features five options:

Type

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.

State

The State list is a sub-list of the Type list and covers the normal, active and disabled state of the previously chosen type.

Icon

Using the Icon option you can define an additional icon for the button out of the Font Awesome or Qlik Sense icon repository.

Text

The Text field is the text used as the label on the button.

Tooltip

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.
button-general
Figure 16. The Button Editor showing the first tab (General).
Image

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-button-editor
Figure 17. 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.
trueChart-media-library
Figure 18. 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.
Custom css

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.

Layout

The Layout tab is for defining the metrics of the button. You can set…​

Dimension

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.

Position

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 100%.

Content alignment

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.

Content position

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 auto.

Padding

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

Margin

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.

button-layout
Figure 19. An example showing the different layout settings and its effects on the button’s appearance.
Style

In the Style tab, you can set the visual appearance of the button’s content including:

Font settings

In the Font section, you can set the font properties, i.e. Family, Weight, Style, and Size.

Icon size

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.

Background repetition

If you defined a background on your button you can control how the background is repeated with the Repeat setting in the Background section.

Border

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 border-radius syntax.

Shadow

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.

button-style
Figure 20. An example showing the different style settings and its effects on the button’s appearance.
Color

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.

button-style
Figure 21. An example showing the different color settings and its effects on the button’s appearance with the button in the hover state.
Actions

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:

On click

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.
Before navigation

Triggered when the sheet is closed or changed.

On load

Triggered 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).
On selection

Triggered when the button is selected.

Custom

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.

button-action
Figure 22. This example establishes an action that sets the City field to New York for the current selection on click of the button.
Execution Order

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.

6.3.2. Using Expressions

Apart from static values, every input box that features Qlik Sense’s fx icon also accepts Sense expressions.

6.4. 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.

ver-hor-menu
Figure 23. A vertically and horizontally arranged menu bar, each featuring two plain buttons and another two buttons in a Button Container in between.

6.5. 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.

datepicker-config
Figure 24. 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.

datepicker-predefines
Figure 25. Predefines Options.
Range Date Picker

The 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.

datepicker-range
Figure 26. 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.

datepicker-single
Figure 27. 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 start and end date

All date picker related colors can be configured in general for all date picker elements in the Colors section.

6.6. Selects

Selects are drop-down lists that can be prefilled with existing data from previously defined dimensions. trueChart Menubar offers two different types of selects, explained in the following sections.

6.6.1. 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.

single-select
Figure 28. 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 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.

single-select-prop
Figure 29. 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:

Icon Functionality

icon-drillup-return

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

icon-drillup-field-select

When you click on the field select icon, select a certain level. Selections below this level will be removed.

6.6.2. Sense Select

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.

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

6.7. 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-dropdown-var
Figure 31. 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.

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

bar-chart-variable
Figure 33. A bar chart that uses a variable as the number of displayed results.

6.8. 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.

variableslider-examples
Figure 34. 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.

variableslider-single
Figure 35. Variable Slider Single.

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

variableslider-range
Figure 36. 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.

variableslider-multi
Figure 37. Variable Slider Multi.
Colors

All slider related colors can be configured in general for all date picker elements in the Colors section.

6.9. 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.

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

variableinput-options
Figure 39. Variable Input options.

6.10. Group

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

group-example
Figure 40. 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 trueChart Menubar elements.

group-add
Figure 41. 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

group-multi
Figure 42. Multi Select group example.

Currently the Group Element supports

7. The Add-ons pane

In the Data handling section of the Add-ons pane there are two options to control calculation and rendering of either trueChart Menubar itself or other charts/extensions that support calculation conditions.

Calculation condition

Use the Calculation condition input box to define a Sense variable that is checked to be true before the actual rendering (‘calculation’) takes place. It’s also possible to use any function or expression here. The Displayed message is the message to be shown unless the condition is true and can be customized.

Calculation condition variable

The Calculation condition variable is the opposite of the Calculation condition: It is do define a variable that is set to true as soon as trueChart Menubar initialized all the default selections you may have set in Single Selects and to be used by other extensions supporting this Data handling feature.

To set the calculation condition variable automatically to true, at least one defined default selection is required in a single select. Button actions are currently not supported in connection with this function. A implementation will take place in one of the next versions.
Dimension calculation

The Dimension calculation switch toggles the calculation for dimensions used in trueChart-Menubar.

The Calculation is disabled by default, but in this mode it is not possible to use the same dimension multiple times.

If you have to use multiple dimensions or if you have a drilldown dimension, which contains some dimensions, which are already in the dimension list, you have to enable the calculation. In this case you could have some performance drawbacks.

calc-cond
Figure 43. The calculation condition properties in the Data handling section.

8. The Appearance pane

8.1. General

The General pane features the following options:

  • Show titles

    • Show titles (title, subtitle and footnote) in the menu box.

  • Title

    • Enter a title for the menu bar. The title is also displayed above the menu when Show titles is set to On.

  • Subtitle and Footnote

    • Enter and display an additional subtitle and footnote (only if Show titles is set to On).

  • Show details

    • This option has currently no effects.

8.2. Layout

Orientation

Define the orientation of the menu which can be either horizontal or vertical. This has no effect on small mobile devices where the orientation is adjusted automatically to vertical.

Width Setting

When the menu is oriented vertically the items can be set to be stretched to the maximum width (Fill) or you can define a custom width (Custom).

Height Setting

When the menu is oriented horizontally the menu bar can take all the available height (Fill) or you can define a custom height (Custom).

In vertical orientation this setting is used to use the background color over entire height (Fill) or only to the last menu item (Automatic).

appearance-layout
Figure 44. The Layout section in the Appearance pane

8.3. Position

In the Position section, you can set the position of the menu bar inside its boundaries when the width or height is set to values in pixel other than Automatic. For example, the value 0 for Top removes the distance to the edge or next object above the menu completely.

appearance-position
Figure 45. The Position section showing default and individual settings.

8.4. Colors

The Colors section is to define the default colors of the menu to be inherited by its items. These can be configured by entering color expressions, setting predefined colors or choosing with the color picker.

In this area, numerous color definitions can be made for the following elements:

  • Main elements (generic), with area and text colors for background, hover and active states, borders and separators

  • Subelements (generic), with area and text colors for background, hover and active states, borders and separators

  • Selections (generic - currently only for Date Picker and Variable Slider), with colors for normal, alternative and excluded selections areas and texts

  • Date Picker elements, with colors for buttons, selections, active or not allowed fields, texts, normal and hover states

  • Slider elements (Variable Slider), with colors for background, slider track and handle, normal and active steps

For a detailed list of accepted color expressions, refer to Appendix A.1.

appearance-colors
Figure 46. Part of the Colors section in the Appearance pane showing preselected colors and the color picker.

8.5. Text

The Text section features all settings to take effect on the font, such as:

  • Font family

  • Font weight

  • Font style

  • Font size

These are set separately for general Labels and also Selection Labels, i.e. selected values showing on trueChart Menubar’s elements.

appearance-text
Figure 47. The Text section in the Appearance pane.

8.6. Display

In the Display section, you can set the visibility of the Sense menu, selection, title bar, snapshot button and maximize button. The elements can be permanently hidden (Hide), shown (Show = default setting) or displayed depending on an expression. Snapshot button and maximize button options are only applied to the current menu extension.

If the Sense menu is not visible and the Edit mode is not available for this reason, it can be simply activated by Ctrl + E.
When using several menu objects on a sheet, ensure that all menus are defined identically for these settings. Otherwise, one menu could hide a bar and another could show this bar again, depending on which menu object is loaded as last one by Sense.
display_prop
Figure 48. Define visibility of Sense menu, selection and title bar

8.7. Info

The Info section shows general information, such as version number of trueChart Menubar.

It also provides a link to open this documentation.

Appendix A: List of useful CSS definitions for button styling

The Button Editor makes heavy use of CSS definitions for styling buttons. The following lists give an overview on frequently used CSS properties.

A.1. Colors

The following color expressions can be used in trueChart Menubar:

  • Color names: black, white, red, etc.

  • Hex values, three or six digits: #f80, #ff8800

  • Hex values, four or eight digits (alpha channel): #f087, #ff008877

  • RGB and RGBA: rgb(255,127,0), rgba(255,127,0,.5) or rgb(255 127 0), rgba(255 127 0 / .5)

  • HSL and HSLA: hsl(360,100%,50%), hsla(360,100%,50%,.8) or hsl(360 100% 50%), hsla(360 100% 50% / .8)

  • ARGB: =argb(127,255,63,15) with the alpha channel being a value between 0 and 255.

Appendix B: List of actions for triggers

The following actions can be attached to events that trigger a button.

B.1. None

Action Parameters

None

No parameters.

B.2. Custom

Action Parameters

Custom

A custom JS function to be executed with the Custom event.

Action Parameters

Next sheet/page

No parameters.

Previous sheet/page

No parameters.

Go to sheet

Sheet id of the sheet to go to; can be entered manually or automatically by using the drop-down list.

Go to story

Story id of the story to go to; can be entered manually or automatically by using the drop-down list.

Go to url

Specify the URL in the Url input box and the target in the Target list. The Mashup only option restricts the action to mashups.

Go to app

Specify the id of the app you’d like to navigate to in the App ID input box and the id of the specific sheet in the Sheet ID input.

buttoneditor-actions-gotoapp

If you select Email as the target you can further specify an email address, email subject and email body. You can use {0} as a placeholder for the generated link. If omitted, it will be inserted at the end of the body. You can also specify the link to be opened in the same, new, custom named window or just be copied to the clipboard.

It is possible to clear all selections or apply current selections in the target app by checking the corresponding checkboxes. For current selections to work, the currently selected fields/dimensions need to be present in the target app as well.

Additionally you can add optional parameters to apply specific selections or a bookmark.

Limitations:
  • In "Qlik Sense Desktop" the Email target doesn’t work.

  • Fields/Dimensions containing "%" characters, they will not be applied.

  • When importing apps from another system, their ID changes. So, for example, if you designed a target app locally and push it to a server, this action will no longer work since the target app ID has changed. It needs to be manually repaired. This is also the case when publishing.

Share app

Specify the target of a generated link to be shared as email or added to clipboard.

If you select Email as the target you can further specify an email address, email subject and email body. You can use {0} as a placeholder for the generated link. If omitted, it will be inserted at the end of the body. Target clipboard adds the generated link to the clipboard and shows a message to the user.

Limitations:
  • In "Qlik Sense Desktop" the Email target doesn’t work.

  • In mashup/story mode the URL can’t be properly generated.

B.4. Sense

Action Parameters

Set variable

Specify the variable and value to be set in the Sense variable and Variable content input box. The Keep option keeps the value unchanged if it’s already set.

Select value(s)

Select the field and value(s) in the Field name and Value(s) input box. The Toggle option will toggle between selected states. The Soft lock option sets locked selections to be overridden. The Keep option sets existing selections for the selected field to remain unchanged. The Add option sets the values to be added to the existing selection.

Select match

Specify the field to be selected and value(s) in the Field name and Value(s) input box. The Soft lock option sets locked selections to be overridden. The Keep option sets existing selections for the selected field to remain unchanged.

Select alternative

Specify the field to be selected in the Field name input box. The Soft lock option sets locked selections to be overridden.

Select excluded

Specify the field to be selected in the Field name input box. The Soft lock option sets locked selections to be overridden.

Select possible

Specify the field to be selected in the Field name input box. The Soft lock option sets locked selections to be overridden.

Select all

Specify the field to be selected in the Field name input box. The Soft lock option sets locked selections to be overridden.

Selection backward

No parameters.

Selection forward

No parameters.

Clear field

Select the field to be cleared in the Field name input box.

Clear other

Select the field in the Field name input box. The Soft lock option sets locked selections to be overridden.

Clear all

Set the Locked also option to also clear locked selections.

Lock field

Select the field in the Field name input box.

Lock all

Set the Locked also option to also clear locked selections.

Unlock field

Select the field in the Field name input box.

Unlock all

No parameters.

Apply bookmark

Bookmark id which can be entered manually or automatically by using the drop-down list.

Reload data

Set the desired mode in the Mode list. Set the Partial option to do only a partial reload.

The Reload data action should be used with extreme care as reloading the app triggers a sheet reload which can result in the complete loss of unsaved comments on this sheet. Additionally, in the case of publicated apps, it is neccessary to create a corresponding Security Rule on the Qlik Sense server.

B.5. Other

Action Parameters

Toggle fullscreen

Expression which must result 0 (disable fullscreen), 1 (go to fullscreen) or can be empty (toggles current fullscreen mode). This action is only on click trigger avaliable, due to browser security restrictions.

Appendix C: Releases Notes

trueChart Menubar v1.3.3

2018-09-13

  • Bugs

    • Rendering in Edge browser does not work correctly if position adjustment feature is used [HICO-41304]

    • Color defined in menu for text hover does not work for button elements [HICO-41399]

    • Main element colors are not applied to element group [HICO-41755]

trueChart Menubar v1.3.2

2018-07-31

  • Features and Improvements

    • Support of NPrinting for Menubar [HICO-40539]

  • Bugs

    • Default sorting for Sense Select elements are alphabetically instead of "selection state" [HICO-41437]

trueChart Menubar v1.3.1

2018-07-04

  • Features and Improvements

    • Support for Qlik Sense June 2018 [HICO-41107]

  • Bugs

    • Date picker not working in horizontal orientation [HICO-41156]

    • Action "Toggle fullscreen" not disables in auto mode (no condition) [HICO-41183]

trueChart Menubar v1.3.0

2018-05-31

  • Features and Improvements

    • New element item: Date Range Picker (single, multi, range) [HICO-2562]

    • New element item: Variable slider (single, multi, range) [HICO-2460]

    • New element item: Inputbox [HICO-2561]

    • Options to disable sense snapshot and maximize object buttons [HICO-2931]

    • New button action "Unlock field" [HICO-40891]

    • Selection based color configuration for single select elements [HICO-40931]

  • Bugs

    • Button Action "Select Value(s)" not working for all field types (numeric vs. text) [HICO-40918]

trueChart Menubar v1.2.6

2018-05-22

  • Bugs

    • Pop up windows at bottom opens down, so they not usable [HICO-40732]

    • Filters in app chaining break the URL if the dimension values contain backslashes [HICO-40852]

    • Incorrect behavior in connection with the sense engine with opened sense selections that are hidden by a dynamic display condition [HICO-41017]

    • Menubar dropdowns are overlapped by trueChart comment cells [HICO-41033]

trueChart Menubar v1.2.5

2018-05-08

  • Bugs

    • Menubar selections not showing in any cases [HICO-40903]

    • SelectValues action in button do not select, when field already has selections [HICO-40944]

    • Trigger action "clear Field" is not executed [HICO-40950]

    • onSelection trigger of a button skips the first onSelection event [HICO-40967]

trueChart Menubar v1.2.4

2018-04-09

  • Bugs

    • Select items remain "unselected" even if corresponding fields have selections [HICO-40884]

    • Button does not perform any further actions if a previous action was defined incorrectly and cannot be executed [HICO-40885]

    • Full screen action do not toggle after the toggle condition was edited [HICO-40888]

    • Failed upgrade (to 1.1.0) leads to repetitive update tries [HICO-40890]

trueChart Menubar v1.2.3

2018-04-03

  • Bugs

    • Pop up windows at bottom opens down, so they not usable [HICO-40732]

    • Filters in app chaining break the URL if the dimension values contain backslashes [HICO-40852]

    • Incorrect behavior in connection with the sense engine with opened sense selections that are hidden by a dynamic display condition [HICO-41017]

    • Menubar dropdowns are overlapped by trueChart comment cells [HICO-41033]

trueChart Menubar v1.2.5

2018-05-08

  • Bugs

    • Menubar selections not showing in any cases [HICO-40903]

    • SelectValues action in button do not select, when field already has selections [HICO-40944]

    • Trigger action "clear Field" is not executed and Sense-Select is "empty" when opened [HICO-40950]

    • onSelection trigger of a button skips the first onSelection event [HICO-40967]

trueChart Menubar v1.2.4

2018-04-09

  • Bugs

    • Select items remain "unselected" even if corresponding fields have selections [HICO-40884]

    • Button does not perform any further actions if a previous action was defined incorrectly and cannot be executed [HICO-40885]

    • Full screen action do not toggle after the toggle condition was edited [HICO-40888]

    • Failed upgrade (to 1.1.0) leads to repetitive update tries [HICO-40890]

trueChart Menubar v1.2.3

2018-04-03

  • Bugs

    • Changes in button-editor are not applied [HICO-40881]

trueChart Menubar v1.2.2

2018-02-27

  • Features and Improvements

    • Disable calculations in tcmenus HyperCube [HICO-40853]

Properties updates can not be applied when the app is published! To upgrade trueChart Menubar properly, you have to open the published app in a writable stream (i.e. by duplicating it), open a sheet containing the trueChart Menubar, so that updates can be performed. Afterwards you can (re-)publish the updated app.

trueChart Menubar v1.2.1

2018-02-09

  • Bugs

    • Select sorting after migration to v1.2 not correct (custom expression is missing) [HICO-40731]

trueChart Menubar v1.2.0

2018-2-5

  • Features and Improvements

    • New action "Go to app" (document chaining) [HICO-2564]

    • New action "Share app" (email | clipboard) [HICO-40703]

    • Responsive font sizes (menubar and buttons) [HICO-2901]

    • Grouping of elements: Single & Sense Select, Variable Dropdown, Button & Button Container [HICO-40496]

      • Migration of multi and button dropdown elements to group elements [HICO-40533]

    • Option to duplicate and copy/paste existing elements and sub elements [HICO-2233]

    • Trigger default selection when showing single select again [HICO-40576]

  • Bugs

    • Exception when creating new dimensions in extension as master item [HICO-40671]

trueChart Menubar v1.1.3

2018-1-31

  • Bugs

    • Exception when creating new dimensions in extension as master item [HICO-40671]

    • Inline icon in button text is not displayed [HICO-40712]

trueChart Menubar v1.1.2

2018-1-22

  • Bugs

    • Sense export was broken with version 1.1.1 [HICO-40659]

trueChart Menubar v1.1.1

2018-1-18

  • Bugs

    • General text settings do not affect correctly [HICO-40627]

    • JS-Exception while migration from v.1.0.4 to v1.1.0 [HICO-40646]

trueChart Menubar v1.1.0

2018-1-4

  • Features and Improvements

    • Support of Sense PDF export function [HICO-2178]

    • Support of drill-down dimensions in selections (Single, Sense and Multi) [HICO-2560]

    • Conditional display and hiding of menu elements [HICO-2890]

    • Improvement when using master item dimensions and expression-based dimensions [HICO-2524]

    • Specify expressions for dimension definition directly [HICO-2601]

    • Option to enter title, subtitle or footnote [HICO-2889]

    • Mark button+ actions for parallel (faster) or sequential (in order)execution [HICO-40445]

    • New position of edit button state in properties panel [HICO-40461]

    • Performance: Reduced initial loading time [HICO-40463]

  • Bugs

    • Menubar destroys representation of Sense filter pane objects in same sheet [HICO-2726]

    • Button+ UI code editor not working [HICO-2905]

    • [JS-Exception] due to incorrect default value expressions in single select items [HICO-2939]

    • Custom actions are not visible initially after reopening button+ editor [HICO-40454]

    • [JS-Exception] TypeError: Cannot read property 'layout' of undefined [HICO-40487]

trueChart Menubar v1.0.8

2017-11-22

  • Features and Improvements

    • Support of Sense 2017.11 Release (works also with v1.0.7)

    • Button+: Automatic line breaks in button+ text [HICO-2324]

  • Bugs

    • Button+ overwrites default hover color of the tCMenu, although no hover color is defined in Button+ [HICO-2897]

    • Button+ code editor not working in tc menubar [HICO-2905]

    • Scrolling with the mouse wheel in Sense Select does not work with IE11 [HICO-2933]

    • Single select description text im menubar not initial visible on iPad [HICO-28625]

    • Sense select breakes after selection with dynamic dimensions [HICO-31517]

trueChart Menubar v1.0.7

2017-09-28

  • Features and Improvements

    • Support of Sense 2017.09 Release [HICO-2572]

    • Button+: Custom CSS can defined as expression [HICO-2718]

    • HiCo.API: Code-Notification after trueChart Menubar painting [HICO-2834]

trueChart Menubar v1.0.6

2017-08-15

  • Features and Improvements

    • Option to hide sense navigation, title and selection bar [HICO-2559]

    • Button+: Definition of padding & margin [HICO-2301]

    • Button+: Image library (apps include used images for export) [HICO-2506]

    • Button+: Add new toggle fullscreen action [HICO-2687]

trueChart Menubar v1.0.5

2017-07-27

  • Features and Improvements

    • Support of Sense 2017.07 Release [HICO-2571]

  • Bug

    • Initial logo does not match the object size [HICO-2419]

    • Change of background color not applied [HICO-2598]

    • JS Exception on click on button dropdown [HICO-2675]

trueChart Menubar v1.0.4

2017-06-28

  • Features and Improvements

    • Improvement in handling session timeouts (selections fail, display not correct) [HICO-2612]

    • Add option to apply default selections sequentially [HICO-2620]

  • Bug

    • Sense Select and Single Select broken with Error from Engine after toggeling qlikSense Mode [HICO-2453]

    • Sense Dropdown is sometimes empty [HICO-2584]

    • Accumulation of the QlikSense error "Internal error" with trueChart4Sense-3.2.4 [HICO-2618]

trueChart Menubar v1.0.3

2017-06-15

  • Features and Improvements

    • Copy dimension name as default value to label [HICO-2369]

    • Show action cursor and hover color only if button actions defined [HICO-2450]

    • Renaming tc-Menu > trueChart Menubar [HICO-2473]

    • Hidden field support for select actions in button+ [HICO-2531]

  • Bug

    • Initial selection is not reset correctly when using dynamic (expression) default selection value for Single Selects [HICO-2413]

    • Wrong selection count / undefined in selection label [HICO-2416]

    • Dropdown placeholder in menu to long [HICO-2417]

    • ButtonPlus IE overlay in DropDown General State [HICO-2434]

    • Select value(s) action not working correct with some number values [HICO-2440]

    • Button not updated after setting new state condition [HICO-2441]

    • Menu elements in IE differs from Chrome [HICO-2443]

    • Dropdown backround longer than element size [HICO-2444]

    • Hover color isn’t working in Button Dropdown IE [HICO-2456]

    • Extension repaint while open/close sense select [HICO-2470]

    • Performance issues in "edit" mode, in combination with Qlik Sense v3.2SR3 or v3.2SR4 [HICO-2498]

    • Error while perform selection based on master item with expression [HICO-2514]

    • Expression based dimensions not working correct, selected dimension on item could be removed [HICO-2523]

    • New menu property calculation variable is not visible [HICO-2537]

    • Vertical Multi-Select scrolls to top when opening Single Select [HICO-2553]

trueChart Menubar v1.0.2

2017-05-05

  • Features and Improvements

    • Performance Improvement: Improve variable updates [HICO-2386]

    • Indication of running selections as calculation variable and minor improvements on button action editor (sorting & add new action) [HICO-2391]

    • User documentation in "Apperance/Info" section in properties panel [HICO-2392]

  • Bug

    • Default selections lead to endles loop when fields hidden by data script [HICO-2393]

trueChart Menubar v1.0.1

2017-04-25

  • Features and Improvements

    • Position adjustment settings for trueChart & trueChart Menubar to remove spaces in sense grid object layout [HICO-1949]

    • Horizontal menu is displayed in the small device (less iPad) as a vertical menu [HICO-2224]

    • Font-Family and Text-Style Settings [HICO-2225]

    • MashUp Support for Button+ and trueChart Menubar (incl. HiCo MashUp Template Update) [HICO-2226]

    • Custom Scrolling for TCMenu [HICO-2227]

    • Touch support for trueChart & trueChart Menubar [HICO-2243]

    • Performance improvement regarding button+ and trueChart communication with sense [HICO-2255]

  • Bug

    • Selection label is empty after opening sheet [HICO-2216]

    • Variable dropdown selection lable switch has no effect, if custom label was defined [HICO-2230]

    • Qlik color expression (argb) is evaluated wrong [HICO-2234]

    • Horizontal seperator is repeated on the right [HICO-2235]

    • Single Select scroll position for selected element is not as expected (for long lists) [HICO-2236]

    • No seperator between element and subelement in vertical menu [HICO-2238]

    • No scrolling in long horizontal Button Dropdown elements [HICO-2239]

    • Button Dropdown selection label is not working [HICO-2241]

    • Multi Select name can’t be an expression → no expression support for elements name anymore [HICO-2245]

    • Menu element icons can’t be removed [HICO-2247]

    • Scrollbar doesn’t disapear after reseting scrolling condition [HICO-2257]

    • Buttons not clickable in IE11 and wrong styles displayed (trueChart and trueChart Menubar) [HICO-2271]

    • Sorting at sense selection incorrect → [HICO-2319]

    • If sorting is set to automatic, the sorting by selection status (ascending) is set internally

    • If sorting is defined manually, the user has to define the sorting himself and, if necessary, he must also specify the sorting by selection status. With this sort, the selection behavior corresponds to the Qlik Sense standard.

    • The recommendation is to define sorting by selection status for Sense Selects and never for single selection (corresponds to the automatic behavior).

    • Performance improvement: Single Selects default selections are triggered multiple times [HICO-2357]

trueChart Menubar v1.0.0

2017-03-23

  • Epic

    • trueChart Menubar Extension [HICO-1983]

    • Trigger Action Button (Button+), supports multiple trigger actions (OnLoad, OnSelection, OnClick, BeforNavigation) and advanced button styling [HICO-1984]

    • User based customizable button+ actions per extension (trueChart Menubar & trueChart) [HICO-2193]