Merged PR 3734: moving tileEmbed to communicate with iframe like all embed types

moving tileEmbed to communicate with iframe like all embed types

Author: somriar

demo/v2-demo/scripts/codesamples.js

@@ -400,7 +400,6 @@ function _Embed_TileEmbed() {
     // Tile.on will add an event handler which prints to Log window.
     tile.on("tileLoaded", function(event) {
         Log.logText("Tile loaded event");
-        Log.log(event.detail);
     });
 
     // Tile.off removes a given event handler if it exists.

dist/powerbi-client.d.ts

@@ -1,4 +1,4 @@
-/*! powerbi-client v2.4.5 | (c) 2016 Microsoft Corporation MIT */
+/*! powerbi-client v2.4.6 | (c) 2016 Microsoft Corporation MIT */
 declare module "config" {
     const config: {
         version: string;
@@ -940,13 +940,6 @@ declare module "tile" {
          * @returns {void}
          */
         populateConfig(baseConfig: embed.IEmbedConfigurationBase): void;
-        /**
-         * Sends load configuration data for tile
-         *
-         * @param {models.ILoadConfiguration} config
-         * @returns {Promise<void>}
-         */
-        load(baseConfig: embed.IEmbedConfigurationBase): Promise<void>;
         /**
          * Adds the ability to get tileId from url.
          * By extracting the ID we can ensure that the ID is always explicitly provided as part of the load configuration.
@@ -956,12 +949,6 @@ declare module "tile" {
          * @returns {string}
          */
         static findIdFromEmbedUrl(url: string): string;
-        /**
-         * Adds the ability to get events from iframe
-         *
-         * @param event: MessageEvent
-         */
-        private receiveMessage(event);
     }
 }
 declare module "qna" {

dist/powerbi.js

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-client",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "description": "JavaScript library for embedding Power BI into your apps. Provides service which makes it easy to embed different types of components and an object model which allows easy interaction with these components such as changing pages, applying filters, and responding to data selection.",
   "main": "dist/powerbi.js",
   "typings": "dist/powerbi-client.d.ts",

dist/powerbi.min.js

@@ -1,5 +1,5 @@
 const config = {
-  version: '2.4.5',
+  version: '2.4.6',
   type: 'js'
 };
 

package.json

@@ -167,6 +167,17 @@ export class Service implements IService {
       this.handleEvent(event);
     });
 
+    this.router.post(`/tile/:uniqueId/events/:eventName`, (req, res) => {
+      const event: IEvent<any> = {
+        type: 'tile',
+        id: req.params.uniqueId,
+        name: req.params.eventName,
+        value: req.body
+      };
+
+      this.handleEvent(event);
+    });
+
     /**
      * Adds handler for Q&A events.
      */

src/config.ts

@@ -17,13 +17,9 @@ export class Tile extends embed.Embed {
 
     constructor(service: service.Service, element: HTMLElement, baseConfig: embed.IEmbedConfigurationBase, phasedRender?: boolean) {
       let config = <embed.IEmbedConfiguration>baseConfig;
-      config.embedUrl = utils.addParamToUrl(config.embedUrl, 'dashboardId', config.dashboardId);
-      config.embedUrl = utils.addParamToUrl(config.embedUrl, 'tileId', config.id);
-
       super(service, element, config, /* iframe */ undefined, phasedRender);
+      this.loadPath = "/tile/load";
       Array.prototype.push.apply(this.allowedEvents, Tile.allowedEvents);
-
-      window.addEventListener("message", this.receiveMessage.bind(this), false);
     }
 
     /**
@@ -69,40 +65,6 @@ export class Tile extends embed.Embed {
       this.config = config;
     }
 
-    /**
-     * Sends load configuration data for tile
-     * 
-     * @param {models.ILoadConfiguration} config
-     * @returns {Promise<void>}
-     */
-    load(baseConfig: embed.IEmbedConfigurationBase): Promise<void> {
-        let config = <embed.IEmbedConfiguration>baseConfig;
-        const errors = this.validate(config);
-        if (errors) {
-            throw errors;
-        }
-
-        let height = config.height ? config.height : this.iframe.offsetHeight;
-        let width = config.width ? config.width : this.iframe.offsetWidth;
-        let action = config.action ? config.action : 'loadTile';
-
-        let tileConfig = {
-            action: action,
-            height: height,
-            width: width,
-            accessToken: config.accessToken,
-            tokenType: config.tokenType,
-        }
-
-        this.iframe.contentWindow.postMessage(JSON.stringify(tileConfig), "*")
-
-        // In order to use this function the same way we use it in embed
-        // we need to keep the return type the same as 'load' in embed 
-        return new Promise<void>( () => {
-            return;
-        });
-    }
-
     /**
      * Adds the ability to get tileId from url.
      * By extracting the ID we can ensure that the ID is always explicitly provided as part of the load configuration.
@@ -122,35 +84,4 @@ export class Tile extends embed.Embed {
 
         return tileId;
     }
-
-    /**
-     * Adds the ability to get events from iframe
-     * 
-     * @param event: MessageEvent 
-     */
-    private receiveMessage(event: MessageEvent): void {
-        if (event.data) {
-            try {
-                let messageData = JSON.parse(event.data);
-                let value = {
-                    navigationUrl: messageData.navigationUrl,
-                    errors: messageData.error,
-                    openReport: messageData.openReport
-                };
-
-                const tileEvent: service.IEvent<any> = {
-                    type: 'tile',
-                    id: this.config.uniqueId,
-                    name: messageData.event,
-                    value: value
-                };
-
-                this.service.handleTileEvents(tileEvent);
-            }
-            catch (e) {
-                console.log("invalid message data");
-                return;
-            }
-        } 
-    }
 }