Add getUnique id function on embed which gets uniqueId from config, then attribute, or generates unique string. This allows developers to find embed instance using service by known value with contextual meaning unrelated to report which is dynamic.

Matt Mazzola · Matt Mazzola · commit 54bebb11dfa5 · 2016-06-27T14:09:48.000-07:00
diff --git a/src/embed.ts b/src/embed.ts
@@ -24,6 +24,7 @@ declare global {
 export interface IEmbedConfiguration {
     type?: string;
     id?: string;
+    uniqueId?: string;
     embedUrl?: string;
     accessToken?: string;
     settings?: models.ISettings;
@@ -43,6 +44,7 @@ export interface IInternalEventHandler<T> {
 export abstract class Embed {
     public static accessTokenAttribute = 'powerbi-access-token';
     public static embedUrlAttribute = 'powerbi-embed-url';
+    public static nameAttribute = 'powerbi-name';
     public static typeAttribute = 'powerbi-type';
     public static type: string;
 
@@ -72,7 +74,7 @@ export abstract class Embed {
         this.config.accessToken = this.getAccessToken(service.accessToken);
         this.config.embedUrl = this.getEmbedUrl();
         this.config.id = this.getId();
-        this.config.uniqueId = utils.createRandomString();
+        this.config.uniqueId = this.getUniqueId();
 
         const iframeHtml = `<iframe style="width:100%;height:100%;" src="${this.config.embedUrl}" scrolling="no" allowfullscreen="true"></iframe>`;
 
@@ -188,6 +190,14 @@ export abstract class Embed {
         return embedUrl;
     }
 
+    /**
+     * Get unique id from first available location: options, attribute.
+     * If neither is provided generate unique string.
+     */
+    private getUniqueId(): string {
+        return this.config.uniqueId || this.element.getAttribute(Embed.nameAttribute) || utils.createRandomString();
+    }
+
     /**
      * Get report id from first available location: options, attribute.
      */
diff --git a/src/service.ts b/src/service.ts
@@ -219,6 +219,13 @@ export class Service {
         return powerBiElement.powerBiEmbed;
     }
 
+    /**
+     * Find embed instance by name / unique id provided.
+     */
+    find(uniqueId: string): Report | Tile {
+        return utils.find(x => x.config.uniqueId === uniqueId, this.embeds);
+    }
+
     /**
      * Given an html element which has component embedded within it, remove the component from list of embeds, remove association with component, and remove the iframe.
      */
diff --git a/test/test.spec.ts b/test/test.spec.ts
@@ -171,6 +171,48 @@ describe('service', function () {
       expect(attemptToEmbed).toThrowError();
     });
 
+    it('should get uqiqueId from config first', function () {
+      // Arrange
+      const testUniqueId = 'fakeUniqueId';
+      const embedUrl = `https://embedded.powerbi.com/appTokenReportEmbed`;
+      const $reportContainer = $(`<div powerbi-embed-url="${embedUrl}" powerbi-type="report" powerbi-report-id="abc123" powerbi-name="differentUniqueId"></div>`)
+        .appendTo('#powerbi-fixture');
+
+      // Act
+      const report = powerbi.embed($reportContainer[0], { uniqueId: testUniqueId });
+
+      // Assert
+      expect(report.config.uniqueId).toEqual(testUniqueId);
+    });
+
+    it('should get uqiqueId from name attribute if uniqueId is not specified in config', function () {
+      // Arrange
+      const testUniqueId = 'fakeUniqueId';
+      const embedUrl = `https://embedded.powerbi.com/appTokenReportEmbed`;
+      const $reportContainer = $(`<div powerbi-embed-url="${embedUrl}" powerbi-type="report" powerbi-report-id="abc123" powerbi-name="${testUniqueId}"></div>`)
+        .appendTo('#powerbi-fixture');
+
+      // Act
+      const report = powerbi.embed($reportContainer[0]);
+
+      // Assert
+      expect(report.config.uniqueId).toEqual(testUniqueId);
+    });
+
+    it('should generate uqiqueId if uniqueId is not specified in config or attribute', function () {
+      // Arrange
+      const testUniqueId = 'fakeUniqueId';
+      const embedUrl = `https://embedded.powerbi.com/appTokenReportEmbed`;
+      const $reportContainer = $(`<div powerbi-embed-url="${embedUrl}" powerbi-type="report" powerbi-report-id="abc123"></div>`)
+        .appendTo('#powerbi-fixture');
+
+      // Act
+      const report = powerbi.embed($reportContainer[0]);
+
+      // Assert
+      expect(report.config.uniqueId).toEqual(jasmine.any(String));
+    });
+
     it('if component is already embedded in element re-use the existing component by calling load with the new information', function () {
       // Arrange
       const $element = $('<div powerbi-embed-url="https://app.powerbi.com/reportEmbed?reportId=ABC123" powerbi-type="report"></div>')
@@ -388,6 +430,29 @@ describe('service', function () {
       // Assert
       expect($element.html()).toEqual('');
     });
+
+    it('removes the powerbi instance from the list of embeds', function () {
+      // Arrange
+      const $element = $('<div></div>');
+      const testEmbedConfig = {
+        type: 'report',
+        embedUrl: 'fakeUrl',
+        id: 'fakeReportId',
+        accessToken: 'fakeToken',
+        uniqueId: 'fakeUniqeId'
+      };
+      powerbi.embed($element.get(0), testEmbedConfig);
+
+      // Act
+      const report = powerbi.find(testEmbedConfig.uniqueId);
+      expect(report).toBeDefined();
+
+      powerbi.reset($element.get(0));
+
+      // Assert
+      const report2 = powerbi.find(testEmbedConfig.uniqueId);
+      expect(report2).toBeUndefined();
+    });
   });
 });
 
