Embedding report in edit mode

Nrj · ‎03-14-2024

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?

tharunkumarRTK · ‎03-14-2024

@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

Nrj · ‎03-14-2024

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.

tharunkumarRTK · ‎03-14-2024

@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

Nrj · ‎03-14-2024

@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

Embedding report in edit mode

Helpful resources

Fabric Community Update - July 2025

Power BI Monthly Update - July 2025

Join our Fabric User Panel

Party with Power BI’s own Guy in a Cube

Embedding report in edit mode

Helpful resources

Fabric Community Update - July 2025

Power BI Monthly Update - July 2025

Join our Fabric User Panel