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