topic Custom Visuals Table control with selection in Developer

Custom Visuals Table control with selection

bibble235 — Tue, 28 Feb 2017 06:45:00 GMT

Hi,

Very new to all this so please be gentle.

I want to have a table control which allows the selection of a row so that dataselected is fired.

I have look at the tutorial for barchart and, although not a table, it does implement this in the fashion I need. I therefore tried to adapt the GridNode to implement the same code in the barchart.

I have run into a few problems.

1/ The barchart implements visualTransform but does not use table for the dataViewMappings. How do I implement this for a table?

2/ How do I implement host.createSelectionIdBuilder()

Thanks

Re: Custom Visuals Table control with selection

v-chuncz-msft — Wed, 01 Mar 2017 08:13:28 GMT

@bibble235,

Based on my research, you may start with table template to implement the API.

Re: Custom Visuals Table control with selection

bibble235 — Wed, 01 Mar 2017 09:54:09 GMT

Thanks for taking the time.

I will look at this, using selection manager with table does seeem a popular subject.

I have tried to compile the grid control at the latest api and it fails with the RangeError checkExoression which is googleable. Tried latest typescript with no joy

Re: Custom Visuals Table control with selection

bibble235 — Wed, 01 Mar 2017 22:28:32 GMT

Hi,

Not used templates before. How do you used this. I have copied the files to a new project and built but I do not see any data only the headers for the table. This is because the model is never populated.

I dd look for template and power bi but it only gave me information on the depreciated repository.

Thanks,

Re: Custom Visuals Table control with selection

v-chuncz-msft — Thu, 02 Mar 2017 02:28:20 GMT

@bibble235,

Just like creating a new R Powered Custom Visual, use -t table.

pbiviz new sampleTableVisual -t table

As for the error message you mentioned above, check https://github.com/Microsoft/PowerBI-visuals/issues/136.

Re: Custom Visuals Table control with selection

bibble235 — Thu, 02 Mar 2017 09:34:39 GMT

Thanks useful stuff about the templates

For data which is very simple

The data mappings are

    "dataViewMappings": [{
        "table": {
                "rows": {
                    "for": { "in": "Values" },
                    "dataReductionAlgorithm": { "top": { "count": 30000000 } }
                },
                "rowCount": { "preferred": { "min": 1 } }
            }
    }],

What I want to achieve is a sortable table with a ISelectionId but there does not seem to be any way to create a selection builder as it does not seem to want to take a table as an argument and seems to only support categorical mappings which I do not use.

let mySelectionId = host.createSelectionIdBuilder()
	.withCategory(myCategory, myCounter)
        .createSelectionId()

The gridNode comes close to what I want and I can select a row attribute but the control is all in javascript as there is no SeclectionId

Re: Custom Visuals Table control with selection

v-chuncz-msft — Fri, 03 Mar 2017 03:05:52 GMT

@bibble235,

That's why I introduced the table template.

Re: Custom Visuals Table control with selection

bibble235 — Sun, 05 Mar 2017 22:31:05 GMT

This is not resolved. Using the example below

I cannot create a report which looks like the above using the template table suggested. Here is what I see.

Which you can see does not meet my needs. It could be that I am misusing the template but I have done nothing but build it.

I have tried also to

a) Try and raise a custom event to mimick the barChart selection manager

b) Build a table using the DataViewMappings table e.g.

{
	"dataRoles": [{
		"displayName": "Column1",
		"name": "Column1",
		"kind": "GroupingOrMeasure"
	},
	{
		"displayName": "Column2",
		"name": "Column2",
		"kind": "GroupingOrMeasure"
	}],
    "dataViewMappings": [{
        "table": {
			"rows": {
				"select": [
					{
						"for": 
						{ 
							"in": "Column1" 
						}
					},
					{
						"for": 
						{ 
							"in": "Column2" 
						}
					},
					{
						"bind": 
						{
							"to": "Column2"
						}
					}
				]
			}
		}
    }]
}

The table builds and displays successfully but does not raise the custom event when an item is selected. The click is fired as I can see this when debugging. i,e, the debugger stops on the debugger statement.

            let bars = this.tBody.selectAll('tr').data(tableViewModel.dataPoints);
			
            let selectionManager = this.selectionManager;

            bars.enter();
			
            bars.on('click', function(d) {
                selectionManager.select(d.selectionId).then((ids: ISelectionId[]) => {
					console.log(d.selectionId);
					debugger;
                });

                (<Event>d3.event).stopPropagation();
            });
			
            bars.exit()
               .remove();

However the dataSelected event which I see fired when an item is selected.

Hopefully this all makes sense

Iain

Re: Custom Visuals Table control with selection

v-chuncz-msft — Wed, 08 Mar 2017 10:32:39 GMT

@bibble235,

Instead, you may use try...catch statement for troubleshooting.