Chapter 05 - Improving the Hello World Experience

OK, let's improve the Hello World experience.
In this chapter we'll make the Hello World example a bit more dynamic:

• Changing the behavior by using the property panel:
  • Define the text displayed (not a hard coded "Hello World" anymore)
• Create a preview image to be displayed when clicking on the object in (left) object panel

Making "Hello World" Dynamic

When building Visualization Extensions it is essential that a non developer can use and configure the object like any other native object of Qlik Sense.
Therefore you can define which properties are exposed to the user in the (right) property panel and add additional custom properties which can then be used in your code.

If you have a look at the output of our very first "Hello World" example you'll recognize that the property panel looks as follows:

The "Appearance" accordion is enabled by default and available out of the box without doing anything. Now we'd like to inject just another text box into this accordion where we can define the output rendered:

Desired result:

Therefore we add another object to the skeleton of the script file, called definition:

define( [ /* dependencies */ ],
    function ( /* dependency arguments */ ) {
        'use strict';
        return {
            // Define how our property panel looks like
            definition: {

            },
            // Paint resp.Rendering logic
            paint: function ( $element, layout ) {
                // Your rendering code goes here ...             
            }
        };
    } );

Inside definition you can define how the property panel should look like, basically you can define the accordion, its sections and components to be used.
The default definition loads a reusable component called settings, therefore we see the "Appearance" accordion:

definition: {
    type: "items",
    component: "accordion",
    items: {
        appearancePanel: {
            uses: "settings"
        }
    }
}

The line uses: "settings" defines here that the re-usable component settings should be used. I'll tell you more about other re-usable components in one of the upcoming chapters.

A custom string property

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"
                }
            }
        }
    }
},
...

Code Explanation:

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

Good, we have now added a new property to the property panel where we can enter a value for our new, improved "Hello World" example:

Use the custom string property

Now let's modify the code to render what we enter in our text box. Before doing so let's go back to our code and add a console output to double-check where we can find the object to reference in our code:

// put this inside at the beginning of your paint method
console.log(layout);

The rest of this exercise is easy, instead of hard-coding the result

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

we make it dynamic by using layout.myDynamicOutput

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

Adding a preview image

The last exercise is easy, we want to add a good looking preview image if you click on the object in the Library or Assets panel.

For modifying the displayed preview image, do the following:

• Create a new image and save it as .png file in the folder of your extension
• Open the .qext file and change it by adding the line preview as shown below

Our final result:

Congrats, you have now created an improved version of your "Hello World" example, although there is certainly still room for improvement ;-)