Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
ramesh_valluri
Regular Visitor

power bi integration steps within clients portal home page

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

1 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));
}

vxiandatmsft_0-1707289670719.png

vxiandatmsft_1-1707289709810.png

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.

 

View solution in original post

3 REPLIES 3
v-xiandat-msft
Community Support
Community Support

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.

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.

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));
}

vxiandatmsft_0-1707289670719.png

vxiandatmsft_1-1707289709810.png

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.

 

Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.

July Newsletter

Fabric Community Update - July 2024

Find out what's new and trending in the Fabric Community.