Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
5 years ago
Solved

power bi embedded

Hello all,

I am trying to embed Power BI report into React website. 

import { Report } from 'powerbi-report-component';<Report
  tokenType="Embed" // or, "Aad"
  accessToken="" // accessToken goes here
  embedUrl="" // embedUrl goes here
  embedId="" // report or dashboard Id goes here
  pageName="" // set as current page of the report
  reportMode="view" // options: view/edit/create
  permissions="All" // View
/>

 This is my code for it. But when I view this in the browser, report size is too small. What should I do to make report display in larger size? 

 

Thanks

  • Icey's avatar
    Icey
    5 years ago

    Hi Anonymous ,

     

    Try to modify the following code to meet your requirements:

    // Get a reference to the embedded report HTML element
var embedContainer = $('#embedContainer')[0];

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

// Define default visual layout: visible in 400x300.
let defaultLayout = {
    width: 400,
    height: 250,
    displayState: {
        mode: models.VisualContainerDisplayMode.Hidden
    }
};

// Define page size as custom size: 1000x580.
let pageSize = {
    type: models.PageSizeType.Custom,
    width: 1000,
    height: 580
};

// Page layout: two visible visuals in fixed position.
let pageLayout = {
    defaultLayout: defaultLayout,
    visualsLayout: {
        "VisualContainer1": {
            x: 70,
            y: 100,
            displayState: {
                mode: models.VisualContainerDisplayMode.Visible
            }
        },
        "VisualContainer3": {
            x: 540,
            y: 100,
            displayState: {
                mode: models.VisualContainerDisplayMode.Visible
            }
        }
    }
};

let settings = {
    layoutType: models.LayoutType.Custom,
    customLayout: {
        pageSize: pageSize,
        displayOption: models.DisplayOption.FitToPage,
        pagesLayout: {
            "ReportSection600dd9293d71ade01765": pageLayout
        }
    },
    panes: {
        filters: {
            visible: false
        },
        pageNavigation: {
            visible: false
        }
    }
}

// Get a reference to the embedded report.
report = powerbi.get(embedContainer);

// Update the settings by passing in the new settings you have configured.
try {
    await report.updateSettings(settings);
    Log.logText("Custom layout applied, to remove custom layout, reload the report using 'Reload' API.");
}
catch (error) {
    Log.log(error);
}

     

    Reference: Power BI Embedded custom layout | Azure updates | Microsoft Azure

     

     

    Best regards

    Icey

     

    If this post helps, then consider Accepting it as the solution to help other members find it faster.

1 Reply

  • Icey's avatar
    Icey
    Community Support
    5 years ago

    Hi Anonymous ,

     

    Try to modify the following code to meet your requirements:

    // Get a reference to the embedded report HTML element
var embedContainer = $('#embedContainer')[0];

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

// Define default visual layout: visible in 400x300.
let defaultLayout = {
    width: 400,
    height: 250,
    displayState: {
        mode: models.VisualContainerDisplayMode.Hidden
    }
};

// Define page size as custom size: 1000x580.
let pageSize = {
    type: models.PageSizeType.Custom,
    width: 1000,
    height: 580
};

// Page layout: two visible visuals in fixed position.
let pageLayout = {
    defaultLayout: defaultLayout,
    visualsLayout: {
        "VisualContainer1": {
            x: 70,
            y: 100,
            displayState: {
                mode: models.VisualContainerDisplayMode.Visible
            }
        },
        "VisualContainer3": {
            x: 540,
            y: 100,
            displayState: {
                mode: models.VisualContainerDisplayMode.Visible
            }
        }
    }
};

let settings = {
    layoutType: models.LayoutType.Custom,
    customLayout: {
        pageSize: pageSize,
        displayOption: models.DisplayOption.FitToPage,
        pagesLayout: {
            "ReportSection600dd9293d71ade01765": pageLayout
        }
    },
    panes: {
        filters: {
            visible: false
        },
        pageNavigation: {
            visible: false
        }
    }
}

// Get a reference to the embedded report.
report = powerbi.get(embedContainer);

// Update the settings by passing in the new settings you have configured.
try {
    await report.updateSettings(settings);
    Log.logText("Custom layout applied, to remove custom layout, reload the report using 'Reload' API.");
}
catch (error) {
    Log.log(error);
}

     

    Reference: Power BI Embedded custom layout | Azure updates | Microsoft Azure

     

     

    Best regards

    Icey

     

    If this post helps, then consider Accepting it as the solution to help other members find it faster.