topic Re: Embedding report in edit mode in Developer

Embedding report in edit mode

Nrj — Thu, 14 Mar 2024 09:44:11 GMT

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&colon;

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

Result (values are hidden for some legal purposes):

I can't even see the filter pane.

Can you please let me know what wrong am I doing here?

Re: Embedding report in edit mode

tharunkumarRTK — Thu, 14 Mar 2024 08:59:35 GMT

Nrj

add this line to your JS to enable edit mode

viewMode: models.ViewMode.Edit,

sample here:

// Read embed application token

let accessToken = EMBED_ACCESS_TOKEN;

// Read embed URL

let embedUrl = EMBED_URL;

// Read report Id

let embedReportId = REPORT_ID;

// Read embed type from radio

let tokenType = TOKEN_TYPE;

// Get models. models contains enums that can be used.

models = window['powerbi-client'].models;

// Create the embed configuration object for the report

// For more information see https://go.microsoft.com/fwlink/?linkid=2153590

let config = {

type: 'report',

tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,

accessToken: accessToken,

embedUrl: embedUrl,

id: embedReportId,

permissions: models.Permissions.All /*gives maximum permissions*/,

viewMode: models.ViewMode.Edit,

settings: {

panes: {

filters: {

visible: true

pageNavigation: {

visible: true

}

};

// Get a reference to the embedded report HTML element

let embedContainer = $('#embedContainer')[0];

// Embed the report and display it within the div container.

report = powerbi.embed(embedContainer, config);

// report.off removes all event handlers for a specific event

report.off("loaded");

// report.on will add an event handler

report.on("loaded", function () {

// Event handler code

});

// report.off removes all event handlers for a specific event

report.off("rendered");

// report.on will add an event handler

report.on("rendered", function () {

// Event handler code

});

report.off("error");

report.on("error", function (event) {

console.log(event.detail);

});

report.off("saved");

report.on("saved", function (event) {

if (event.detail.saveAs) {

console.log(event.detail, '\nIn order to interact with the new report, create a new token and load the new report');

}

else {

console.log(event.detail);

}

});

If the post helps please give a thumbs up

If it solves your issue, please accept it as the solution to help the other members find it more quickly.

Tharun

Re: Embedding report in edit mode

Nrj — Thu, 14 Mar 2024 09:40:01 GMT

Hi tharunkumarRTK , thanks for the help. However the result is same. It's not just the edit panel, it doesn't even show the filter pane. I'll also share the screenshot of the result in my original question for the reference.

Re: Embedding report in edit mode

tharunkumarRTK — Thu, 14 Mar 2024 09:46:59 GMT

Nrj

I guess you would have explored edit mode api in embed play ground. can you check if you are missing something?
https://playground.powerbi.com/en-us/explore-features

Re: Embedding report in edit mode

Nrj — Fri, 15 Mar 2024 06:37:20 GMT

tharunkumarRTK Yes. I did explore it in embed play ground and everything is just as mentioned there. Still I am not sure why I am not getting the desired results