-
I found a set of html code sample for Power Bi Embed – Client Side App Code.
https://torpedo.pt/power-bi-embedded/ -
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).
-
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 -
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);
}
- 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.