Forum Discussion

Nrj's avatar
Nrj
New Member
2 years ago

Embedding report in edit mode

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?

Need Help
Tutorial Requests

4 Replies

  • tharunkumarRTK's avatar
    tharunkumarRTK
    Super User
    2 years ago

    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
    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