You can use buttons to:
-
add quick links for easy selection and navigation in your app
-
reload data
When to use it
The button is useful when you want to help the app user by providing:
- predefined selections or selection controls
- navigation links to other sheets, stories, or websites
- reload data functionality in an app
You can reload data in an app that you own. App users need the appropriate access rights. For more information, see Designing access control.
Example of buttons in use on a sheet
Creating a button
You can create a button on the sheet you are editing. This shows how to create a button that makes a selection and then navigates to another sheet. It is also possible to create a button that just performs the action, or that navigates.
Do the following:
- In the Assets panel under Charts, drag a Button object to the sheet.
- Click Add action under Actions in the properties panel.
-
Select the action you want to use.
For some actions you need to provide details for the action. For example, for the Select values in a field action, you need to select a field, and which value to select in the field.
- Select which navigation option to use under Navigation. You can navigate to another sheet, a story or a website.
- Set the label of the button in Label under General in the properties panel.
You will now have a button that makes a data selection and then navigates to the place in the app you selected.
Setting the action
You can add one or more actions to be performed when the button is clicked. For some actions you need to provide details for the action.
The actions are performed in the order they are listed under Actions. You can change the order of an action by dragging it.
Toggle Runtime evaluation on or off to change when the expressions in the button are evaluated. If this setting is turned off, the expressions in the button (for example, the value expression for a variable) are evaluated independently of one another. With the setting turned on, the expressions for each action are evaluated at the action's runtime. This allows expression values set in an action to be carried forward for future actions in the chain.
Related video content
Configuring an action for a button is similar to setting sheet actions. The main differences are:
-
Sheet actions are configured under Actions in the properties panel when the sheet is the object in focus.
-
Button actions are configured under Actions and navigation in the properties panel when the button is selected.
-
There are some differences between which actions are available for buttons and sheets.
For video content describing the action configurations for sheets, see Adding actions to sheets.
Apply bookmark
You can apply the selection that is defined in a bookmark that you choose.
Clear all selections
You can clear all selections in all states in the app. You can optionally overwrite locked selections.
Clear selections in other fields
You can clear selections from all fields except the one you specify. You can optionally overwrite locked selections.
If no selections are made in the specified field, all values in this field will be selected.
Move forwards in your selections
You can move one step forwards in your selection history.
Move backwards in your selections
You can move one step backwards in your selection history.
Clear selections in field
You can clear all selections from a field that you specify.
Lock all selections
You can lock all selections in the app.
Lock a specific field
You can lock selections in a field that you specify.
Unlock all selections
You can unlock all selections in the app.
Unlock a specific field
You can unlock selections in a field that you specify.
Select all values in a field
You can select all values in a field that you specify. You can optionally overwrite locked selections.
Select values in a field
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.
Select values matching search criteria
You can select all values that match the search results from a search criteria that you specify. You need to specify the search criteria as a string. You can optionally overwrite locked selections.
- If you want to use an expression, you need to enclose it in single quotes, for example, ='=Sum([Sales Amount]) > 200000'.
- If you want to search for a partial string, you need to use wild cards (*, ?,^). If you do not use wild cards, only strings that match exactly are selected.
Select alternatives
Select all alternative values in a field that you specify. You can optionally overwrite locked selections.
Step cyclic dimension
Cycle fields in a selected cyclic dimension forward or backward.
Limitations
Step cyclic dimension has the following limitations:
-
In Qlik Sense Mobile, buttons with the action Step cyclic dimension will only cycle dimension if the button is in a container.
-
In Qlik Sense Mobile, buttons with the action Step cyclic dimension do not cycle the dimension in offline mode.
Set active field
Set the active field in a cyclic dimension.
Limitations
Set active field has the following limitations:
-
Set active field uses the position of the selected field in the cyclic dimension. If the fields are reordered in the cyclic dimension, Set active field will use the field in the same position as the originally selected field. To resolve this, select the field again in the button properties.
Select excluded
Select all excluded values in a field that you specify. You can optionally overwrite locked selections.
Select possible values in a field
Select all possible values in a field that you specify. You can optionally overwrite locked selections.
Toggle field selection
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.
Set variable value
You can assign a value to a variable.
Reload data
You can run the load script to reload data.
You can also select Partial reload. For more information, see Partial reload.
Refresh dynamic views
Refreshes the displays of all dynamic objects on the sheet based on the current selection.
Navigation
You can choose to navigate 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. A button can only have one navigation option at a time.
Go to next sheet
Navigate to the next sheet sequentially.
Go to previous sheet
Navigate to the previous sheet sequentially.
Go to last sheet
Navigate to the last sheet.
Go to first sheet
Navigate to the first sheet.
Go to a sheet
Navigate to a specific sheet, and optionally highlight a specific chart on the sheet.
Under Sheet, enter the name of the desired sheet or select it from the list. Under Chart ID, enter the object ID for the chart or select the desired chart from the list.
You can obtain the object ID with either of the following methods:
-
Add /options/developer to your URL. Next, right-click the chart and click
Developer. -
For certain chart types, you can use the ObjectId chart function. For example, add =ObjectId() as a dimension along with any measure. The chart ID is displayed and you can write it down for future reference. For more information, see ObjectId - chart function.
Go to a sheet defined by sheet ID
Navigate to a specific sheet. Enter the sheet ID of the desired sheet. You can find the ID of a sheet in the URL of the browser with the sheet open. The sheet ID follows after /sheet/ followed by /.
Example: Sheet URL
The ID of the sheet is 7300b241-f221-43db-bb8b-8c8cc1887531 in this example.
Go to a story
Navigate to a specific story. Enter the name of the desired story, or select it from the list.
Open a website or email
Open a specified website or email client. Enter the URL to navigate to. Optionally, select Open in same window to have the website or email client open in the same window.
Generate on-demand app
Creates an on-demand app based on the current selection. You must select an on-demand app navigation link (see Building an on-demand app). The status of the app is displayed as the app is created.
Styling the button
You have a number of styling options available under Appearance in the properties panel.
Click 
Styling under Appearance > Presentation to further customize the styling of the chart. The styling panel contains various sections under the General and Chart tabs.
You can reset your styles by clicking 
next to each section. Clicking Reset all resets styles for all available tabs in the styling panel.
For general information about styling an individual visualization, see Applying custom styling to a visualization.
Adding an icon
You can add an icon to the button under Appearance > Icon. Choose from a number of preset options.
Customizing the text
You can set the text for the title, subtitle, and footnote under Appearance > General. To hide these elements, switch the Show titles setting to off.
Additionally, you can set the text for the button Label.
You can style the text that appears in the chart.
Do the following:
-
Under Appearance > Presentation, click
Styling. -
On the General tab, set the font, emphasis style, font size, and color for the following text elements:
-
Title
-
Subtitle
-
Footnote
-
-
On the Chart tab, set the text properties for the button Label. Set the font, emphasis style, text alignment, font size, and color.
You can also choose from a number of text layout options for this label under Layout behavior. The following options are available:
-
Responsive: You can adjust the font size of the Label, with additional text size adjustments applied based on button size and text length. Adjustments are made to fit all text content into the button.
-
Fluid: You can adjust the font size of the Label, with additional text size adjustments applied based on button size only. This re-scaling of the text is independent of text length. If the text is too long, an ellipsis is inserted at the end.
-
Fixed: You can adjust the font size of the Label in pixels. If the text is too long, an ellipsis is inserted at the end.
-
Customizing the background
You can customize the general background, as well as the background of the button itself. The background of each can be set by color and image. Background options can be configured by expanding Appearance > Presentation in the properties panel, then clicking Styling.
Setting the general background
The general background of the button includes the title area, as well as the chart itself, which is partially covered by the button itself.
Do the following:
-
In the properties panel, expand the Appearance section.
-
Under Appearance > Presentation, click
Styling. -
On the General tab of the styling panel, you can select a background color (single color or expression). You can also set the background to an image from your media library or from a URL.
When using a background color, use the slider to adjust the opacity of the background.
When using a background image, you can adjust image sizing and position.
Setting the background of the button
The background of the button includes the portion that the user can click to execute the action.
Do the following:
-
In the properties panel, expand the Appearance section.
-
Under Appearance > Presentation, click
Styling. -
On the Chart tab of the styling panel, you can select a background color (single color or expression), and also set the background to an image from your media library.
When using a background image, you can adjust image sizing and position.
Adjusting the border of the interactive portion of the button
You can adjust the border of the part of the button the user interacts with to perform intended action.
Do the following:
-
Under Appearance > Presentation, click
Styling. -
On the Chart tab, under Border, switch the border On to display it on the button.
-
Adjust the corner radius and width.
-
Set the color of the border, either a single color or with an expression.
Customizing the border and shadow of the entire object
You can customize the border and shadow of the entire object in which the button is located. Note that you can also adjust the border of the clickable button itself.
Do the following:
-
In the properties panel, expand the Appearance section.
-
Under Appearance > Presentation, click
Styling. -
On the General tab of the styling panel, under Border, adjust the Outline size to increase or decrease the border lines around the chart.
-
Select a color for the border.
-
Adjust the Corner radius to control the roundness of the border.
-
Under Shadow in the General tab, select a shadow size and color. Select None to remove the shadow.
Disabling and enabling the button
You can set a calculation condition to enable the chart under Enable chart. If the condition is evaluated to 0, the button is disabled.
Converting from the Button for navigation in the Dashboard bundle
You can convert an existing Button for navigation control into a button. There are some limitations when you do the conversion.
- The navigation option to switch to edit mode (Switch to edit mode) is not supported.
- The action to select a value and then lock the field (Select a value and lock field) is not supported. This will be converted into two consecutive actions, Select values in a field and Lock a specific field.