Hello,
I am new to this stuff so I need little help. I am trying to embed my powerBI report in a web app (currently trying to do it in localhost).
However, after generating token and adding JS (from power bi playground) in with my HTML, I cannot see any edit pane in my web page. I can only see my report.
my HTML code:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div><iframe id="embedContainer" title="Sample Report Demo" width="1140" height="541.25" frameborder="0" allowFullScreen="true" src="<link to my report>"></iframe></div><script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script><script src="node_modules/powerbi-client/dist/powerbi.js"></script><script src="myscripts.js"></script></body></html>
Javascript:
let loadedResolve;
let reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve;
let reportRendered = new Promise((res, rej) => { renderedResolve = res; });
models = window['powerbi-client'].models;
function embedPowerBIReport() {
let accessToken = <my access token>
let embedUrl = 'https://app.powerbi.com/reportEmbed?groupId=<my group id>';
let tokenType = '1';
let permissions = models.Permissions.All;
let config = {
type: 'report',
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: permissions,
settings: {
panes: {
filters: {
expanded: true,
visible: true
},
pageNavigation: {
visible: true
}
},
bars: {
statusBar: {
visible: true
}
}
}
};
let embedContainer = $('#embedContainer')[0];
report = powerbi.embed(embedContainer, config);
report.off("loaded");
report.on("loaded", function () {
loadedResolve();
report.off("loaded");
});
report.off("error");
report.on("error", function (event) {
console.log(event.detail);
});
report.off("rendered");
report.on("rendered", function () {
renderedResolve();
report.off("rendered");
});
}
async function loadAndEditReport() {
// Call the function to embed the Power BI report.
embedPowerBIReport();
// Wait for the report to load
await reportLoaded;
// Insert here the code you want to run after the report is loaded
// Wait for the report to render
await reportRendered;
// Insert here the code you want to run after the report is rendered
// Switch to edit mode.
report.switchMode("edit");
}
Powershell script to generate token with write access:
Login-PowerBI
$url = 'https://api.powerbi.com/v1.0/myorg/groups/<my group id>/reports/<my report id>/GenerateToken'
$body = "{'accessLevel': 'Edit', 'datasets': ['<my dataset id>']}]}"
$response = Invoke-PowerBIRestMethod -Url $url -Body $body -Method Post
$response
$json = $response | ConvertFrom-Json
$json.token
Can you please let me know what wrong am I doing here?