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

Get certified in Microsoft Fabric—for free! For a limited time, get a free DP-600 exam voucher to use by the end of 2024. Register now

Reply
Silko
Helper II
Helper II

Custom visual text input (search)

Hi,

 

I have created a custom visual with a text input, which I wanted to use for a search through slicer. For the start I made just a search through table. It worked perfectly fine on development tools.

search.png

search1.png

But when I import it into power bi desktop I can't use the input. It looks like it is disabled or keyboard events are not being processed. 
desktop.png
Why is that?

1 ACCEPTED SOLUTION

If someone didn't see, Microsoft already made custom visual with search capability. It is called Attribute Slicer. You can find it here:
https://app.powerbi.com/visuals/show/AttributeSlicer1652434005853

View solution in original post

9 REPLIES 9
mike_honey
Memorable Member
Memorable Member

This is a great concept - I'd really like to help get it working. Can you share your code so far? Github?

 

Have you tried publishing that PBI Desktop file to the PBI web service and testing it there?

Hi, thanks for your replay. I tried web service as well but it is the same.

I will share my code here:

module powerbi.visuals {
    export interface CategoryViewModel {
        value: string;
        identity: string;
        color: string;
    }

    export interface ValueViewModel {
        values: any[];
    }

    export interface ViewModel {
        header: any;
        values: ValueViewModel[];
    }

    export class MySlicer implements IVisual {
        public static capabilities: VisualCapabilities = {
            // This is what will appear in the 'Field Wells' in reports
            dataRoles: [
                {
                    name: 'Category',
                    kind: powerbi.VisualDataRoleKind.Grouping,
                }
            ],
            // This tells power bi how to map your roles above into the dataview you will receive
            dataViewMappings: [{
                categorical: {
                    categories: {
                        for: { in: 'Category' },
                        dataReductionAlgorithm: { top: {} }
                    }
                }
            }],
            // Objects light up the formatting pane
            objects: {
                general: {
                    displayName: data.createDisplayNameGetter('Visual_General'),
                    properties: {
                        formatString: {
                            type: { formatting: { formatString: true } },
                        },
                    },
                },
            }
        };

        public static converter(dataView: DataView, colors: IDataColorPalette): ViewModel {
            var viewModel: ViewModel = {
                header: 'Default Header',
                values: []
            }
            if (dataView) {
                var data = dataView.categorical.categories;
                var metadata = dataView.metadata;
                
                viewModel.header = metadata.columns[0].displayName;
                if (data && data.length > 0) {
                    for (var i = 0, catLength = data[0].values.length; i < catLength; i++) {
                        viewModel.values.push(data[0].values[i]);
                    }
                }
            }

            return viewModel;
        }

        private hostContainer: JQuery;
        private table: D3.Selection;
        private tHead: D3.Selection;
        private tBody: D3.Selection;
        private colorPalette: IDataColorPalette;
        private searchInput: D3.Selection;
        private searchString: string;

        /** This is called once when the visual is initialially created */
        public init(options: VisualInitOptions): void {
            this.colorPalette = options.style.colorPalette.dataColors;
            // element is the element in which your visual will be hosted.
            this.hostContainer = options.element.css('overflow-x', 'hidden');
            this.searchInput = d3.select(options.element.get(0))
                .append("input")
                .classed("my-input", true)
                .attr("type", "text");
            this.table = d3.select(options.element.get(0))
                .append("table")
                .classed('powerbi-sample-table', true);

            this.tHead = this.table.append('thead').append('tr').append('th');
            this.tBody = this.table.append('tbody');
            
            var slicerVisual = this;
            this.searchInput.on("keyup", function () {
                var searchString = slicerVisual.searchString =  $(this).val().toLowerCase();
                slicerVisual.onSearchInput(slicerVisual, searchString);
            });
        }
        
        public onSearchInput(slicerVisual, searchString) {
            var tds = slicerVisual.hostContainer.find("tbody tr");
            tds.each(function() {
                var rowString = $(this).text().toLowerCase();
                if(!searchString || rowString.indexOf(searchString) > -1)
                    $(this).removeClass("hidden");
                else
                    $(this).addClass("hidden");
            })
        }

        /** Update is called for data updates, resizes & formatting changes */
        public update(options: VisualUpdateOptions) {
            var dataViews = options.dataViews;
            if (!dataViews) return;

            this.updateContainerViewports(options.viewport);

            var viewModel = MySlicer.converter(dataViews[0], this.colorPalette);
            var slicerTitle = this.tHead.text(viewModel.header);
            var slicerData = this.tBody;
            this.tBody.html("");
            for(var row in viewModel.values) {
                var rowString = viewModel.values[row] + "";
                rowString = rowString.toLowerCase();
                if(!this.searchString || rowString.indexOf(this.searchString) > -1)
                    slicerData.append('tr').append('td').text(viewModel.values[row]);
                else    
                    slicerData.append('tr').classed("hidden", true).append('td').text(viewModel.values[row]);
            }
        }

        private updateContainerViewports(viewport: IViewport) {
            var width = viewport.width;
            var height = viewport.height;

            this.tHead.classed('dynamic', width > 400);
            this.tBody.classed('dynamic', width > 400);

            this.hostContainer.css({
                'height': height,
                'width': width
            });
            this.table.attr('width', width);
        }
        
        private format(d: number){
            var prefix = d3.formatPrefix(d);
            return d3.round(prefix.scale(d),2) + ' ' +prefix.symbol
        }
    }
}

Hello,

 

I am looking for some help and Request you to please help me withan issue. I ran into a problem using Search Text Slicer. I have column Values as Co01, C0101, Co0102. Co0101, Co0102 are branches of the Co01. When I give input in the Search Bar with "Co01", total sale also includes Co0101 and Co0102. This is acts pretty much as a LIKE operator (Co01%). How Can i use the same visual or the same code to only take Co01 and not to include Co0101/Co0102.

 

TO be simple, search data to the exact search phrase and not to act as LIKE operator functionality

 

@trinathreddy Are you talking about Text Filter custom visual?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Hi V-Viig,

 

Thanks for the Help. Yes, this is about Text Filter. The typed input basically works as % wildcard functionality. request you to please the develoepr know that, there are some instances people search for exact phrase. 

 

Smart filer by OKVIZ (https://okviz.com/smart-filter/) works exactly the same  as I want. But Search Text filter works much faster than Smart Filter. This fucntionality would be a great relief to look at quick insights about how a particular account annual sales. 

 

To be Clear below is the Problem:

Current Funcationality: It takes what ever the input is and tries to match column values

 

Expected: If ABC and AB are the values, We need sales for only AB. It should not include ABC too. Please let me know if any questions. 

Thank you for the clarification.

This feature request will be reported to developer to consider in upcoming versions.

 

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Hello,

 

Any progress on this topic?

 

Thanks,

 

Frank

v-viig
Community Champion
Community Champion

Could you please clarify API version that you use?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

If someone didn't see, Microsoft already made custom visual with search capability. It is called Attribute Slicer. You can find it here:
https://app.powerbi.com/visuals/show/AttributeSlicer1652434005853

Helpful resources

Announcements
November Carousel

Fabric Community Update - November 2024

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

Live Sessions with Fabric DB

Be one of the first to start using Fabric Databases

Starting December 3, join live sessions with database experts and the Fabric product team to learn just how easy it is to get started.

Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Early Bird pricing ends December 9th.

Nov PBI Update Carousel

Power BI Monthly Update - November 2024

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