Jon Gallant

How to Create a Power BI Slicer with the Power BI Custom Visual SDK

3 min read
powerbijavascript

Starting with version 1.5 of the Power BI Custom Visuals SDK, we now have the ability to create “slicer” visuals, which are visuals that can filter data in other visuals on the same report.

For the purposes of this blog post, we are going to create a very simple radio button control to demonstrate the components needed to create a slicer. I also created a much more sophisticated “Range Slider” control that you can find here: PowerBI-visuals-rangeSlider

See my How to Get Started with Power BI Custom Visuals for general custom visual development tutorials.

You can download the source for this visual here: PowerBI-visuals-radioSlicer

You can download the visual to use in reports here: Download Radio Slicer

Here’s what this custom visual will look like when you are done with this tutorial.

Reportview

Here’s what the icon looks like in the visualization pane: Vizpane

Step 0: Create Data Set

Create a dataset that has the following structure:

Values

1

2

3

4

You can use Power BI Desktop, Excel, Streaming Datasets, SQL or whatever you prefer. I’ve provided an excel spreadsheet here that you can use. Just import it into Power BI using the web interface, or use Power BI Desktop and Publish it to the web.

Step 1: Create Visual: pbiviz new

If you have no idea what pbiviz new means, then see my How to Get Started with Power BI Custom Visuals for general custom visual development tutorials.

Terminal window
pbiviz new radioSlicer


```csharp


Open this folder in [VS Code](https://code.visualstudio.com) or your preferred IDE.


## Step 2: Update Settings: capabilities.json


Open capabilities.json and add replace its contents with the following json.


This file:


- Adds a single Grouping data property, which will get us the categories needed for filtering
- Adds the “General->filter” format property which allows this visual to participate in filtering capabilities.
- Adds a “top” number so we get the max categories allowed by Power BI. Right now that number is 30k categories max, but I set to 100000 for fun.


## Step 3: Create Code: visual.ts


The meat of the visual lives in visual.ts. Rather than explain each piece individually, I’m including the full code file below with bullets that describe what is going on.


1\. Instantiate an ISelectionManager object in constructor
2\. Extract categories from Power BI data model
3\. Loop through categories and create a “selectionId” for each of them. SelectionIds are objects that you pass to the SelectionManager’s select method. It contains the metadata needed to filter.
4\. Loop through each value and inject a new radio button into the DOM for each value.
5\. Add an onclick event handler to each radio button that grabs the matching selectionId, selects it and then calls applySelectionFilter().


> Note: You can only filter on categories, not values, and you are limited to 30k categories.


## Step 4: Package: pbiviz package


Run the following command to package the visual and share it as a pbiviz file.


```bash


pbiviz package

Hopefully this post helps you get started building slicer visuals.

Jon

Share:
Share on X