PowerBi-Client NPM v2.22.2 -- ReferenceError: window is not defined (for Wix Integration)

Discussion Ask a question
,
1

I am trying to embed a Power Bi report in Wix with the following conditions:

  1. Embed for Organization (User owns Data)
  2. Able to get Azure Token (TokenType.Aad)
  3. Able to get Report when calling Power Bi REST API (response 200)

In my Wix code, when I added :

import * as powerbi from 'powerbi-client';

image

I get an error of ReferenceError: window is not defined. Since Wix velo code is a subset version of JavaScript, I gather that wix does not have “window”, which is required in PowerBi-Client NPM v2.22.2.

My question is:

  1. Is there any other way to import PowerBi-Client NPM, but will not require window?
  2. Or, is there any otherway I can other way I call powerbi.embed(reportContainer, config)?

image

I also understand that there is a react version to PowerBi-Client. I was told that (i) react version of PowerBi-client does not use “window”, and (ii) wix can write react to some degree.

However, as of this moment, this NPM (powerbi-client-react 1.4.0) is not yet available on Wix platform. Thus, unable to try it.
https://www.npmjs.com/package/powerbi-client-react

2

Nothing that accesses window or document can be run directly on a Wix site.

The way to do it here is placing your code in a Custom Element.

3

Thanks for the hint. I am trying to implement Wix Custom Element as suggested.

In the let report = powerbi.embed(reportContainer, config); It requires the name of the reportContainer. In wix terms, it would normally be $w(‘#reportContainer’)…

How do i pass this value into Wix Custom Element? Or can i refer to it directly?

I tried using code below to refer to it.
const reportContainer = document.getElementById('reportContainer');
console.log(reportContainer === null);

Is this correct? Console.log return null, it is normal?

Thanks for your help.

4

Can you share more of the snippet? Custom Elements are iframes and won’t have access to anything on the page outside of the iframe.

It should be possible to set the id of the report container in the code of the custom element.

5

  1. I found a set of html code sample for Power Bi Embed – Client Side App Code.
    https://torpedo.pt/power-bi-embedded/

  2. I have plugged it into the Wix HTML Embed Component (not Custom Element), and the codes actually worked. I was able to get the Power Bi report iframe using codes (not from secure URL link).

  3. I then used the method below (.postMessage / .onMessage) to pass the variables into the HTML iFrame
    https://www.youtube.com/watch?v=Nt8nw25hEr8&t=454s

  4. The resulting codes is as follow:

Codes in the Wix HTML Embed Component

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.jsdelivr.net/npm/powerbi-client@2.7.0/dist/powerbi.min.js"></script>
 <style>
   #reportContainer {
     width: 100%;
     height: 100%;
   }

  //This setting eliminates the default margin spacing and border color  
   iframe {
     margin: 0;
     padding: 0;
     border: none;
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
     width: 100%;
     height: 100%;
   }
 </style>
</head>
<body>
 <div id="reportContainer"></div>
 <script>

   window.onmessage = function (event) {
     if (event.data) {
       var token = event.data.refA;
       if (!token) return;
       setupWidget(token);
     }
   }

  function setupWidget(token) {
   var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=REPORT_ID";
   var embedContainer = document.getElementById("reportContainer");
   var report = powerbi.embed(embedContainer, {
     type: "report",
     accessToken: token,  //defined up top and passed into the function 
     embedUrl: embedUrl
   });
}
 </script>
</body>
</html>

Page Codes in the Velo Editor

$w.onReady( async function () {
    embedPbi();
});

async function embedPbi() {
    
    //token generated by calling Azure (User owns Data)
    //codes omitted herein -- a bit complex to include here       
    let partA = token;

    let sum = { refA: partA};
    
    //pass variables into the html component
    $w('#PBiF').postMessage(sum);      

}
  1. So i have implemented in embed HTML component. Back to the Custom Element question: How to refer to the reportContainer if using Custom Element? Is Custom Element a preferable way to implement this process and why? Thank you for looking into this.