Creating a properties menu like the native pivot-table does

master_t — Thu, 18 Jan 2018 15:43:21 GMT

Hi everyone

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

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

Re: Creating a properties menu like the native pivot-table does

toy — Fri, 19 Jan 2018 07:59:32 GMT

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-work-with-data.htm) 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:

Re: Creating a properties menu like the native pivot-table does

master_t — Fri, 19 Jan 2018 08:54:33 GMT

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.

Re: Creating a properties menu like the native pivot-table does

dannyy81 — Thu, 20 Oct 2022 08:46:39 GMT

have you come to a solution ?

Re: Creating a properties menu like the native pivot-table does

alex_colombo — Fri, 04 Nov 2022 14:54:19 GMT

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" } } } } },

topic Re: Creating a properties menu like the native pivot-table does in Integration, Extension & APIs

Creating a properties menu like the native pivot-table does

Re: Creating a properties menu like the native pivot-table does

Re: Creating a properties menu like the native pivot-table does

Re: Creating a properties menu like the native pivot-table does

Re: Creating a properties menu like the native pivot-table does