Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

powerbi-client-angular

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

powerbi-client-angular

Angular wrapper for powerbi-client library

  • 2.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
30K
increased by6.07%
Maintainers
1
Weekly downloads
 
Created
Source

powerbi-client-angular

Power BI Angular component. This library lets you embed Power BI reports, dashboards, tiles, report visuals, Q&As and paginated reports in your Angular application.

Quick Start

Import

Import the 'PowerBIEmbedModule' inside your target module:

import { PowerBIEmbedModule } from 'powerbi-client-angular';

@NgModule({
  imports: [
    ...
    ...
    PowerBIEmbedModule
  ],
  exports: ...,
  declarations: ...
})

Embed a Power BI report

<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>

How to bootstrap a PowerBI report:

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

Note: To embed the report after bootstrapping, update the embedConfig (with at least accessToken and embedUrl).

Embedding other Power BI artifacts

The library is offering the following components that can be used to embed various Power BI artifacts.

ComponentSelector to use for embedding
PowerBIReportEmbedComponent<powerbi-report>
PowerBIDashboardEmbedComponent<powerbi-dashboard>
PowerBITileEmbedComponent<powerbi-tile>
PowerBIVisualEmbedComponent<powerbi-visual>
PowerBIQnaEmbedComponent<powerbi-qna>
PowerBIPaginatedReportEmbedComponent<powerbi-paginated-report>

You can embed other artifacts such as:

<powerbi-dashboard 
    [embedConfig] = "<IDashboardEmbedConfiguration>"
    [cssClassName] = "<className>"
    [eventHandlers] = "<Map of String and eventHandler>"
>
</powerbi-dashboard>

Demo

This demo includes an Angular application that embeds a sample report using the PowerBIReportEmbed component.
It demonstrates the complete flow from bootstrapping the report, to embedding and updating the embedded report.
It also demonstrates using the powerbi report authoring library, by enabling the user to delete a visual from a report using the "Delete Visual" button.
It also sets a 'DataSelected' event.


To run the demo on localhost, run the following command:
npm run demo

Redirect to http://localhost:4200/ to view in the browser.

Usage

Use caseDetails
Embed Power BITo embed your powerbi artifact, pass the component with at least type, embedUrl and accessToken in embedConfig property.
Apply style classPass the name(s) of style classes to be applied to the embed container div to the cssClassName property.
Set event handlersPass a map object of event name (string) and event handler (function) to the eventHandlers prop.
Key: Event name
Value: Event handler method to be triggered
Event handler method takes two optional parameters:
First parameter: Event
Second parameter: Reference to the embedded entity

List of supported events is given here: Additional events
Reset event handlersTo reset event handler for an event, set the event handler's value as null in the eventHandlers map of properties.
Bootstrap Power BITo bootstrap your powerbi entity, pass the property embedConfig to the component without accessToken
Note: embedConfig should at least contain type of the powerbi entity being embedded.
Available types: "report", "dashboard", "tile", "visual" and "qna".
Refer to How to bootstrap a report section in Quick Start.

Note: A paginated report cannot be bootstrapped.
Using with PowerBI Report Authoring1. Install powerbi-report-authoring as an npm dependency.
2. Use the report authoring APIs using the embedded report's instance.
Phased embedding (Report type only)Set the phasedEmbedding property value to true
Refer to the Phased embedding article.

Note: Supported browsers are Edge, Chrome, and Firefox.

Properties accepted by Components

PropertyDescriptionSupported by
embedConfigConfiguration for embedding the PowerBI entity (required)All
phasedEmbeddingPhased embedding flag (optional)Report
eventHandlersMap of pair of event name and its handler method to be triggered on the event (optional)Report, Dashboard, Tile, Visual, Qna
cssClassNameCSS class to be set on the embedding container (optional)All
serviceProvide the instance of PowerBI service (optional)All

Supported Events

Events supported by various Power BI entities:

EntityEvent
Report"buttonClicked", "commandTriggered", "dataHyperlinkClicked", "dataSelected", "loaded", "pageChanged", "rendered", "saveAsTriggered", "saved", "selectionChanged", "visualClicked", "visualRendered"
Dashboard"loaded", "tileClicked"
Tile"tileLoaded", "tileClicked"
QnA"visualRendered"

Event Handler to be used with Map

type EventHandler = (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null;

Using supported SDK methods for Power BI artifacts

Import

Import the 'PowerBIReportEmbedComponent' inside your targeted component file:

import { PowerBIReportEmbedComponent } from 'powerbi-client-angular';

Initialize inside the Component

@ViewChild(PowerBIReportEmbedComponent) reportObj!: PowerBIReportEmbedComponent;

Use

You can use reportObj to call supported SDK APIs.

There are two ways in which reportObj can be used:

  • Expose the Report object globally.

    Steps:

    1. Create one class variable, for example, report.
    2. Implement the AfterViewInit hook for the component class.

     class AppComponent implements AfterViewInit { ... }
    
    1. Define the ngAfterViewInit method as follows:

     ngAfterViewInit(): void {
         this.report = this.reportObj.getReport();
     }
    
    1. this.report points to the Report object from the library and can be used to call SDK methods such as, getVisuals, getBookmarks etc.

    async getReportPages(): Page[] {
        // this.report is a class variable, initialized in step 3
        const pages = await this.report.getPages();
        console.log(pages);
    }
    
  • Use reportObj inside a class method.

    This approach will not expose the Report object globally, instead reportObj would be available locally in the function.

    Example:

    async getReportPages(): Page[] {
        const report = this.reportObj.getReport();
        const visuals = await report.getPages();
        console.log(visuals);
    }
    

Note

The library supports Angular applications having version >= 11.

Dependencies

powerbi-client (https://www.npmjs.com/package/powerbi-client)

Peer Dependencies

@angular/common (https://www.npmjs.com/package/@angular/common)

@angular/core (https://www.npmjs.com/package/@angular/core)

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repositories using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments

Keywords

FAQs

Package last updated on 25 Jul 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc