Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
bibble235
Frequent Visitor

Custom Visuals Table control with selection

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

8 REPLIES 8
v-chuncz-msft
Community Support
Community Support

@bibble235,

 

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

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

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,

@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.

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Thanks useful stuff about the templates

 

For data which is very simple

 

table.png

 

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

 

 

@bibble235,

 

That's why I introduced the table template.

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

This is not resolved. Using the example below

 

excel.png

 

 

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

 

 

pbix.png

 

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

@bibble235,

 

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

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

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

 

 

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.