button properties

EXPERIMENTAL.

This API is under development. Do not rely on it. It may change or be removed in future versions.

These are the properties used by the Qlik Sense button. For more information about buttons and how they are used, see Button.

Version history

Version history
Version state	Details
Introduced	February 2020

Properties

showTitles

Type: Boolean

Show title for the visualization.

Default: false

showDetails

Type: Boolean

Sets if button details should be shown.

Default: false

title

Type: String | qStringExpression

Visualization title shown if "showTitles": true.

subtitle

Type: String | qStringExpression

Visualization subtitle shown if "showTitles": true.

footnote

Type: String

Visualization footnote shown if "showTitles": true.

navigation

Type: Object

Controls navigation to another sheet, a story, or a website when the button is clicked. You do not have to specify an action if you want to create a simple navigation button.

Default: false

useEnabledCondition

Type: Boolean

Defines if an enable condition is used or not.

Default: false

enabledCondition

Type: Number

Defines a calculation condition to enable the chart

Default: 1

actions

Type: Array

Defines one or more actions to be performed. For some actions you need to provide details for the action. The actions are performed in the order they are listed.

Type: Object
- actionType: applyBookmark
  
  Type: String
  
  Description: You can apply the selection that is defined in a bookmark that you choose.
- bookmark
  
  Type: String
- softLock
  
  Type: Boolean
Type: Object
- actionType: back
  
  Type: String
  
  Description: You can move one step backwards in your selection history.
Type: Object
- actionType: forward
  
  Type: String
  
  Description: You can move one step forwards in your selection history.
Type: Object
- actionType: clearAll
  
  Type: String
  
  Description: You can clear all selections in the app. You can optionally overwrite locked selections.
- softLock
  
  Type: Boolean
Type: Object
- actionType: clearAllButThis
  
  Type: String
  
  Description: You can clear selections from all fields except the one you specify. You can optionally overwrite locked selections.
- field
  
  Type: String
- softLock
  
  Type: Boolean
Type: Object
- actionType: clearField
  
  Type: String
  
  Description: You can clear all selections from a field that you specify.
- field
  
  Type: String
Type: Object
- actionType: selectAll
  
  Type: String
  
  Description: You can select all values in a field that you specify. You can optionally overwrite locked selections.
- field
  
  Type: String
- softLock
  
  Type: Boolean
Type: Object
- actionType: selectValues
  
  Type: String
  
  Description: You can select a list of values in a field that you specify. Separate the values to select with a semi colon. You can optionally overwrite locked selections.
- field
  
  Type: String
- value
  
  Type: String
- softLock
  
  Type: Boolean
Type: Object
- actionType: selectAlternative
  
  Type: String
  
  Description: Select all alternative values in a field that you specify. You can optionally overwrite locked selections.
- field
  
  Type: String
- softLock
  
  Type: Boolean
Type: Object
- actionType: selectExcluded
  
  Type: String
  
  Description: Select all excluded values in a field that you specify. You can optionally overwrite locked selections.
- field
  
  Type: String
- softLock
  
  Type: Boolean
Type: Object
- actionType: selectPossible
  
  Type: String
  
  Description: Select all possible values in a field that you specify. You can optionally overwrite locked selections.
- field
  
  Type: String
- softLock
  
  Type: Boolean
Type: Object
- actionType: toggleSelect
  
  Type: String
  
  Description: You can set the button to toggle between the current selection, and a selection that adds selections defined by a search string. You can use wild cards in the search string. If you want to define a list of values you need to use the format (A|B), where A and B are values to select.
- field
  
  Type: String
- value
  
  Type: String
- softLock
  
  Type: Boolean
Type: Object
- actionType: lockAll
  
  Type: String
  
  Description: You can lock all selections in the app.
Type: Object
- actionType: lockField
  
  Type: String
  
  Description: You can lock selections in a field that you specify.
- field
  
  Type: String
Type: Object
- actionType: unlockAll
  
  Type: String
  
  Description: You can unlock all selections in the app.
Type: Object
- actionType: unlockField
  
  Type: String
  
  Description: You can unlock selections in a field that you specify.
- field
  
  Type: String
