English Qlik Sense Developers 2.0

Making your visualization extension dynamic

This section will describe how to change the behavior by configuring the properties panel making it possible to define the text displayed.

Building the basic properties panel

It should be possible to use and configure your visualization extensions in the same manner as standard Qlik Sense charts. You can define which properties are exposed to the end users in the properties panel and you can add additional custom properties that can be used in your code.

If you look at the output of our visualization extension, the properties panel will look like below. The Appearance accordion is enabled by default and it is available out of the box.

To create a text box where the rendered output can be defined, as an addition to the Appearance accordion, you need to add another object to the main script file: definition.

        return {
			// Define what our properties panel look like
			definition: {
			},
            //Paint resp.Rendering logic
            paint: function ( $element, layout ) {

            }
        };

You can define what the properties panel should look like inside definition. This basically defines the accordion with the sections and components to be used.

        return {
			// Define what our properties panel look like
			definition: {
				type: "items",
				component: "accordion",
				items: {
					appearancePanel: {
						uses: "settings"
					}
				}
			},

The line uses: "settings" defines that the reusable component settings should be used. The settings component is the same as the Appearance accordion.

Adding the text definition box

To add a text box into the Appearance accordion, use the following code.

			definition: {
				type: "items",
				component: "accordion",
				items: {
					appearancePanel: {
						uses: "settings",
						items: {
							MyStringProp: {
								ref: "myDynamicOutput",
								type: "string",
								label: "Hello World Text",
								defaultValue: "Hello world"
							}
						}
					}
				}
			},

Here is a short explanation of the code we just added:

  • MyStringProp is the representation of our new custom object
  • ref defines the name to reference the new property in the code
  • label is used for displaying the label above the text box
  • type defines the type definition, in this case we want to have a string returned
  • defaultValue defines the default value of the text box

And this is what the properties panel now look like:

Using the custom string property

The next step is to modify the code so it renders what is entered in the text box we just added. But first we add a console output to double-check where to find the object to reference in our code.

			paint: function ( $element, layout ) {
				//put this at the beginning of the paint method
				console.log( layout );

Then we change from the hard-coded result:

				$element.empty();
				var $helloWorld = $( document.createElement( 'div' ) );
				$helloWorld.html( 'Hello World from the extension "05-ExtTut-HelloWorld"<br/>' );
				$element.append( $helloWorld );

to the dynamic by using layout.myDynamicOutput:

				$element.empty();
				var $helloWorld = $( document.createElement( 'div' ) );
				$helloWorld.html( layout.myDynamicOutput );
				$element.append( $helloWorld );

After saving and reloading Qlik Sense Desktop, this is what it looks like:

If you make changes to ref, refreshing the browser will not display the changes. In such case, you need to delete the existing visualization from the sheet and then add it again. Double-checking the returned properties using console.log() is therefore a good advice.

Source code

Download the Dynamic Hello World extension