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: { component: "link", }, | 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