Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
My custom visual is based on the sample bar chart from Microsoft.
My capabiliteis.json
"dataRoles": [ { "displayName": "Categories", "description": "Add your measure here to display its value in the card.", "name": "Categories", "kind": "Grouping" }, { "displayName": "Actual Value", "description": "", "name": "Actual_Value", "kind": "Measure" }, { "displayName": "Targets", "description": "", "name": "Targets", "kind": "Measure" }, .......
My viewmodel
export function visualTransform(options: VisualUpdateOptions, visualSettings: VisualSettings, host: IVisualHost): IViewModel {
let dataViews = options.dataViews;
let dataView = dataViews[0];
let categorical = dataView.categorical; let category = categorical.categories[0]; let dataValue = categorical.values[0]; let selectionId: ISelectionId = host.createSelectionIdBuilder() .withCategory(category, 0) .createSelectionId(); .............................
Validated that all the input data are correct, It stops at the creating selectionID....Not sure why because it is basically the same as in the sample barchart. Also how do I debug in this createselectionidbuilder?
Thanks.
Solved! Go to Solution.
Hi @Anonymous,
Thanks for the link - it was very helpful as the issue was not specifically in that part of the code. The host object in your createSelectionIdBuilder call is null at run time. Because of this, there is no method against it and the routine crashes out.
Add the following to your constructor function in visual.ts:
this.host = options.host;
This will ensure that when it is passed to your visualTransform call in the update method, that the host is actually instantiated with the correct object.
Here's my output for reference:
I didn't need to make any changes to the code in your function detailed above, so your undersanding of the selection ID stuff is all good 🙂
Hopefully you're on your way now!
Daniel
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Hi @Anonymous,
Thanks for the link - it was very helpful as the issue was not specifically in that part of the code. The host object in your createSelectionIdBuilder call is null at run time. Because of this, there is no method against it and the routine crashes out.
Add the following to your constructor function in visual.ts:
this.host = options.host;
This will ensure that when it is passed to your visualTransform call in the update method, that the host is actually instantiated with the correct object.
Here's my output for reference:
I didn't need to make any changes to the code in your function detailed above, so your undersanding of the selection ID stuff is all good 🙂
Hopefully you're on your way now!
Daniel
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Hi @Anonymous,
Your code looks okay, based on the createSelectionIdBuilder() function spec.
This suggests to me that the DataViewCategoryColumn you are passing in is not a valid object.
Two things I would check:
To assist debugging these two points, I'd re-write the code snippet as follows and look in your browser JS console when running:
let dataViews = options.dataViews;
let dataView = dataViews[0];
console.log("1 - getting categorical dataview");
let categorical = dataView.categorical;
console.log("2 - getting category"); let category = categorical.categories[0];
console.log("3 - getting first category"); let dataValue = categorical.values[0];
console.log(" category:", category);
console.log("4 - creating selection ID");
let selectionId: ISelectionId = host.createSelectionIdBuilder() .withCategory(category, 0) .createSelectionId();
console.log("5 - done!");
console.log(" selection ID", selectionId);
I'm typing this in directly, so you might need to check for syntax errors.
If the happy path is hit, you'll see the following in your console:
1 - getting categorical dataview 2 - getting category 3 - getting first category category [object details] 4 - creating selection ID 5 - done! selection ID [object details]
If you see output for steps 1 and 2, but not 3, you can assume that the problem is between here, i.e. the let category = categorical.categories[0]; statement.
This is overkill and you wouldn't package it into your finished visual but sometimes it's a really good idea to be sure exactly where you think is failing, is actually failing.
You could also try this approach, but I personally haven't got on with it particularly well.
Hopefully this will help isolate. Let me know how you get on 🙂
Cheers,
Daniel
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Thanks @dm-p
This is what I see...It looks that it died on the creating selectionID. How do I know what went wrong here? thanks
I agree that this is the failure point but would need to look at the code to ascertain further. Do you have a link you can share at all?
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Hi @Anonymous,
Your code looks okay, based on the createSelectionIdBuilder() function spec.
This suggests to me that the DataViewCategoryColumn you are passing in is not a valid object.
Two things I would check:
To assist debugging these two points, I'd re-write the code snippet as follows and look in your browser JS console when running:
let dataViews = options.dataViews;
let dataView = dataViews[0];
console.log("1 - getting categorical dataview");
let categorical = dataView.categorical;
console.log("2 - getting category"); let category = categorical.categories[0];
console.log("3 - getting first category"); let dataValue = categorical.values[0];
console.log(" category:", category);
console.log("4 - creating selection ID");
let selectionId: ISelectionId = host.createSelectionIdBuilder() .withCategory(category, 0) .createSelectionId();
console.log("5 - done!");
console.log(" selection ID", selectionId);
I'm typing this in directly, so you might need to check for syntax errors.
If the happy path is hit, you'll see the following in your console:
1 - getting categorical dataview 2 - getting category 3 - getting first category category [object details] 4 - creating selection ID 5 - done! selection ID [object details]
If you see output for steps 1 and 2, but not 3, you can assume that the problem is between here, i.e. the let category = categorical.categories[0]; statement.
This is overkill and you wouldn't package it into your finished visual but sometimes it's a really good idea to be sure exactly where you think is failing, is actually failing.
You could also try this approach, but I personally haven't got on with it particularly well.
Hopefully this will help isolate. Let me know how you get on 🙂
Cheers,
Daniel
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Hi @Anonymous,
Your code looks okay, based on the createSelectionIdBuilder() function spec.
This suggests to me that the DataViewCategoryColumn you are passing in is not a valid object.
Two things I would check:
To assist debugging these two points, I'd re-write the code snippet as follows and look in your browser JS console when running:
let dataViews = options.dataViews;
let dataView = dataViews[0];
console.log("1 - getting categorical dataview");
let categorical = dataView.categorical;
console.log("2 - getting category"); let category = categorical.categories[0];
console.log("3 - getting first category"); let dataValue = categorical.values[0];
console.log(" category:", category);
console.log("4 - creating selection ID");
let selectionId: ISelectionId = host.createSelectionIdBuilder() .withCategory(category, 0) .createSelectionId();
console.log("5 - done!");
console.log(" selection ID", selectionId);
I'm typing this in directly, so you might need to check for syntax errors.
If the happy path is hit, you'll see the following in your console:
1 - getting categorical dataview 2 - getting category 3 - getting first category category [object details] 4 - creating selection ID 5 - done! selection ID [object details]
If you see output for steps 1 and 2, but not 3, you can assume that the problem is between here, i.e. the let category = categorical.categories[0]; statement.
This is overkill and you wouldn't package it into your finished visual but sometimes it's a really good idea to be sure exactly where you think is failing, is actually failing.
You could also try this approach, but I personally haven't got on with it particularly well.
Hopefully this will help isolate. Let me know how you get on 🙂
Cheers,
Daniel
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
14 | |
2 | |
2 | |
1 | |
1 |