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.
Hi,
I am following the guide in https://github.com/Microsoft/PowerBI-Angular, to embed my PowerBI report in my Angularjs web app.
In the html template, I have
<powerbi-report embed-url="report.embedUrl" access-token="report.token" class="powerbi-frame--dotted"></powerbi-report>
In the controller, I get the embedUrl and token from my own backend server.
var app = angular.module('powerBIEmbedTest'); app.controller('PowerBICtrl', [ '$scope', '$sce', '$window', 'PowerBIService', function ($scope, $sce, $window, PowerBIService) { $scope.status = "OK"; PowerBIService.GetToken().then(function onSuccess(response){ $scope.report = response.data; } ...... ......
I can see the report is successfully loaded, but the size if very small, the height is just 150 px, the width is about 80% of the screen width. I guess this is the default size. But I don't know how to customize the size, and I did not find in the sample code on github.
Please advise.
Thanks.
Solved! Go to Solution.
Based on my test, you can define the embedded report size by changing the css file.
For example,for this live demo, change height and width in the app.css.
Based on my test, you can define the embedded report size by changing the css file.
For example,for this live demo, change height and width in the app.css.
File is not opening ..
Thanks for the advise. I saw the css file. So, it means I can define my own types in css (e.g., powerbi-frame-xl) specifying its style and use it as 'class' in my <powerbi-report>. Correct?
I have tried in my project, it works.
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
14 | |
2 | |
2 | |
1 | |
1 |