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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

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
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.