Skip to main content Skip to complementary content

Button property definition

Information noteSTABLE.

This API is reliable and breaking changes are unlikely.


The button definition property template can be used to add a custom property of button type. When defining a button property, the following fields can be used:


This field is optional for buttons. Can be either String, Integer, Number, Array or Boolean.

Information noteThe button effect is achieved by defining the component field to "button", see below.


Used for defining the label that is displayed in the property panel.


Used for defining how the property is visualized in the property panel. Used to override the default component that comes with the type setting. This field is mandatory for a button property and should always be "button".


Name or ID used to reference a property.


Used for defining the action when clicking the button.


action: function(data){
	//add your button action here
	alert("My visualization extension name is '"+data.visualization+"' and have id '"+data.qInfo.qId+"'.");


Defining a custom button

Defining a custom property of button type can look like below.


Information noteCustomization of properties always start with items:.
define( [
function ( ) {

	return {
		initialProperties : {
			qHyperCubeDef : {
				qDimensions : [],
				qMeasures : [],
				qInitialDataFetch : [{
					qWidth : 10,
					qHeight : 50
		definition : {
			type : "items",
			component : "accordion",
			items: {
				settings: {
					uses: "settings",
					items: {
						MyButton: {
							label:"My Button",
							component: "button",
							action: function(data){
								//add your button action here
								alert("My visualization extension name is '"+data.visualization+"' and have id '"+data.qInfo.qId+"'.");
		paint: function ($element) {

} );
This is what it looks like in the property panel

An interface with the title "props-button" at the top. Below the title is a line that says "Appearance". Under "Appearance" there are two hide and show buttons. They are named "General" and "My Button". The "My Button" hide and show button is expanded, and there is a button with text on it that says "My Button".

And this is what you receive back when clicking the button

A popup box with the title "JavaScript Alert - localhost:4848. Inside of the box it says "My visualization extension name is 'props-button' and have id 'BTMzTBc'.". There is an "OK" button on the bottom right of the pop-up box.

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!