Button Settings

Features

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

General

Open

The General section features following options:

Name

This is where you name your button, this will not be displayed in your BI application.

Show Condition

You can set a condition to show/hide your button.

Scenarios name

This is where you name your scenario

Scenario condition

You can set a condition to show/hide your scenario.

Label

Open

The Label section features following options:

Scenario

If you have multiple scenarios configured you can select the scenario for which you want to change the label settings..

Button Type

The Type list gives you a selection of various predefined button appearances, all of which can be fine-tuned in the adjacent settings sections. 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.

Label

This is where you set what label is in your MENUBAR, this is the name that will be displayed in your BI application.

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 Leonardo UI (Qlik Sense) icon repository.

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.

Icon Position

Using the Icon position option you can set the position of your icon in your 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.

Show Border

With the Show Border setting, you can disable/enable a predefined border.

Appearance

The Appearance section features following options:

Scenario

If you have multiple scenarios configured you can select the scenario for which you want to change the appearance settings.

Width

This is where you set the width of your button.

Height

This is where you set the height of your button.

Font settings

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

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.

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 enable the padding by increasing the pixels all around or clicking on the expand icon to adjust each side individually.

Margin

With the Margin setting, you can enable the Margin by increasing the pixels all around or clicking on the expand icon to adjust each side individually.

Border

The Border setting allows you to set the border’s color, radius, width.

Shadow

The Shadow setting allows you to set the shadows color, width, blur and spread.

Actions

The Actions section features following options:

Scenario

If you have multiple scenarios configured you can select the scenario for which you want to change/add the action.

Trigger Type

The Trigger Type option is where you select what will trigger your action.

Action name

Is where you choose what will happen after you have activated a trigger.

Custom type

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 CSS code can be written as plain CSS or as an expression. Writing it as expression gives you the possibility to use variables which leads to even more flexibility.