Defining a Properties panel in Qlik Sense® visualizations

Typically, the most common properties used by any Qlik Sense visualization are Dimensions, Measures, and Appearance. The appearance section is included by default when we create any Qlik Sense visualization, even if the Properties panel is not defined.

We can extend the definition of these properties in the JavaScript code to reuse the built in sections. The following recipe demonstrates how to define and extend the definitions of properties in Qlik Sense visualization and further reference these properties in our code.

Getting ready

This recipe is a continuation of the previous recipe. So, we will be using the same QlikSense-Cookbook-C7-R1-HelloWorld.js file, which contains the code for the dynamic extension as discussed in the There's more... section.

How to do it…

  1. Open the QlikSense-Cookbook-C7-R1-HelloWorld.js file located at C:Users<username>DocumentsQlikSenseExtensions QlikSense Cookbook – Hello World.
  2. We have reused the settings section while creating the dynamic extension, which is nothing but the internal name for the Appearance section.
  3. Next, we will extend the definition to reuse other built-in sections. In this example we will reuse the sorting sections.
  4. Add the following piece of code after the QSpropertyPanel under items:
            sorting: {
            uses: "sorting"
        }
  5. Save the JavaScript file and refresh your Qlik Sense application at this stage so that the "QlikSense Cookbook – Hello World" gets updated. The Properties panel for the extension will look similar to the following image:
    How to do it…
  6. We will output some values to the paint method by inserting the code as shown in the following code inside the paint function:
       console.info('paint >> layout >> ', layout);
   $element.empty();
              var $helloWorld  = $(document.createElement('div'));
                // Variable holding the output
                var html = '<b>Property values:</b><br/>';
                html += 'Title: ' + layout.title + '<br/>';
                html += 'SubTitle: ' + layout.subtitle + '<br/>';
           // Assigning the variable to our output container
    $helloWorld.html( html );
   //$helloWorld.html(layout.QSDynamicExtension);
               $element.append($helloWorld);
  7. The final script for the QlikSense-Cookbook-C7-R1-HelloWorld.js file will look like the following code:
    define( [
        'jquery'
    ],
    function ( $ ) {
        'use strict';
        return {
   definition: {
    type: "items",
    component: "accordion",
    items: {
      
        appearancePanel: {
            uses: "settings",
            items: {
                QSPropertyPanel: {
                    ref: "QSDynamicExtension",
                    type: "string",
                    label: "QlikSense extension Text"
                },

        sorting: {
            uses: "sorting"
        }
        
            }
        }
    }
},
            paint: function ( $element, layout ) {
  //console.log(layout);
   console.info('paint >> layout >> ', layout);
  $element.empty();
              var $helloWorld  = $(document.createElement('div'));
  // Variable holding the output
  var html = '<b>Property values:</b><br/>';
  html += 'Title: ' + layout.title + '<br/>';
  html += 'SubTitle: ' + layout.subtitle + '<br/>';
           // Assigning the variable to our output 
           //container
    $helloWorld.html( html );
               $element.append($helloWorld);
            }
        };
    } 
);
  8. The changes we made in the JavaScript file will introduce the, Property Values, section to the Properties panel.
  9. Save the file and return back to the Qlik Sense application.
  10. Create a new sheet.
  11. Go to the How to do it… mode.
  12. On the left hand side pane, you will notice the extension object "QlikSense Cookbook –Hello World". Drag the extension object onto the sheet.
  13. Next, go to the General section under Properties and add Title as Qlik Sense CookBook-Hello World and SubTitle as Chapter 7.
  14. The resulting output will be as follows:
How to do it…

How it works…

We reference the defined properties in our JavaScript file under the paint section. We use a layout parameter that includes the current scope of the visualization extension together with the properties; this parameter is passed to the paint method.

There's more…

We can use other native Qlik Sense properties in our Properties panel definitions such as Dimension, Measure, Data Handling, Reference lines, and so on. For more information on the Add-Ons go to the following address:

https://help.qlik.com/sense/2.0/en-US/developer/#../Subsystems/Extensions/Content/extensions-reusing-properties.htm%3FTocPath%3DBuilding%2520visualization%2520extensions%7CGetting%2520started%2520building%2520visualization%2520extensions%7CBuilding%2520a%2520properties%2520panel%7C_____1

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset