Embed code to Tadabase from PowerBI Developer Playground


We have iframe from power bi in HTML component in Tadabase. We also have some ID as a URL slug and want to use it as a parameter to pass to PowerBI to select which page to display first

I want to use a JavaScript code from PowerBi Developer Playground to do it, but it doesn’t work if I paste it into a JavaScript tab in Tadabase.

Where should I put the javascript from PowerBi Developer Playground in Tadabase?

Here is a JS code:

let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Embed a Power BI report in the given HTML element with the given configurations
// Read more about how to embed a Power BI report in your application here: https://go.microsoft.com/fwlink/?linkid=2153590
function embedPowerBIReport() {
    |    Don't change these values here: access token, embed URL and report ID.          | 
    |    To make changes to these values:                                                | 
    |    1. Save any other code changes to a text editor, as these will be lost.         |
    |    2. Select 'Start over' from the ribbon.                                         |
    |    3. Select a report or use an embed token.                                       |
    // 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;

    // We give All permissions to demonstrate switching between View and Edit mode and saving report.
    let permissions = models.Permissions.All;

    // 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: permissions,
        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.on will add an event handler
    report.on("loaded", function () {

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

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

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

    // report.on will add an event handler
    report.on("rendered", function () {

await reportLoaded;

// Insert here the code you want to run after the report is loaded

// Retrieve the page collection, and then set the second page to be active.
try {
    const pages = await report.getPages();
    await pages[3].setActive();
    console.log("Active page was set to: \"" + pages[3].displayName + "\"");
catch (errors) {

await reportRendered;

// Insert here the code you want to run after the report is rendered

1 Like

Hi, I’m not a specialist, just from the community, and I cannot solve your question, but it looks surprising to me the line
await pages[3].setActive();
why 3? if it is part of the response from getPages before, it should be a variable number of objects…
I repeat just what makes me think of
Good luck

It just copy/paste from power bi to check the functionality but it doesn’t work
Thank you for noticing

Can someone please help us?