PowerBi embed dashboard using JavaScript

Question

I created a dashboard in PowerBi that I can load in a .cs page using the sample project but I like to try and use the JavaScript API. I tried using the project [GitHub Sample Project https://github.com/Microsoft/PowerBI-JavaScript] But I am getting error about the models is there a different function I would be using? I belive that I have all of the js library installed but the dashboard will not loaded in my html page

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.js"></script>
    <script src="scripts/step_interact.js"></script>
    <script src="scripts/step_embed.js"></script>
    <script src="scripts/step_authorize.js"></script>
    <script src="/bower_components/powerbi-client/dist/powerbi.js"></script>
    <script>

    $(document).ready(function () {

        // Get models. models contains enums that can be used.
        var models = window['powerbi-client'].models;

        var embedConfiguration = {
            type: 'dashboard',
            id: 'dashboardID',
            embedUrl: 'https://app.powerbi.com/reportEmbed',
            tokenType: models.TokenType.Aad,
            accessToken: 'TokenString'
        };

        var $dashboardContainer = $('#embedContainer');
        var dashboard = powerbi.embed($dashboardContainer.get(0), embedConfiguration);
    });

    </script>
    </head >
            <body>
                <div id="embedContainer"></div>         
</body >
</html >

Unable to get property 'models' of undefined or null reference — Jefferson
– Jefferson, Commented Sep 22, 2017 at 18:03
I guess that probably you got this code in the demo project, however, looking in the Power BI community this looks like a address problem, the demo code can be trying to access an internal Microsoft address, what I suggest you to try is to download the Git code and to use like the git page is saying and not like the demo is doing. Look this reference, a guy has the same issue that you: community.powerbi.com/t5/Developer/… — Renato Leite
– Renato Leite, Commented Sep 22, 2017 at 18:36

RBreuer · Accepted Answer · 2018-03-13 11:33:31Z

A few things:

From looking at powerbi.js file you're referencing to, try to change the following line: var models = window['powerbi-client'].models to var models = window.powerbi.models
Make sure to use the correct embedURL, you're using /reportEmbed when you should be using /dashboardEmbed.

eventually, your code should look something like this:

$(document).ready(function () {

        // Get models. models contains enums that can be used.
        var models = powerbi.models; // or window.powerbi.models

        var embedConfiguration = {
            type: 'dashboard',
            id: 'dashboardID',
            embedUrl: 'https://app.powerbi.com/dashboardEmbed',
            tokenType: models.TokenType.Aad,
            accessToken: 'TokenString'
        };

        var $dashboardContainer = $('#embedContainer');
        var dashboard = powerbi.embed($dashboardContainer.get(0), embedConfiguration);
    });

Igor S · Accepted Answer · 2019-05-22 12:01:14Z

2

You need to change the model initialization to this:

import * as pbi from 'powerbi-client'


const models = pbi.models

instead of using this example:

var models = window['powerbi-client'].models;

answered May 22, 2019 at 12:01

Igor S

9698 silver badges19 bronze badges

1 Comment

Saif Mohmd Over a year ago

This helped me. I trying to embed powerBi in a react project using this package : powerbi-client-react

Qiniso · Accepted Answer · 2020-03-26 10:19:20Z

1

You can try this code for displaying PowerBI dashboard using Javascript. All, you will need is valid access token and dashboardId.

<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script src="https://raw.githubusercontent.com/Microsoft/PowerBI-JavaScript/master/dist/powerbi.js"></script>
  </head>
  <body>
    <script type="text/javascript">
    window.onload = function () {
      var models = window['powerbi-client'].models;
      var embedConfiguration = {
        type: 'dashboard',
        accessToken: {{access token}},
        embedUrl: 'https://app.powerbi.com/dashboardEmbed?dashboardId={{dashboard id})'
      };  

      var $reportContainer = $('#dashboardContainer');
      var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
    }
    </script>
    <div id="dashboardContainer"></div>
  </body>
</html>

How to get dashboard id or report id using group id in jquery/javascript?

edited Mar 26, 2020 at 10:19

Qiniso

2,6291 gold badge25 silver badges31 bronze badges

answered Sep 26, 2017 at 20:13

Yash Mochi

1,03711 silver badges19 bronze badges

3 Comments

Jefferson Over a year ago

Hi @Yash -I tried your code but I am still getting an error about undefined models. raw.githubusercontent.com/Microsoft/PowerBI- JavaScript/master/dist/powerbi.js was blocked due to mime type mismatch dashboard.html SCRIPT5007: Unable to get property 'models' of undefined or null reference dashboard.html (13,9)

Stavros Koureas Over a year ago

When changing the config (f.e. from report to dataset or something else like dashboard) it throws an exception "Embedding on an existing element with a different type than the previous embed object is not supported." do you know how to clean the element before embed function applied?

Stavros Koureas Over a year ago

Ah just found the solution to switch the type using powerbi.reset(reportContainer);

double-beep · Accepted Answer · 2020-05-22 10:19:11Z

1

Ensure that you have registered your exact URL as Redirect URL in "Power BI App Registration tool". Below code will work just fine with proper redirect URL set.

var models = window['powerbi-client'].models

edited May 22, 2020 at 10:19

double-beep

5,66019 gold badges43 silver badges50 bronze badges

answered May 22, 2020 at 9:53

Mohan

111 bronze badge

Collectives™ on Stack Overflow

PowerBi embed dashboard using JavaScript

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related