Make 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 the visualization extension, the properties pane will look like the following image. 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 the properties panel look like
        definition: {
        },
        //Paint resp.Rendering logic
        paint: ( $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 the 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 preceding code:

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

This is what the properties panel should 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 that you just added. But first you add a console output to verify where to find the object to reference in your code.

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

Then you change from the hard-coded result:

    $element.empty();
    const $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();
    const $helloWorld = $( document.createElement( 'div' ) );
    $helloWorld.html( layout.myDynamicOutput );
    $element.append( $helloWorld );

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

Note: If you make changes to ref, refreshing the browser will not display the changes. In this case, you need to delete the existing visualization from the sheet and then add it again. As a best practice, verify the returned properties using console.log().

Complete code example

define( [
  'jquery'
  ],
  ( $ )=>{
    'use strict';

    return {
      //Define what our properties panel look like
      definition: {
        type: "items",
        component: "accordion",
        items: {
          appearancePanel: {
            uses: "settings",
            items: {
              MyStringProp: {
                ref: "myDynamicOutput",
                type: "string",
                label: "Hello World Text",
                defaultValue: "Hello world"
              }
            }
          }
        }
      },

      //Paint resp.Rendering logic
      paint:  ( $element, layout ) => {
        $element.empty();
        const $helloWorld = $( document.createElement( 'div' ) );
        $helloWorld.html( layout.myDynamicOutput );
        $element.append( $helloWorld );
      }
    };
   });