power bi integration steps within clients portal home page

[ramesh_valluri]

Team,

we are trying to do integrattion of power bi with clients website. Client's website designed in Angular. Client needs all POwer bi Embed functionalities with in their home page. Client needs all power bi functionalities like create report, save and edit dashboard...etc. pls let us know if you have quicker solution.

-Ramesh

[Anonymous]

Hi @ramesh_valluri ,

Microsoft has introduced a Power BI Angular component specifically designed for integrating Power BI analytics into Angular applications.

Here is the steps:    

• First, import the Power BI Angular library into your app. You can find the component on NPM and GitHub.

• Next, use the provided Angular components to embed Power BI content. Here’s an example of how to embed a Power BI report using Angular:

<powerbi-report
  [embedConfig]="{
    type: 'report',
    id: '<Report Id>',
    embedUrl: '<Embed Url>',
    accessToken: '<Access Token>',
    tokenType: models.TokenType.Embed,
    settings: {
      panes: {
        filters: { expanded: false, visible: false }
      },
      background: models.BackgroundType.Transparent
    }
  }"
  [cssClassName]="'reportClass'"
  [phasedEmbedding]="false"
  [eventHandlers]="new Map([
    ['loaded', () => console.log('Report loaded')],
    ['rendered', () => console.log('Report rendered')],
    ['error', (event) => console.log(event.detail)]
  ])"
></powerbi-report>

• In this code snippet:
  • embedConfig defines the content you’re embedding and its settings.
  • eventHandlersallows you to handle events (e.g., report loaded, rendered, or error).
  • cssClassName lets you control the style of the embedded iframe using CSS.
  • phasedEmbedding improves the end-user experience by allowing phased report embedding

Below is tthe official link will help you:

How to embed Power BI content in an Angular app | Microsoft Learn

Best Regards,

Xianda Tang

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[ramesh_valluri]

Provided solution is good, will work on higher Angular version like13x. We have version compatibility issues, Our client is using Angular version 8.3x. Unfortunately this solutrion is not working on current Angular version. Could you please suggest me supported solution for Angular8.3x version.

[Anonymous · Accepted solution]

Hi @ramesh_valluri ,

We can use the Power BI JavaScript API

Here are the steps to achieve this:

    First, include the Power BI JavaScript API in your Angular project. You can do this by adding the following script tag to your HTML file: index.html

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.min.js"></script>

Write JavaScript

• Import the necessary modules:    

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
declare var powerbi: any; // Import the Power BI global variable

• Define your embed configuration:

const embedConfig = {
  type: 'report',
  id: '<Report Id>',
  embedUrl: '<Embed Url>',
  accessToken: '<Access Token>',
  settings: {
    panes: {
      filters: { expanded: false, visible: false }
    },
    background: models.BackgroundType.Transparent
  }
};

@ViewChild('powerBiReportContainer') reportContainer!: ElementRef;

ngAfterViewInit(): void {
  const report = powerbi.embed(this.reportContainer.nativeElement, embedConfig);

  // Event handling
  report.on('loaded', () => console.log('Report loaded'));
  report.on('rendered', () => console.log('Report rendered'));
  report.on('error', (event: any) => console.error(event.detail));
}

Best Regards,

Xianda Tang

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.