Bootstrap For Better Performance

ℹ️ This wiki has been deprecated
All our Client APIs documentation and references can be found in the new Power BI embedded analytics Client APIs documentation set. For the content of this article see Use bootstrap for better performance.

powerbi.bootstrap is a method introduced in version 2.9.0 to help developers embed Power BI entities faster and get better performance.

To embed a report using powerbi.embed parameters like: reportId, embedURL, accessToken, and more are needed.

powerbi.bootstrap allows you to start embedding before all required parameters are available. The bootstrap API prepares and initializes the iframe.

After the required parameters are received, powerbi.embed(element, config) should be called on the same HTML element.

Bootstrap API

/**
   * Given an HTML element and entityType, creates a new component instance, and bootstrap the iframe for embedding.
   *
   * @param {HTMLElement} an HTML Element where you need to embed. must be the same div element you will use in powerbi.embed.
   * @param {IBootstrapEmbedConfiguration} config: a bootstrap config.
   */
bootstrap(element: HTMLElement, config: IBootstrapEmbedConfiguration): embed.Embed;

The powerbi.bootstrap(element, config) method receives an element and a config, same as powerbi.embed(...).

Bootstrap embed configuration

interface IBootstrapEmbedConfiguration {
  type: string;
  hostname?: string;
  embedUrl?: string;
  settings?: ISettings;
}

Config parameters:

• type (required): the type of the entity you want to embed: 'report', 'dashboard', 'tile', 'qna', 'visual'.
• hostname: if you do not have embedURL yet, you may prodivde hostname. hostname is the domain name of embed URL.
• embedUrl: same embed URL you will provide later to powerbi.embed.
• settings: to embed the report in mobile layout or to provide a locale (language), include these parameters in the initial settings.

Note: It is recommended to provide embedUrl or hostname. For example, if the embed url is 'https://app.powerbi.com/reportEmbed' then hostname is 'https://app.powerbi.com/'.

Usage samples

To bootstrap for embedding a report:

powerbi.bootstrap(
        reportContainerDivElement,
        {
            type: 'report',
            embedUrl: "https://app.powerbi.com/reportEmbed?reportId=06e3ba63-47ea-4579-b010-fdb5484b325a&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6mLndpbmRvd3MubmV0In0="
        }
    );

To bootstrap for embedding a dashboard:

powerbi.bootstrap(
        reportContainerDivElement,
        {
            type: 'dashboard',
            embedUrl: "https://app.powerbi.com/dashboardEmbed?dashboardId=06e3ba63-47ea-4579-b010-fdb5484b325a&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6mLndpbmRvd3MubmV0In0="
        }
    );

To bootstrap for embedding a report with hostname only:

powerbi.bootstrap(
        reportContainerDivElement,
        {
            type: 'report',
            hostname: "https://app.powerbi.com"
        }
    );

To bootstrap for embedding a report with mobile layout:

powerbi.bootstrap(
        reportContainerDivElement,
        {
            type: 'report',
            hostname: "https://app.powerbi.com",
            settings: {
	            layoutType: models.LayoutType.MobilePortrait
            }
        }
    );

Note: Do not forget to call powerbi.embed after receiving the embed parameters.

Limitations

• Bootstrapped component type cannot be changed. That means, if you bootstrap a report, you can only embed reports in the same HTML element.

• Bootstrapped layout (desktop/mobile) cannot be changed.

• Bootstrapped locale (language) cannot be changed.

Note: To change any of the above powerbi.reset(element) should be called.