Creating action buttons
qlik-embed: Where possible, use qlik-embed and qlik/api rather than this framework.
The action button is a chart for triggering actions. It does not visualize data but is used to modify other charts or data, like managing selections, applying bookmarks, setting variable values and so on. You can define actions and order them to create a desired flow. There is also a specific navigation action to move to a new page, that always executes last (Only available inside Qlik Sense).
Learn more about the action button, or review the Nebula Button API specification.
const embeddable = window.stardust.embed(app, {
context: { theme: "light" },
types: [
{
name: "button",
load: () => Promise.resolve(window["sn-action-button"]),
},
],
});
// Rendering a Button
embeddable.render({
type: "sn-action-button",
element: document.querySelector(".button"),
properties: {
actions: [
{
actionType: "selectValues",
actionLabel: "select A and B",
field: "Alpha",
value: "A;B",
softLock: false,
},
],
style: {
label: "Make selections",
},
},
});
Requirements
Requires @nebula.js/stardust
version 2.1.0
or later.
Installing
If you use npm: npm install @nebula.js/sn-action-button
.
You can also load through the script tag directly from
https://unpkg.com.
More examples
Executing several actions
You can define a flow of actions.
The actions are executed sequentially so the second action is not started until
the first one is done. Here is an example of selecting values in field Dim1
,
then selecting all possible values in field Dim2
and finally clearing selections in field Dim1
.
embeddable.render({
type: "sn-action-button",
element: document.querySelector("#one"),
properties: {
actions: [
{
actionLabel: "Select in Dim1",
actionType: "selectValues",
field: "Dim1",
softLock: false,
value: "B",
},
{
actionLabel: "Select possible in Dim2",
actionType: "selectPossible",
field: "Dim2",
softLock: false,
},
{
actionLabel: "Clear selected in Dim1",
actionType: "clearField",
field: "Dim1",
softLock: false,
},
],
style: {
label: "Trigger selection flow",
},
},
});
Styling
The label, background, and border styling can be changed. Inside Qlik Sense you can also add an icon and a background image. Here are is an example utilizing most of the settings.
![table example with styling](/_astro/sn-action-button-styling.DvwaUK8z_1tgopf.webp)
embeddable.render({
type: 'sn-action-button',
element: document.querySelector('.button'),
properties: {
style: {
label: 'Button',
font: {
size: 0.7,
color: {
index: 7,
color: '#87205d'
},
style: {
bold: true,
italic: true,
underline: true
},
align: 'left'
},
background: {
color: {
index: -1,
color: '#cfb162'
},
},
border: {
useBorder: true,
radius: 0.53,
width: 0.125,
color: {
index: -1,
color: '#b98c34'
},
},
},
});