Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Calling all Data Engineers! Fabric Data Engineer (Exam DP-700) live sessions are back! Starting October 16th. Sign up.

Reply
PBI_Rob
New Member

Custom Slicer - Selection Issue

Hi there,

 

I'm relatively new to developing custom visuals for PowerBI, and I've started with a slicer. I'm running into a weird issue that's probably best described with an image:

 

Custom Slicers

 

I'm hoping this is enough to go on. Note that correct numbers are returned using my slicer, but it feels more like a 'visibility:hidden' than a 'display:none', if that even approaches a worthwhile analogy 😉

 

Here's the selection code - I removed the UI code, settings, and pretty much everything else, since it seems to be *almost* working and I'm convinced it's an issue with how I'm selecting:

 

module powerbi.extensibility.visual {

    export class Visual implements IVisual {

        private host: IVisualHost;
        private selectionManager: ISelectionManager;
        private selectionIds: any = {};

        constructor(options: VisualConstructorOptions) {
            
            this.host = options.host;
            this.selectionManager = options.host.createSelectionManager();
        
        }

        // called by update on load and on settings change
        public init(options: VisualUpdateOptions) {
            
            this.selectionIds = {};
            const category = options.dataViews[0].categorical.categories[0];
            const values = category.values;

            values.forEach((item: number, index: number) => {
            
                this.selectionIds[item.toString()] = this.host.createSelectionIdBuilder()
                    .withCategory(category, index)
                    .createSelectionId();

                let value = item.toString(); // 'Adults 25-54' or 'Individuals 2+'

                // this holds the 'checkbox' and label UI elements
                const inputContainer = document.createElement('div');

                inputContainer.onclick = function (ev) {
                    
                    this.selectionManager.clear();
                    this.selectionManager.select(this.selectionIds[value]).then((ids: ISelectionId[]) => { });
                    this.selectionManager.applySelectionFilter();

                }.bind(this);

            });

        } 

    } // class

} // module

My first thought is that maybe I need to use the interactivity utils, but after digging around in chiclet's source and a few other resources, I figured it might be faster to post here and see if someone can put things into focus for me.

 

Thanks a lot!

Rob

1 ACCEPTED SOLUTION
PBI_Rob
New Member

I believe I've resolved the issue. In case someone else runs into something similar, I added the Advanced Filter API. That's it.

 

The "filter" addition to the capabilities file seems to be the difference between the original and expected behaviours.

 

Cheers,

Rob

View solution in original post

1 REPLY 1
PBI_Rob
New Member

I believe I've resolved the issue. In case someone else runs into something similar, I added the Advanced Filter API. That's it.

 

The "filter" addition to the capabilities file seems to be the difference between the original and expected behaviours.

 

Cheers,

Rob

Helpful resources

Announcements
FabCon Global Hackathon Carousel

FabCon Global Hackathon

Join the Fabric FabCon Global Hackathon—running virtually through Nov 3. Open to all skill levels. $10,000 in prizes!

September Power BI Update Carousel

Power BI Monthly Update - September 2025

Check out the September 2025 Power BI update to learn about new features.

FabCon Atlanta 2026 carousel

FabCon Atlanta 2026

Join us at FabCon Atlanta, March 16-20, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.

Top Solution Authors