Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
Anonymous
Not applicable

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

1 ACCEPTED SOLUTION
Icey
Community Support
Community Support

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);
}

embedded.JPG

 

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.

View solution in original post

1 REPLY 1
Icey
Community Support
Community Support

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);
}

embedded.JPG

 

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.

Helpful resources

Announcements
July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.

July Newsletter

Fabric Community Update - July 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors