cannot create a SelectionID

[Anonymous]

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.

[dm-p · Accepted 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

[dm-p]

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:

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

[Anonymous]

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

[dm-p]

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?

[Anonymous]

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

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:

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]

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:

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