Embed Configuration Details

The embed configuration is an object that describes what and how to embed. Its full signature is:

export interface IEmbedConfiguration {
    type?: string;
    id?: string;
    uniqueId?: string;
    embedUrl?: string;
    accessToken?: string;
    settings?: models.ISettings;
    pageName?: string;
    filters?: (models.IBasicFilter | models.IAdvancedFilter)[];
}

This object is used when calling powerbi.embed(element, embedConfiguration). The type is needed to know what type of embed to instantiate and the embedUrl is needed to set the source of the iframe. It is a superset of the load configuration properties and re-used as the load configuration later in the process.

export interface ILoadConfiguration {
    accessToken: string;
    id: string;
    settings?: ISettings;
    pageName?: string;
    filters?: (IBasicFilter | IAdvancedFilter)[];
}

When embedding, the minimum requirements are to have a type, embedUrl, accessToken and id. These can be specified in the embed configuration object as shown above or as attributes on the element which is why these properties are optional here.

There are additional properties settings, pageName, and filters.

Settings

All settings can be provided as attributes prefixed with powerbi-settings- on the containing HTML element.

1. Filter Pane

   FilterPane is enabled/visible by default but can be disabled/hidden by adding the attribute on the element or specifying the setting in the embed configuration:

   <div ... powerbi-settings-filter-pane-enabled="false"></div>

   var embedConfig = {
   	...
   	settings: {
   		filterPaneEnabled: false
   	}
   };

2. Page Navigation

   Page navigation is enabled/visible by default but can be disabled/hidden by adding the attribute:

   <div ... powerbi-settings-nav-content-pane-enabled="false"></div>

   	var embedConfig = {
   	...
   	settings: {
   		navContentPaneEnabled: false
   	}
   };

Options

1. Default Page By default the report will load the first page; however, this can be overwritten by specifying a specific page name.

   var embedConfig = {
     ...
     pageName: 'ReportSection3'
   };

2. Pre-applied Filters By default the report will load with the filters that are saved to the report; however, you can programmatically apply additional filters by setting the filters property.

   var embedConfig = {
     ...
     filters: [...]
   };