Skip to main content Skip to complementary content

button properties

button()

These are the properties used by Qlik Sense buttons.

Since:
  • Qlik Sense 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.

Information noteNote: The values for background color are fetched from the current theme. Setting color or colorExpression will override the theme used.
  • 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 using qlik-visual

  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!