Embedding Power BI report in web application

daxesh · ‎01-23-2017

Hello

What i want to achive is , load a power bi report in my application on the basis of parameters selected in web application.

Here's the scenario.
1.There will a selection criteria on web application.
2.User may or may not select some criteraia in web application
3.Power report needs to be load based on selection criteria with those values selected in power bi report.

How to achive it?

Is there any provision to pass a paramerts in power BI url as query string.

Please guide

Thanks

Eric_Zhang · ‎01-24-2017

@daxesh wrote:

Hello

What i want to achive is , load a power bi report in my application on the basis of parameters selected in web application.

Here's the scenario.
1.There will a selection criteria on web application.
2.User may or may not select some criteraia in web application
3.Power report needs to be load based on selection criteria with those values selected in power bi report.

How to achive it?

Is there any provision to pass a paramerts in power BI url as query string.

Please guide

Thanks

You can do that with Power BI Javascript API by constructing the filter with the message from your application. You can also check this live demo custom filter pane.

<html>

 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js"></script>
 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>  
 
<script type="text/javascript">
window.onload = function () { 
  var  Filter = {
   $schema: "http://powerbi.com/product/schema#advanced",
  target: {
    table: "table Name",
    column: "column Name"
  },
  logicalOperator: "OR",
  conditions: [
    {
      operator: "Contains",
      value: "CN"
    },
    {
      operator: "Contains",
      value: "CO"
    }
  ]
}
 

var embedConfiguration = {
    type: 'report',
    accessToken: 'eyJ0eXAiOiJKV1QiL token Lo25EzUrNaq1I0Zi7dYCsq8iaw',
    id: '7169adxxxxxxx296b0e6c219',
    embedUrl: 'embedUrl'

}; 
 

var $reportContainer = $('#reportContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
 

report.on('loaded', event => {
  report.getFilters()
    .then(filters => {
      filters.push(Filter);
      return report.setFilters(filters);
    });
});

}
</script>

<div id="reportContainer" powerbi-settings-nav-content-pane-enabled="true"   powerbi-settings-filter-pane-enabled="true"></div>

</html>

belmore · ‎01-24-2017

This actually looks almost doable. Is this method using the Power BI embedded service (workspace, etc) or is this method describing how to embed a report from my PowerBI.com site?

If PowerBI.com site....where can I find my....I've set-up web app in azure....creating a Client ID....Where do I find the Access Token and Token? THanks for any advice....It would be great to accomplish this....

1) access token

2) token

3) id: (this is my report id)

The instructions for Embedding a report using PowerBI.com are below......what would the complete coded page look like?

what would the complete coded page look like? (example)

<html> Complete Embedded Code </html>

When using PowerBI.com the tokens issued are for a specific user who can view many different reports. This means you can add this as a global token reused for all embedded visuals as shown below.

It is not required, but you can assign a global access token on an instance of the Power BI service which will be used as a fallback if a local token isn't provided.

<script>
    powerbi.accessToken = '{{AccessToken}}';
</script>

Provide embed configuration using attributes (notice that the access token does not need to be supplied because it will fall back to using the global token):

<div
    powerbi-type="report"
    powerbi-report-id="5dac7a4a-4452-46b3-99f6-a25915e0fe55"
    powerbi-embed-url="https://app.powerbi.com/reportEmbed"
></div>

Embed using javascript&colon;

var embedConfiguration = {
    type: 'report',
    id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
    embedUrl: 'https://app.powerbi.com/reportEmbed'
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);

Embedding Power BI report in web application

Helpful resources

Microsoft Fabric Learn Together

Power BI Monthly Update - April 2024

Fabric Community Update - April 2024