Forum Discussion

pedro3's avatar
pedro3
New Member
4 years ago

Embed Power BI on React App with filters coming from inputs from the react application

Hey guys. I have a question about embedding a power bi on react application. I was able tosuccessfully embed some reports on my react application but I was wondering if I could have custom filters (like specific dates or data source) on my application and send them to powerBI so they can update the reports based on the filters I select on my react application. Is this possible? How would I go about doing this? Observation (I embedded the reports using powerbi-client-react)

Interesting Links
Need Help
Tips and Tricks
Tutorial Requests

1 Reply

  • Anonymous's avatar
    Anonymous
    Not applicable
    4 years ago

    Hi pedro3 ,

    You can refer the following links to get it:

    Embed PowerBI reports in React application

    const report = powerbi.embed(reportContainer, embedConfiguration);
report.off("loaded");
report.on("loaded", function () {
const existingFilters = report.getFilters()
.then(function(response) {
const newFiltersArr = [...response, countryFilter];
report.setFilters(newFiltersArr);
});
});

    How To Embed Microsoft Power BI Charts Into Your React Application

    Embedded Report add filter to EmbedConfig

        var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.Read,
        filters: [filter1,filter2], //filter array here
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false
           
        }
    };

    Best Regards