cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
optimusprime Regular Visitor
Regular Visitor

cannot create a SelectionID

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.

 

 

 

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
dm-p Established Member
Established Member

Re: cannot create a SelectionID

Hi @optimusprime,

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:

image.png

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

View solution in original post

7 REPLIES 7
dm-p Established Member
Established Member

Re: cannot create a SelectionID

Hi @optimusprime,

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:

  1. That category contains an object when you attempt to retrieve it
  2. That the createSelectionIdBuilder call is actually being hit - if the above isn't working then this will be the case, as attempting to assign an index from a null-valued array will crash in your browser.

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

dm-p Established Member
Established Member

Re: cannot create a SelectionID

Hi @optimusprime,

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:

  1. That category contains an object when you attempt to retrieve it
  2. That the createSelectionIdBuilder call is actually being hit - if the above isn't working then this will be the case, as attempting to assign an index from a null-valued array will crash in your browser.

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

dm-p Established Member
Established Member

Re: cannot create a SelectionID

Hi @optimusprime,

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:

  1. That category contains an object when you attempt to retrieve it
  2. That the createSelectionIdBuilder call is actually being hit - if the above isn't working then this will be the case, as attempting to assign an index from a null-valued array will crash in your browser.

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

Highlighted
optimusprime Regular Visitor
Regular Visitor

Re: cannot create a SelectionID

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

 

se.png

dm-p Established Member
Established Member

Re: cannot create a SelectionID

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?

optimusprime Regular Visitor
Regular Visitor

Re: cannot create a SelectionID

@dm-p 

dropbox ok? See link below.  it is still in its early stage and it is a bit messy.  Let me know if you can see it.  Thanks.

 

 

Just Updated the link to public @dm-p , thanks!

dm-p Established Member
Established Member

Re: cannot create a SelectionID

Hi @optimusprime,

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:

image.png

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

View solution in original post

Helpful resources

Announcements
Ask Amir Anything

Exclusive LIVE Community Event No. 2 – Ask Amir Anything

Next in our Triple A series: Ask Amir Netz questions about the latest updates, features and future.

Ask Amanda Anything Q&A

Ask Amanda Anything Q&A

Learn the answers to some of the questions asked during the Amanda Triple A event.

October 2019 Community Highlights

October 2019 Community Highlights

October was a busy month in the community. Read the recap article to learn about some of the events and content.

New Solution Badges

New Solution Badges

Two waves of brand new solution badges are coming! Read the article for more information on our new community badges.

Users Online
Currently online: 178 members 2,183 guests
Please welcome our newest community members: