Extensions - property panel - How to replicate the Columns item - "Show column if..."

[rbartley]

Hi everyone,

Does anyone know how to define the property panel in so that it replicates the table visualization properties?  I am particularly interested in how to include the "Show column if..." item, but the "Background color expression", etc. would also be useful.

Column property panel:

 I know how to add dimensions (and measures), so that the dimension property panel looks like this:

But this does not give me everything I need.

Any help gratefully received.

Regards,

Richard

 

[rbartley · Accepted solution]

I found the answer here: https://extendingqlik.upper88.com/some-useful-patterns-for-your-qlik-sense-extension-property-panel/ 

Big thanks to @ErikWetterberg 

You can effectively overload an existing property by adding items to, for example, the standard dimensions or measures panels.

measures: {
  uses: "measures",
  min: 1,
  max: 6,
  items: {
    type: {
      ref: "qDef.type",
      type: "string",
      label: "Type",
      component: "dropdown",
      options: [
        { value: "line", label: "Line" },
        { value: "area", label: "Area" },
        { value: "column", label: "Bar" },
        { value: "none", label: "None" }
      ],
      defaultValue: "line"
    }
  }
}	

The example above adds a dropdown list to the measures panel and for  my case, where I wanted to add  "Show column if..." and "Show as link if..." expressions, I used this:

var dimensions = {
		uses: "dimensions",
		min: 2,
		items: {
			hide: {
			  ref: "qDef.hideColumn",
			  type: "string",
			  label: "Hide field if...?",
			  type: "string",
			  expression: "optional"
			},
			showaslink: {
			  ref: "qDef.showAsLink",
			  type: "string",
			  label: "Show as link if...?",
			  type: "string",
			  expression: "optional"
			}
			
		  }
    };

...
...
var myCustomSection = {
		// not necessary to define the type, component "expandable-items" will automatically
		// default to "items"
		// type: "items"
		component: "expandable-items",
		label: "Custom Table Settings",
		items: {
				
				dimensions: {
				type: "items",
				label: "Dimensions",
				items: {
					textdesc: propText,
                    dimensions: dimensions
                    }
                },
		....
		...
              
...
...
return {
		type: "items",
		component: "accordion",
		items: {
			customSection: myCustomSection,
			appearance: appearanceSection
		}
	};

[rbartley]

Note:

If you want the new item(s) to be accessible for every row, you will need to set the ref attribute type to qAttributeExpressions, e.g.

var dimensions = {
		uses: "dimensions",
		min: 1,
		items:{
			hidecolumn: {
				type: "string",  
				label: "Hide field if...?",
				ref: "qAttributeExpressions.0.qExpression",
				expression: "always",
				defaultValue: ""
			},
			showaslink: {
				ref: "qAttributeExpressions.1.qExpression",
			  	label: "Show as link if...?",
			  	type: "string",
				expression: "always",
				defaultValue: ""  
			}
			
		  }
	};