How To Add Filter Button In Power Bi

Adding a filter button in Power BI involves creating a custom visual using the Power BI SDK. Here are the steps to achieve this:

1. Create a new Power BI visual project in Visual Studio.
2. Design the UI of the visual by adding necessary elements like buttons, dropdowns, etc.
3. Implement the necessary logic to apply filters based on user interactions.
4. Build and package the visual.
5. Import the visual into your Power BI report.

Let’s illustrate this with a simple example:

Assuming you want to add a filter button to filter data based on a specific category, follow these steps:

1. Create a new Power BI visual project in Visual Studio.
2. Add a button element to the visual’s HTML file:

            <button id="filterButton" onclick="applyFilter()">Apply Filter</button>
        

3. In the TypeScript file, write the logic to apply the filter:

            function applyFilter() {
                const category = "CategoryName"; // Replace with your actual category column name
                const selectedValue = "SomeValue"; // Replace with the value you want to filter by
                
                const filter = {
                    $schema: "http://powerbi.com/product/schema#advanced",
                    target: {
                        table: "TableName", // Replace with your actual table name
                        column: category
                    },
                    operator: "In",
                    values: [selectedValue]
                };
                
                const filterJSON = JSON.stringify(filter);
                
                const filterMessage: powerbi.FilterMessage = {
                    payload: {
                        filter: filterJSON
                    }
                };
                
                this.hostServices.applyJsonFilter(filterMessage); // Apply the filter to the report
            }
        

4. Build and package the visual.
5. Import the visual into your Power BI report and add the necessary data fields.
6. Place the custom visual on the report canvas.
7. Click on the filter button to apply the desired filter.

This is a basic example that demonstrates the concept. You can customize the visual and the filter logic according to your specific requirements.