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:
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.
QlikSense-Cookbook-C7-R1-HelloWorld.js
file located at C:Users<username>DocumentsQlikSenseExtensions QlikSense Cookbook – Hello World
.MyAccordion: { type: "boolean", label: "Show me", ref: "myproperties.show", defaultValue: true },
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); } }; } );
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 panelref
is an Id to refer to the check box propertydefaultvalue
defines the default value for the check box