Type: Object
- actionType: setVariable
  
  Type: String
  
  Description: You can assign a value to a variable.
- variable
  
  Type: String
- value
  
  Type: String

style

Type: Object

Style settings.

Note: The values for background color are fetched from the current theme. Setting color or colorExpression will override the theme used.

Additional properties:

label

Type: String

Description: Set the text for the label.
font

Type: Object

Description: Set the properties for the font.
- size
  
  Type: Number
  
  Description: Font size of button text. Number between 0 and 1, with 0 resulting in a minimum font size, and 1 being the maximum value representing 100% of the available space.
  
  Default: 0.5
- useColorExpression
  
  Type: Boolean
  
  Description: Defines if a color expression is used.
  
  Default: false
- color
  
  Type: Object
  
  Description: Set to specify font color.
  
  Index: -1
  
  Color: null
- colorExpression
  
  Type: String
  
  Description: An expression string that defines the font color.
- style
  
  Type: Object
  
  Description: Set bold, italic, and underline font options. Can be:
  - bold: true
  - italic: false
  - underline: false
- align
  
  Type: String
  
  Description: Set the alignment of the text to center, left or right.
  
  Default: center
background

Type: Object

Description: Set background to a color or image.
- useColorExpression
  
  Type: Boolean
  
  Description: Defines if a color expression is used.
- color
  
  Type: Object
  
  Description: Set to specify color.
  
  Index: -1
  
  Color: null
- colorExpression
  
  Type: String
  
  Description: An expression string that defines the color.
- useImage
  
  Type: Boolean
  
  Description: Defines if a background image is used.
  
  Default: false
- url
  
  Type: Object
  
  Description: Defines the background image URL.
- size
  
  Type: String
  
  Description: Defines the background image size.
- position
  
  Type: String
  
  Description: Sets the position of the background image.
  - topLeft
  - centerLeft
  - bottomLeft
  - topCenter
  - centerCenter
  - bottomCenter
  - topRight
  - centerRight
  - bottomRight
  Default: centerCenter
border

Type: Boolean

Description: Adjust the border of the button. You can set the corner radius and the width of the border. You can also set the color of the border, either a single color or with an expression.
- radius
  
  Type: Number
  
  Description: Set the corner radius of the border. Number between 0 and 1, with 0 resulting in no border radius, and 1 resulting in the maximum radius on the shortest side.
  
  Default: 0
- width
  
  Type: Number
  
  Description: Set the width of the border. Number between 0 and 0.5. A 0 results in no border, and 0.5 will create a border of half the length of the shortest side.
  
  Default: 0
- useColorExpression
  
  Type: Boolean
  
  Description: Defines if a color expression is used.
- color
  
  Type: Object
  
  Description: Set to specify border color.
  
  index: -1
  
  color: null
- colorExpression
  
  Type: String
  
  Description: An expression string that defines the border color.
icon

Type: Boolean

Description: Add an icon to the button.
- useIcon
  
  Type: Boolean
  
  Description: Defines if an icon is used.
  
  Default: false
- iconType
  
  Type: String
  
  Description: When enabled, the type of icon to use.
- position
  
  Type: String
  
  Description: Set the position of the icon. Can be set to:
  - Left
  - Right

Example

In this example we want to create a basic button that applies a bookmark action. It will include an icon and background image, align the text, and set a color.

  app.visualization.create(
    'action-button',
    [],
    {
      "actions": [
        { 
          "actionType": "applyBookmark",
          "bookmark": "1a2c59bf-2da7-400f-8b06-7202257760cb",
          "softLock": false",      
          "cId": "LwcVDAG"
        }
      ],
      "style": {
        "label": "Apply bookmark",
        "font": {
          "color": {
            "index": -1,
            "color": "#f94377"
          },
          "align": "left"
        },
        "background": {
          "useImage": false,
          "size": "auto",
          "position": "bottomCenter",
          "url": {
            "qStaticContentUrlDef": {"
              "qUrl": "/media/qlik-sense-logo.png"
            }
          }
        },
        "icon":  {
          "useIcon": true,
          "iconType": "bookmark",
          "position": "left"
        }
       }
    },
  ).then(function(vis) {
    vis.show('QV01');
  });

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here