Custom Visual Selection

[cboneill0099]

I have a custom visual where I'm trying to implement selection.  I've basically followed along with the sample bar chart tutorial here: https://github.com/microsoft/PowerBI-visuals-sampleBarChart

I have it close, but not quite.  When I initally load the report, I'm putting the custom visual and a regular table on the canvas.  When I click on the custom visual rows, the table does not get filtered.  However, if I click the table, it'll filter down the custom visual.  Then I unselect the selection on the table, and start clicking the custom visual, and it then will filter down the table.

Basically, I have to first select and unselected something on the table, and once I've done that, selection on the custom visual starts to work.  Does anyone have any idea what would cause this behavior?

[Anonymous]

hi @cboneill0099  it is really only need downgrade to 2.5

pbiviz --version 3.1.5 for me

[cboneill0099]

Just wanted to provide some additional information on this and hopefully someone will notice something.  When I'm populating the array that holds my data set I am adding a selectionID as follows:

for (let i = 0, len = Math.max(category1.values.length, category2.values.length, dataValue1.values.length, dataValue1.values.length); i < len; i++) {
            barChartDataPoints.push({
                Cat1: <string>category1.values[i],
                Cat2: <string>category2.values[i],
                BarMeasure: <number>dataValue1.values[i],
                ColorMeasure: <number>dataValue2.values[i],
                selectionId: host.createSelectionIdBuilder()
                    .withCategory(category2, i)
                    .createSelectionId()
            });

I added the following variable to my class:

private selectionManager: ISelectionManager;

In my visual constructor I am setting selectionManager like so:

this.selectionManager = options.host.createSelectionManager();

In my update method I have a local variable I am setting equal to my instance variable:

let selectionManager = this.selectionManager;

When I populate my table with data I added the following code:

selectionManager.select(rowdata.selectionId).then((ids: ISelectionId[]) => {
                                });

I had other stuff in there, but took it out to try and get down to bare bones to try and make it work.  Like I mentioned above, the only way this works is if I select and de-select a data point on another report visual.  Thanks for any advice!

[dm-p]

Hi @cboneill0099,

I see this hasn't had much traction and the only thing that looks "off" to me based on the snippets of code is that you have selectionManager as a class property, and you're then letting it to another variable in the update method.

This may compund things, but I'm not 100% sure it's an issue - ISelectionID objects should be reasonably consistent if using the same approach.

Either way, it might be worth removing the let and just setting the code below as follows:

this.selectionManager.select(rowdata.selectionId).then((ids: ISelectionId[]) => {
                                });

If this doesn't bear fruit, I might be abe to spare some time to do some further analysis if that's not the problem. Do you have a link to your visual code in its entirety, like a Git repo with latest code committed? It's sometimes good to see how the whole thing fits together, particularly with where the code is running in the context of the code itself. Being able to run the code in situ is often very helpful in diagnosing for anyone who hasn't been on the same journey as you so far. If you'd rather share privately then feel free to PM me the details.

If you have any specifics about how you're customising the capabilities and/or putting data into the visual's data roles when testing then that would be a great help too - I see you're working with 2 category variables and the sample chart code has one data role for this, so this suggests you have some additional customisation that may have an effect on things and I'd like to make sure that if I can offer any assistance, that it's helpful and not something you might have already tried so far.

Good luck!

Daniel

[cboneill0099]

Hi @dm-p 

Thanks for the response.  I uploaded my code to a repo: https://github.com/cboneill0099/customVisual

I gave your suggestion a shot, but unfortunately no luck.  I'd appreciate any suggestions you may have, this was my first shot at a custom visual.  I had trouble finding examples and basically stumbled my way throught it.

Thanks,

Chris

[dm-p · Accepted solution]

Yup - stumbling through is what we do! 😉

Thanks for the code - today is the first bit of free time I've had to take a look, so apologies for the delay in coming back. I can see why you were letting the property now, so my previous assumption definitely isn't the problem in terms of executing the visual.

I'd tried a few things but as a last ditch attempt, I noticed you were using version 2.1.0 of the SDK/API. I updated this to 2.5.0 locally and the visual worked as I believe it should:

• Visual is refreshed/started for the first time
• Clicking a table row will cross-filter an associated visuals, e.g. table
• Prior to updating the SDK, this would only work if I cross-filter a related visual first, essentially replicating your original problem.

This suggests a bug in that version of the SDK that has since been fixed. I made no further changes to your code, except for updating the SDK:

Run the following from the console in your project root:

npm i -g powerbi-visuals-tools@2.5

You'll need to update your project to use this, so run:

pbiviz update 2.5.0

Then:

pbiviz --install-cert

To update your certificate.

Then, run pbiviz start and re-test. Hopefully this should work right off the bat.

I'm hoping that this is all you need. If so, you had already solved the coding problem yourself 🙂 Nice work BTW!

All the best,

Daniel

[cboneill0099]

Works now, really appreciate the help on that!