Qlik Sense 3.2: Extension Properties

[Yianni_Ververis]

After reading Michael's wonderful post on the 3.2 features, https://community.qlik.com/blogs/qlikviewdesignblog/2017/04/04/introducing-qlik-sense-32?et=blogs.co..., I admit, I wanted to get into more details on each of the topics he mentioned. Even though this is impossible since there are so many goodies hidden in 3.2, I decided to focus more on the properties panel while creating custom extensions.

Some of these will make us retouch some of our extensions since, personally, I used workarounds like custom color in an input field as hex, inject dropdowns as html etc

Below I show the latest properties and at the end I attach an extension with everything working... Please note that, as the help pages suggest, some of these are "considered EXPERIMENTAL and may be subject to change or be removed in future releases."

For more details, please bookmark Qlik Sense Developer's help page

http://help.qlik.com/en-US/sense-developer/3.2/Subsystems/APIs/Content/extensions-api-reference.htm

SIMPLE TEXT DESCRIPTION	Integer
text: {     label:"This is a description for the properties panel (Text Component)",     component: "text" },	fontSize: {     type: "integer",     expression: "none",     label: "Font Size (Integer)",     defaultValue: "10",     ref: "vars.fontSize" },

INPUT TEXT	BUTTON
inputText: {     type: "string",     expression: "none",     label: "String (Input Text)",     defaultValue: "This is a test app to checkout custom properties",     ref: "vars.inputText" },	button: {     label:"My Button (Button Component)",     component: "button",     action: function(data){         alert("My visualization extension name is '"+data.visualization+"' and have id '"+data.qInfo.qId+"'.");     } },

BUTTON GROUP	Header 2
weight: {     type: "string",     component: "buttongroup",     label: "Font Weight (Button Group)",     ref: "vars.weight",     options: [{         value: "bold",         label: "Bold",         tooltip: "Select for Bold text"     }, {         value: "normal",         label: "Normal",         tooltip: "Select for normal text"     }],     defaultValue: "normal" },	show: {     type: "boolean",     label: "Show extra div? (boolean)",     ref: "vars.show",     defaultValue: false },

COLOR PICKER	DROP DOWN
colorPicker: {     label:"Background (Color-picker)",     component: "color-picker",     ref: "vars.color",     type: "integer",     defaultValue: 0 },	dropDown: {     type: "string",     component: "dropdown",     label: "Select Options (dropdown)",     ref: "vars.dropDown",     options: [{         value: "option1",         label: "Option 1",         tooltip: "Select for Option 1"     }, {         value: "option2",         label: "Option 2",         tooltip: "Select for Option 2"     }, {         value: "option3",         label: "Option 3",         tooltip: "Select for Option 3"     }],     defaultValue: "option2" },

LINK	SLIDER
link: {     label:"http://help.qlik.com/en-US/sense-developer/3.2/Subsystems/APIs/Content/ExtensionAPI/property-definit...",     component: "link",     url:"http://help.qlik.com/en-US/sense-developer/3.2/Subsystems/APIs/Content/ExtensionAPI/property-definit..." },	slider: {     type: "number",     component: "slider",     label: "Letter Spacing (Slider)",     ref: "vars.slider",     min: 1,     max: 10,     step: 1,     defaultValue: 1 },

RANGE SLIDER	SWITCH
rangeSlider: {     type: "array",     component: "slider",     label: "Range slider",     ref: "vars.rangeSlider",     min: 1,     max: 20,     step: 1,     defaultValue: [8, 17] },	switch: {     type: "boolean",     component: "switch",     label: "Show Border (Switch)",     ref: "vars.switch",     options: [{         value: true,         label: "Show"     }, {         value: false,         label: "Hide"     }],     defaultValue: false },

TEXT AREA	ARRAYS
textarea: {     label:"Textarea",     component: "textarea",     rows: 7,//the amount of rows in the textarea component (default is 3)     maxlength: 100,//will not allow more than 100 characters     ref: "vars.textarea",     defaultValue: "This can be your fottnote/legend to your visualizations" },	MyList: {     type: "array",     ref: "listItems",     label: "List Items",     itemTitleRef: "label",     allowAdd: true,     allowRemove: true,     allowMove: true,     addTranslation: "Add Item",     items: {         label: {             type: "string",             ref: "label",             label: "Label",             expression: "none"         },         textarea: {             label:"My textarea",             component: "textarea",             maxlength: 100,//you shouldn't write too much             ref: "myTextarea"         }     } }

Attached find the extension.

Yianni

test-properties.zip

[simondachstr]

Thanks for this Yianni.

Two questions:

1) Why can't we use expression: 'optional' on the text-area? Sometimes you have longer text elements which you wish to determine dynamically based on an expression and it would be handy if you had more space text in the panel.

2) In the Qlik Sense documentation https://help.qlik.com/en-US/sense-developer/3.2/Subsystems/Extensions/Content/Howtos/custom-list-pro..., the array custom property is classified as experimental, which means it could be removed in future versions.

You don't make any mention of such kind in your blog in respect to the array - is it okay to assume it will now be supported going forward?

Thanks,

Martin

[Yianni_Ververis]

Hello Martin,

Yes the expressions are still optional, I just did not add them here.

Regarding the experimental, you are right , I should have mentioned that.

Thank you,

Yianni

[simondachstr]

You should be able to edit your blog and correct it, no?

[Yianni_Ververis]

I just did!

Thank you both,

Yianni

[aadil_madarveet]

Hi,

Could you please help provide some example on how to reference the output of one property in another property. 

For example: Reference the input value from a string expression box and render the message in the text property panel.