Creating custom components within Qlik Sense® visualizations

Other than the predefined properties, the user may want to create custom components to alter the properties of the extension object. This is done in the appearance according to the main JavaScript file. The use of custom components provides the user with more options to customize the extension objects from the Properties panel.

The list of different UI components that you can use in the custom properties is as follows:

  • Check box
  • Input box/Text box
  • Drop down list
  • Radio button
  • Button group
  • Switch
  • Slider
  • Range-slider

Getting ready

This recipe is a continuation from the previous recipe. So we will be using the QlikSense-Cookbook-C7-R1-HelloWorld.js file for this recipe as well, which we created for dynamic extensions in the There's more... section.

The recipe explains the procedure to create a check box in the Properties panel.

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. Next, we will add the property definition of the custom Check box as a new accordion item. This will be put inside the return block under items.
  3. The definition of check box will be as follows:
    MyAccordion: {
      type: "boolean",
      label: "Show me",
      ref: "myproperties.show",
      defaultValue: true
      },
  4. 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: {
            MyAccordion: {
        type: "boolean",
        label: "Show me",
        ref: "myproperties.show",
        defaultValue: true
      },

        appearancePanel: {
            uses: "settings",
            items: {
                QSPropertyPanel: {
                    ref: "QSDynamicExtension",
                    type: "string",
                    label: "QlikSense extension Text"
                }
            }
        }
    }
},
            paint: function ( $element, layout ) {
   console.log(layout);
   $element.empty();
              var $helloWorld  = $(document.createElement('div'));
               $helloWorld.html(layout.QSDynamicExtension);
               $element.append($helloWorld);
            }
        };
    } 
);
  5. Save the file and return back to the Qlik Sense application.
  6. Create a new sheet.
  7. Go to the How to do it… mode.
  8. On the left-hand side pane, you will find the extension object "QlikSense CookBook –Hello World". Drag the extension object onto the sheet.
  9. The Properties panel to the right displays the Show me checkbox as the following image:
    How to do it…

How it works…

The definition for each of the custom properties is stated in the definition block of the code in the main JavaScript file of the extension.

In our example, the definition for the check box contains four fields namely type, ref, label, and defaultvalue. The field type is mandatory and should be assigned a Boolean value for a check box property definition.

  • label is used to label the check box with a header in the Properties panel
  • ref is an Id to refer to the check box property
  • defaultvalue defines the default value for the check box

There's more…

In a way similar to the one described in the preceding recipe, you can also define properties to create sliders, radio buttons, description boxes, and so on. The following URL reflects upon the procedure to create all these custom components:

https://help.qlik.com/sense/2.0/en-US/developer/#../Subsystems/Extensions/Content/Howtos/working-with-custom-properties.htm

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

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