Skip to content

Commit 3153b72

Browse files
author
Or Shemesh
committed
Merged PR 320270: Add support of registering external components to SDK
Add support of registering external components to SDK How does it work? 1. User creates a new embed component extending `Embed` in his project 2. User implements the necessary code in FE to support hosting of the new component and handling events 3. Needed code to embed the new component: `powerbi.register(componentType, embedComponentFactory, routerEventUrls);` `powerbi.embed(embedContainer, config);` powerbi.register: - `componentType`: string representing the component type in embed configuration interface - `embedComponentFactory`: function that returns a new instance of the embed component. - `routerEventUrls`: list of urls to register, must use uniqueId and eventName as keys. something like that: `/componentName/:uniqueId/events/:eventName` Example of calling powerbi.register for metric-picker component: ``` this.register( 'metric_picker', (service, element, config, phasedRender, isBootstrap) => new MetricPicker(service, element, config, phasedRender, isBootstrap), ['/metricPicker/:uniqueId/events/:eventName'] ); ```
1 parent 9e65b27 commit 3153b72

File tree

5 files changed

+577
-21
lines changed

5 files changed

+577
-21
lines changed

dist/powerbi-client.d.ts

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2137,6 +2137,10 @@ declare module "service" {
21372137
hpm: HttpPostMessage;
21382138
}
21392139
export type IComponentEmbedConfiguration = IReportEmbedConfiguration | IDashboardEmbedConfiguration | ITileEmbedConfiguration | IVisualEmbedConfiguration | IQnaEmbedConfiguration;
2140+
/**
2141+
* @hidden
2142+
*/
2143+
export type EmbedComponentFactory = (service: Service, element: HTMLElement, config: IEmbedConfigurationBase, phasedRender?: boolean, isBootstrap?: boolean) => Embed;
21402144
/**
21412145
* The Power BI Service embed component, which is the entry point to embed all other Power BI components into your application
21422146
*
@@ -2162,7 +2166,7 @@ declare module "service" {
21622166
accessToken: string;
21632167
/** The Configuration object for the service*/
21642168
private config;
2165-
/** A list of Dashboard, Report and Tile components that have been embedded using this service instance. */
2169+
/** A list of Power BI components that have been embedded using this service instance. */
21662170
private embeds;
21672171
/** TODO: Look for way to make hpm private without sacrificing ease of maintenance. This should be private but in embed needs to call methods.
21682172
*
@@ -2176,6 +2180,10 @@ declare module "service" {
21762180
wpmp: WindowPostMessageProxy;
21772181
router: Router;
21782182
private uniqueSessionId;
2183+
/**
2184+
* @hidden
2185+
*/
2186+
private registeredComponents;
21792187
/**
21802188
* Creates an instance of a Power BI Service.
21812189
*
@@ -2257,10 +2265,25 @@ declare module "service" {
22572265
* @private
22582266
* @param {IPowerBiElement} element
22592267
* @param {IEmbedConfigurationBase} config
2268+
* @param {boolean} phasedRender
2269+
* @param {boolean} isBootstrap
22602270
* @returns {Embed}
22612271
* @hidden
22622272
*/
22632273
private embedNew;
2274+
/**
2275+
* Given component type, creates embed component instance
2276+
*
2277+
* @private
2278+
* @param {string} componentType
2279+
* @param {HTMLElement} element
2280+
* @param {IEmbedConfigurationBase} config
2281+
* @param {boolean} phasedRender
2282+
* @param {boolean} isBootstrap
2283+
* @returns {Embed}
2284+
* @hidden
2285+
*/
2286+
private createEmbedComponent;
22642287
/**
22652288
* Given an element that already contains an embed component, load with a new configuration.
22662289
*
@@ -2345,6 +2368,15 @@ declare module "service" {
23452368
* @returns {void}
23462369
*/
23472370
setSdkInfo(type: string, version: string): void;
2371+
/**
2372+
* API for registering external components
2373+
*
2374+
* @hidden
2375+
* @param {string} componentType
2376+
* @param {EmbedComponentFactory} embedComponentFactory
2377+
* @param {string[]} routerEventUrls
2378+
*/
2379+
register(componentType: string, embedComponentFactory: EmbedComponentFactory, routerEventUrls: string[]): void;
23482380
}
23492381
}
23502382
declare module "bookmarksManager" {

0 commit comments

Comments
 (0)