CODEWITHSUNDEEP
angularjsmodel-view-controllerreportpowerbi
rajwinder
rajwinder

Reputation: 31

Integration of power bi reports with angular js in mvc application

How we can integrate power BI report with angular JS in mvc existing application. AS of now I am facing issue to display power bi report on angular view.

Upvotes: 3

Views: 4190

Answers (2)

gpanagakis
gpanagakis

Reputation: 649

Check out http://plnkr.co/edit/tQc1DF?p=info for a basic example of embedding a powerbi report and doing page navigation, using angular 1.4.x

var app = angular.module('plunker', [
  'powerbi'
]);

app.controller('MainCtrl', function($scope, $http, models, PowerBiService) {

  var staticReportUrl = 'https://powerbiembedapi.azurewebsites.net/api/reports/c52af8ab-0468-4165-92af-dc39858d66ad';


  var _filterPaneEnabled = false;
  var _navContentPaneEnabled = false;
  var _reportHandle = null;

  $scope.tree = [];



  $http.get(staticReportUrl)
    .then(function(responce) {
      //create the config for the directive
      var config = angular.extend(responce.data, {
        settings: {
          filterPaneEnabled: _filterPaneEnabled,
          navContentPaneEnabled: _navContentPaneEnabled
        }
      });
      $scope.embedConfiguration = config;
      //create the nav-tree
      $scope.tree.push(new models.Node(responce.data));


    }, function(reason) {

    });

  $scope.onEmbedded = function(report) {
    // get a reference to report object
    _reportHandle = report;
    //attach to events
    report.on('loaded', OnloadedReport);
    report.on('error', OnErrorReport);
  };

  function OnloadedReport(c) {
    //get available pages to attach to navigation tree
    _reportHandle.getPages()
      .then(function(pages) {
        pages.forEach(function(page) {
          $scope.$apply(function() {
            //populate the nav-tree
            $scope.tree[0].pages.push(new models.Leaf(page));
          });
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  function OnErrorReport(e) {
    console.log(e);
  }


  $scope.toggleFilterPaneClicked = function() {
    _filterPaneEnabled = !_filterPaneEnabled;
    _reportHandle.updateSettings({
      filterPaneEnabled: _filterPaneEnabled
    });
  };

  $scope.toggleNavContentPaneClicked = function() {
    _navContentPaneEnabled = !_navContentPaneEnabled;
    _reportHandle.updateSettings({
      navContentPaneEnabled: _navContentPaneEnabled
    });
  };

  $scope.setPage = function(page) {
    _reportHandle.setPage(page.name);
  };

  $scope.fullScreen = function() {
    _reportHandle.fullscreen();

  };


});


app.factory('models', function() {
  var Node = function(dataset) {
    var self = this;

    self.id = dataset.id;
    self.name = dataset.name;
    self.type = dataset.type;
    self.accessToken = dataset.accessToken;
    self.embedUrl = dataset.embedUrl;
    self.webUrl = dataset.webUrl;
    self.pages = [];

    return self;
  };

  var Leaf = function(page) {
    var self = this;

    self.name = page.name;
    self.displayName = page.displayName;

    return self;
  };

  return {
    Node: Node,
    Leaf: Leaf
  };
})

[1]https://microsoft.github.io/PowerBI-JavaScript/demo/static.html

Upvotes: 0

Bjoern
Bjoern

Reputation: 458

The way to go is: Use PowerBI Embedded (https://azure.microsoft.com/en-us/services/power-bi-embedded/)

I'm not an angular expert, but there is a Github repo aimed at this: https://github.com/Microsoft/PowerBI-Angular

Upvotes: 3

Related Questions