cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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

Accepted Solutions
Highlighted
Helper II
Helper II

Re: Custom visual text input (search)

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
Highlighted
Power Participant
Power Participant

Re: Custom visual text input (search)

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?

Highlighted
Helper II
Helper II

Re: Custom visual text input (search)

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
        }
    }
}
Highlighted
Helper II
Helper II

Re: Custom visual text input (search)

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

Highlighted
Advocate IV
Advocate IV

Re: Custom visual text input (search)

Hello,

 

Any progress on this topic?

 

Thanks,

 

Frank

Highlighted
Community Champion
Community Champion

Re: Custom visual text input (search)

Could you please clarify API version that you use?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Highlighted
Frequent Visitor

Re: Custom visual text input (search)

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

Highlighted
Community Champion
Community Champion

Re: Custom visual text input (search)

 

@trinathreddy Are you talking about Text Filter custom visual?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Frequent Visitor

Re: Custom visual text input (search)

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. 

Highlighted
Community Champion
Community Champion

Re: Custom visual text input (search)

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

Helpful resources

Announcements
Ignite

Microsoft Ignite

This will be a conference that you do not want to miss!

Get Ready for Power BI Dev Camp

Get Ready for Power BI Dev Camp

Don't miss the Power BI Dev Camp this week!

August Community Highlights

Check out a full recap of the month!

August 2020 CYST Challenge

Check out the winners of the recent 'Can You Solve These?' community challenge!

Experience what’s next for Power BI

Join us for an in-depth look at the new Power BI features and capabilities at the free Microsoft Business Applications Launch Event.