button properties
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 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.
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');
});