Skip to main content
Announcements
Qlik Connect 2024! Seize endless possibilities! LEARN MORE
cancel
Showing results for 
Search instead for 
Did you mean: 
master_t
Partner - Creator II
Partner - Creator II

Creating a properties menu like the native pivot-table does

Hi everyone

The "pivot table" component that comes included with Qlik Sense has the following data selection menu:

Image 1.png

As you can see, it lets you chose dimensions and measures all in the same accordion section and they can be divided in multiple sections (Rows, Columns, Measures). They also can be reordered and moved from one sub-section to another using the drag-and-drop handle on the right.

I've been trying to figure out how to create such a menu, but with no luck. The documentation on how to create these menus seems to omit a lot from what I can see... can anyone help me? How do I create a menu similar to this one? (identical would be ideal )

Thanks in advance

Elia

4 Replies
toy
Employee
Employee

Hi Elia,

I followed the steps in the Working with data section (https://help.qlik.com/en-US/sense-developer/November2017/Subsystems/Extensions/Content/extensions-wo...) but changed the properties panel definition in the Hello Data extension:

definition: {

  type: "items",

  component: "accordion",

  items: {

    /**

    dimensions: {

    uses: "dimensions"

    },

    measures: {

      uses: "measures"

    },

    **/

    data: {

      uses: "data"

    },

    sorting: {

      uses: "sorting"

    },

    appearance: {

      uses: "settings"

    }

  }

}

The data {...} definition is not documented at the time but will be added in one of the upcoming releases.


Result:

data_accordion.png

master_t
Partner - Creator II
Partner - Creator II
Author

Thanks for your reply. However, this just puts measures and dimensions in the same accordion section, but it does not allow me to do what the pivot-table component does, which is: let me select TWO DIFFERENT SETS of dimensions (rows and columns) AND the measures.

dannyy81
Contributor III
Contributor III

have you come to a solution ?

alex_colombo
Employee
Employee

This is a tough one. What I can share with you is the current structure of Data section of a pivot table properties. Testing in a new extension it works partially. I can suggest to try it and dig a little bit into it in order to understand if you can leverage it. There is a lot of reference to pivot table source code which you can remove it

"data": {
            "type": "items",
            "component": "pivot-data",
            "translation": "properties.data",
            "addTranslation": "Properties.AddData",
            "items": {
                "dimensions": {
                    "type": "array",
                    "component": "dimensions",
                    "translation": "Common.Dimensions",
                    "alternativeTranslation": "properties.alternative.dimensions",
                    "ref": "qHyperCubeDef.qDimensions",
                    "disabledRef": "qHyperCubeDef.qLayoutExclude.qHyperCubeDef.qDimensions",
                    "min": 1,
                    "allowAdd": true,
                    "allowRemove": true,
                    "allowMove": true,
                    "addTranslation": "properties.dimensions.add",
                    "grouped": true,
                    "items": {
                        "libraryId": {
                            "type": "string",
                            "component": "library-item",
                            "libraryItemType": "dimension",
                            "ref": "qLibraryId",
                            "translation": "Common.Dimension"
                        },
                        "inlineDimension": {
                            "component": "inline-dimension"
                        },
                        "autoSort": {
                            "ref": "qDef.autoSort",
                            "type": "boolean",
                            "defaultValue": true,
                            "show": false
                        },
                        "cId": {
                            "ref": "qDef.cId",
                            "type": "string",
                            "show": false
                        },
                        "nullSuppression": {
                            "type": "boolean",
                            "ref": "qNullSuppression",
                            "defaultValue": false,
                            "translation": "properties.dimensions.showNull",
                            "inverted": true
                        },
                        "dimensionLimits": {
                            "type": "items",
                            "items": {
                                "otherMode": {
                                    "type": "string",
                                    "component": "dropdown",
                                    "ref": "qOtherTotalSpec.qOtherMode",
                                    "translation": "properties.dimensionLimits.limitation",
                                    "options": [
                                        {
                                            "value": "OTHER_OFF",
                                            "translation": "properties.dimensionLimits.none"
                                        },
                                        {
                                            "value": "OTHER_COUNTED",
                                            "translation": "properties.dimensionLimits.fixedNumber"
                                        },
                                        {
                                            "value": "OTHER_ABS_LIMITED",
                                            "translation": "properties.dimensionLimits.exactValue"
                                        },
                                        {
                                            "value": "OTHER_REL_LIMITED",
                                            "translation": "properties.dimensionLimits.relativeValue"
                                        }
                                    ],
                                    "defaultValue": "OTHER_OFF"
                                },
                                "otherSortMode": {
                                    "type": "string",
                                    "component": "buttongroup",
                                    "ref": "qOtherTotalSpec.qOtherSortMode",
                                    "options": [
                                        {
                                            "value": "OTHER_SORT_DESCENDING",
                                            "translation": "properties.dimensionLimits.fixedNumber.sortDescendingLabel"
                                        },
                                        {
                                            "value": "OTHER_SORT_ASCENDING",
                                            "translation": "properties.dimensionLimits.fixedNumber.sortAscendingLabel"
                                        }
                                    ],
                                    "defaultValue": "OTHER_SORT_DESCENDING"
                                },
                                "otherCounted": {
                                    "component": "expression",
                                    "expressionType": "ValueExpr",
                                    "ref": "qOtherTotalSpec.qOtherCounted",
                                    "defaultValue": {
                                        "qv": "10"
                                    }
                                },
                                "otherLimitMode": {
                                    "type": "string",
                                    "component": "buttongroup",
                                    "ref": "qOtherTotalSpec.qOtherLimitMode",
                                    "options": [
                                        {
                                            "value": "OTHER_GE_LIMIT",
                                            "label": ">=",
                                            "tooltipTranslation": "properties.greaterOrEqualTo"
                                        },
                                        {
                                            "value": "OTHER_GT_LIMIT",
                                            "label": ">",
                                            "tooltipTranslation": "properties.greaterThan"
                                        },
                                        {
                                            "value": "OTHER_LT_LIMIT",
                                            "label": "<",
                                            "tooltipTranslation": "properties.lessThan"
                                        },
                                        {
                                            "value": "OTHER_LE_LIMIT",
                                            "label": "<=",
                                            "tooltipTranslation": "properties.lessOrEqualTo"
                                        }
                                    ],
                                    "defaultValue": "OTHER_GE_LIMIT",
                                    "icon": true,
                                    "smallIconFont": true
                                },
                                "otherLimit": {
                                    "component": "expression",
                                    "expressionType": "ValueExpr",
                                    "ref": "qOtherTotalSpec.qOtherLimit",
                                    "defaultValue": {
                                        "qv": "0"
                                    }
                                },
                                "calculatedAgainstMessage": {
                                    "component": "text"
                                },
                                "modifierDisclaimer": {
                                    "component": "text",
                                    "translation": "properties.modifier.dimensionLimitDisclaimer"
                                }
                            }
                        },
                        "others": {
                            "type": "items",
                            "items": {
                                "suppressOther": {
                                    "type": "boolean",
                                    "ref": "qOtherTotalSpec.qSuppressOther",
                                    "translation": "properties.dimensionLimits.showOthers",
                                    "inverted": true,
                                    "defaultValue": false
                                },
                                "othersLabel": {
                                    "type": "string",
                                    "expression": "optional",
                                    "ref": "qDef.othersLabel",
                                    "translation": "properties.dimensionLimits.othersLabel"
                                },
                                "othersLabel2": {
                                    "type": "string",
                                    "component": "expression",
                                    "expressionType": "StringExpr",
                                    "ref": "qOtherLabel",
                                    "translation": "properties.dimensionLimits.othersLabel",
                                    "show": false
                                }
                            }
                        },
                        "globalGrouping": {
                            "type": "boolean",
                            "translation": "properties.dimensionLimits.globalGrouping",
                            "ref": "qOtherTotalSpec.qGlobalOtherGrouping",
                            "defaultValue": false
                        },
                        "totalMode": {
                            "type": "string",
                            "component": "switch",
                            "translation": "properties.showTotals",
                            "ref": "qOtherTotalSpec.qTotalMode",
                            "defaultValue": "TOTAL_OFF",
                            "trueOption": {
                                "value": "TOTAL_EXPR",
                                "translation": "properties.on"
                            },
                            "falseOption": {
                                "value": "TOTAL_OFF",
                                "translation": "properties.off"
                            }
                        },
                        "totalsLabel": {
                            "type": "string",
                            "component": "expression",
                            "expressionType": "StringExpr",
                            "ref": "qTotalLabel",
                            "translation": "properties.totals.label"
                        },
                        "visibilityCondition": {
                            "type": "string",
                            "component": "expression",
                            "ref": "qCalcCondition.qCond",
                            "expression": "optional",
                            "expressionType": "ValueExpr",
                            "translation": "Object.Table.Columns.VisibilityCondition",
                            "defaultValue": {
                                "qv": ""
                            },
                            "tid": "visibilityCondition"
                        },
                        "tableColorBgByExpression": {
                            "component": "expression",
                            "expressionType": "measure",
                            "ref": "qAttributeExpressions.0.qExpression",
                            "translation": "Object.Table.Measure.BackgroundExpression",
                            "defaultValue": ""
                        },
                        "tableColorByExpression": {
                            "component": "expression",
                            "expressionType": "measure",
                            "ref": "qAttributeExpressions.1.qExpression",
                            "translation": "Object.Table.Measure.ForegroundExpression",
                            "defaultValue": ""
                        },
                        "textAlignAuto": {
                            "ref": "qDef.textAlign.auto",
                            "type": "boolean",
                            "component": "switch",
                            "show": true,
                            "translation": "Common.Text.TextAlignment",
                            "options": [
                                {
                                    "value": true,
                                    "translation": "Common.Auto"
                                },
                                {
                                    "value": false,
                                    "translation": "Common.Custom"
                                }
                            ],
                            "defaultValue": true
                        },
                        "textAlign": {
                            "ref": "qDef.textAlign.align",
                            "type": "string",
                            "component": "item-selection-list",
                            "horizontal": true,
                            "items": [
                                {
                                    "component": "icon-item",
                                    "icon": "align_left",
                                    "labelPlacement": "bottom",
                                    "value": "left",
                                    "translation": "properties.dock.left"
                                },
                                {
                                    "component": "icon-item",
                                    "icon": "align_center",
                                    "labelPlacement": "bottom",
                                    "value": "center",
                                    "translation": "Common.Center"
                                },
                                {
                                    "component": "icon-item",
                                    "icon": "align_right",
                                    "labelPlacement": "bottom",
                                    "value": "right",
                                    "translation": "properties.dock.right"
                                }
                            ],
                            "defaultValue": "left"
                        }
                    }
                },
                "measures": {
                    "type": "array",
                    "component": "measures",
                    "translation": "Common.Measures",
                    "ref": "qHyperCubeDef.qMeasures",
                    "disabledRef": "qHyperCubeDef.qLayoutExclude.qHyperCubeDef.qMeasures",
                    "min": 1,
                    "allowAdd": true,
                    "allowRemove": true,
                    "allowMove": true,
                    "addTranslation": "properties.measures.add",
                    "grouped": true,
                    "items": {
                        "libraryId": {
                            "type": "string",
                            "component": "library-item",
                            "libraryItemType": "measure",
                            "ref": "qLibraryId",
                            "translation": "Common.Measure"
                        },
                        "inlineMeasure": {
                            "component": "inline-measure"
                        },
                        "autoSort": {
                            "ref": "qDef.autoSort",
                            "type": "boolean",
                            "defaultValue": true,
                            "show": false
                        },
                        "cId": {
                            "ref": "qDef.cId",
                            "type": "string",
                            "show": false
                        },
                        "numberFormatting": {
                            "type": "items",
                            "items": {
                                "useMasterFormat": {
                                    "type": "boolean",
                                    "component": "switch",
                                    "translation": "properties.libraryFormatting",
                                    "convertFunctions": {},
                                    "options": [
                                        {
                                            "value": true,
                                            "translation": "properties.on"
                                        },
                                        {
                                            "value": false,
                                            "translation": "properties.off"
                                        }
                                    ]
                                },
                                "numberFormat": {
                                    "type": "items",
                                    "items": {
                                        "numberFormattingType": {
                                            "type": "string",
                                            "component": "custom-formatter-dropdown",
                                            "ref": "qDef.qNumFormat.qType",
                                            "numFormatRef": "qDef",
                                            "translation": "properties.numberFormatting",
                                            "defaultValue": "U",
                                            "schemaIgnore": true,
                                            "options": [
                                                {
                                                    "value": "U",
                                                    "translation": "Common.Auto"
                                                },
                                                {
                                                    "value": "F",
                                                    "translation": "properties.numberFormatting.types.number"
                                                },
                                                {
                                                    "value": "M",
                                                    "translation": "properties.numberFormatting.types.money"
                                                },
                                                {
                                                    "value": "D",
                                                    "translation": "properties.numberFormatting.types.date"
                                                },
                                                {
                                                    "value": "IV",
                                                    "translation": "properties.numberFormatting.types.duration"
                                                },
                                                {
                                                    "value": "R",
                                                    "translation": "Common.Custom"
                                                },
                                                {
                                                    "value": "OFF",
                                                    "translation": "properties.numberFormatting.types.customFormatting"
                                                }
                                            ]
                                        },
                                        "numberFormattingMode": {
                                            "type": "boolean",
                                            "component": "switch",
                                            "ref": "qDef.numFormatFromTemplate",
                                            "translation": "properties.numberFormatting.formatting",
                                            "defaultValue": true,
                                            "options": [
                                                {
                                                    "value": true,
                                                    "translation": "properties.numberFormatting.simple"
                                                },
                                                {
                                                    "value": false,
                                                    "translation": "Common.Custom"
                                                }
                                            ]
                                        },
                                        "numberFormattingTemplates": {
                                            "type": "string",
                                            "component": "number-formatter-dropdown",
                                            "ref": "qDef.qNumFormat.qFmt",
                                            "numFormatRef": "qDef",
                                            "defaultValue": "#,##0",
                                            "schemaIgnore": true
                                        },
                                        "numDecimals": {
                                            "type": "integer",
                                            "ref": "qDef.qNumFormat.qnDec",
                                            "translation": "properties.numberFormatting.nDec",
                                            "defaultValue": 2,
                                            "schemaIgnore": true,
                                            "min": 0,
                                            "max": 14,
                                            "show": false
                                        },
                                        "numPrecisionDigits": {
                                            "type": "integer",
                                            "ref": "qDef.qNumFormat.qnDec",
                                            "translation": "properties.numberFormatting.significantFigures",
                                            "defaultValue": 10,
                                            "schemaIgnore": true,
                                            "min": 1,
                                            "max": 14,
                                            "show": false
                                        },
                                        "decimalSep": {
                                            "type": "string",
                                            "ref": "qDef.qNumFormat.qDec",
                                            "translation": "properties.numberFormatting.dec",
                                            "defaultValue": ".",
                                            "schemaIgnore": true
                                        },
                                        "thousandSep": {
                                            "type": "string",
                                            "ref": "qDef.qNumFormat.qThou",
                                            "translation": "properties.numberFormatting.thousandSeparator",
                                            "defaultValue": "",
                                            "schemaIgnore": true
                                        },
                                        "format": {
                                            "type": "string",
                                            "component": "number-formatter",
                                            "ref": "qDef.qNumFormat.qFmt",
                                            "numFormatRef": "qDef",
                                            "resetTranslation": "properties.numberFormatting.resetPattern",
                                            "translation": "properties.numberFormatting.formatPattern",
                                            "defaultValue": "",
                                            "schemaIgnore": true
                                        }
                                    }
                                }
                            }
                        },
                        "visibilityCondition": {
                            "type": "string",
                            "component": "expression",
                            "ref": "qCalcCondition.qCond",
                            "expression": "optional",
                            "expressionType": "ValueExpr",
                            "translation": "Object.Table.Columns.VisibilityCondition",
                            "defaultValue": {
                                "qv": ""
                            },
                            "tid": "visibilityCondition"
                        },
                        "tableColorBgByExpression": {
                            "component": "expression",
                            "expressionType": "measure",
                            "ref": "qAttributeExpressions.0.qExpression",
                            "translation": "Object.Table.Measure.BackgroundExpression",
                            "defaultValue": ""
                        },
                        "tableColorByExpression": {
                            "component": "expression",
                            "expressionType": "measure",
                            "ref": "qAttributeExpressions.1.qExpression",
                            "translation": "Object.Table.Measure.ForegroundExpression",
                            "defaultValue": ""
                        },
                        "textAlignAuto": {
                            "ref": "qDef.textAlign.auto",
                            "type": "boolean",
                            "component": "switch",
                            "show": true,
                            "translation": "Common.Text.TextAlignment",
                            "options": [
                                {
                                    "value": true,
                                    "translation": "Common.Auto"
                                },
                                {
                                    "value": false,
                                    "translation": "Common.Custom"
                                }
                            ],
                            "defaultValue": true
                        },
                        "textAlign": {
                            "ref": "qDef.textAlign.align",
                            "type": "string",
                            "component": "item-selection-list",
                            "horizontal": true,
                            "items": [
                                {
                                    "component": "icon-item",
                                    "icon": "align_left",
                                    "labelPlacement": "bottom",
                                    "value": "left",
                                    "translation": "properties.dock.left"
                                },
                                {
                                    "component": "icon-item",
                                    "icon": "align_center",
                                    "labelPlacement": "bottom",
                                    "value": "center",
                                    "translation": "Common.Center"
                                },
                                {
                                    "component": "icon-item",
                                    "icon": "align_right",
                                    "labelPlacement": "bottom",
                                    "value": "right",
                                    "translation": "properties.dock.right"
                                }
                            ],
                            "defaultValue": "left"
                        }
                    }
                }
            }
        },