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.comment.created#commen…, 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 DESCRIPTIONInteger
2017-04-28 23_07_23-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png2017-04-28 23_08_10-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png

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 TEXTBUTTON
2017-04-28 23_09_25-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png2017-04-28 23_09_40-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png

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 GROUPHeader 2
2017-04-28 23_09_54-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png2017-04-28 23_10_06-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png

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 PICKERDROP DOWN
2017-04-28 23_10_14-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png2017-04-28 23_10_24-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png

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"

},

 

LINKSLIDER
2017-04-28 23_10_40-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png2017-04-28 23_10_59-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png

link: {

    label:"http://help.qlik.com/en-US/sense-developer/3.2/Subsystems/APIs/Content/ExtensionAPI/property-definition-link.htm",

    component: "link",

    url:"http://help.qlik.com/en-US/sense-developer/3.2/Subsystems/APIs/Content/ExtensionAPI/property-definition-link.htm"

},

slider: {

    type: "number",

    component: "slider",

    label: "Letter Spacing (Slider)",

    ref: "vars.slider",

    min: 1,

    max: 10,

    step: 1,

    defaultValue: 1

},

 

RANGE SLIDERSWITCH
2017-04-28 23_11_07-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png2017-04-28 23_11_14-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png

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 AREAARRAYS
2017-04-28 23_11_23-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png2017-04-28 23_11_40-Helpdesk Management - Google Charts _ Sheets - Qlik Sense.png

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