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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
MP_123
Employee
Employee

Power BI embed sample

hi,

i'm trying to follow these instruction in order to try the power bi embed feature.

i;m stuck on trying to build & run this 😞

has someone succeeded?

the build is with a lot of errors that blocking me from running the console app.

thanks!

5 REPLIES 5
Eric_Zhang
Employee
Employee

@MP_123

I‘ve followed the same instruction and it proves working. Whenever any error occurs, you can post the steps where it occurs and the detailed error message so that we can help.

@Eric_Zhang@tringuyenminh92

hi, thank you!

i've created a workspace, i just don't understand\know how to import a power bi into this workspace.

can you please help me?

i know i can make it with the provision sample but i can't build this soloution so it doesn't work

 

thanks

Hi @MP_123,

 

I didn't use that sample project, so if you have read topic of powerbi cli, i will assume that you have

  • created 1 workspace collection in your Azure account  => (had accesskey of workspace collection)
  • created 1 workspace in that workspace collection => (had workspaceid)
  • imported 1 report to that workspace => (had reportid)
  • had access token of report 
create-embed-token

Creates a Power BI embed app token

powerbi create-embed-token -c <collection> -k <accessKey> -w <workspaceId> -r <reportId>

So now you could create one empty web project -> add index.html file as view and follow topic in second line

In view:  (you could replace ng-click by onclick if you are using javscript instead of angularjs)

 <h2><button class="label label-success" ng-click="showReport()">Basic Embed Report</button></h2>
                <div id="reportContainer" class="flex"></div>

In your js file:

  $scope.config = {
        workspaceCollection: 'pbiwchols', // your workspace collection name
        workspaceId: 'f1af7361-f57f-4c80-81a7-', 
        reportId: '9bfcfa5a-5220-4919-b86b-fe',
        type: 'report',
        accessToken: 'removed',
        embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed',
        id: '9bfcfa5a-5220-4919-b86b-fe90bcc6c03a',
        settings: {
            filterPaneEnabled: false,
            navContentPaneEnabled: true
        }
    };

    $scope.showReport = function () {

        // Grab the reference to the div HTML element that will host the report.
        $scope.reportContainer = angular.element('#reportContainer')[0];

        // Embed the report and display it within the div container.
        $scope.report = powerbi.embed(reportContainer, $scope.config);

        // Report.off removes a given event handler if it exists.
        $scope.report.off("loaded");

        // Report.on will add an event handler which prints to Log window.
        $scope.report.on("loaded", function (event) { });
        // Report.on will add an event handler which prints to Log window.
        $scope.report.on("pageChanged", function (event) { });
        //handling error event
        $scope.report.on("error", function (event) { });

    };

Screenshot 2017-02-06 21.12.52.png

 

For details, please follow topic https://github.com/Microsoft/PowerBI-JavaScript/wiki

these are the errors i get when trying to build the solution:

build.PNG

and then when trying to run the provision console app

run.PNG(the file is exist)

please someone can help me?

 

thanks!

 

tringuyenminh92
Memorable Member
Memorable Member

Hi @MP_123,

 

To have basic sample, you could follow up some topics as i mentioned in this topic:

 

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

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

April Fabric Community Update

Fabric Community Update - April 2024

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