Power BI Embedded development feed

Note: This article was originally published on d-bi.gitee.io and will be migrated to CSDN in June 2023

This article mainly explains some key points in the development process of Power BI Embedded, including steps not explicitly mentioned in the document, solutions to some BUGs that may be encountered, and specific implementation methods of individual functions.

Please note that this is a supplementary article. Since it is a "feedback", it will naturally not be a step-by-step tutorial. I recommend that readers already have a preliminary understanding of Power BI Embedded. Follow the [official document] (https://docs.microsoft.com/en-us/power-bi/developer/embedded/embed-sample-for-customers?tabs=net-framework) and combine it with this article, I believe it can help The development process will be smoother for everyone and there will be fewer detours. At the end of the article, there are also links to relevant tutorials, which contain more detailed information.

In addition, all the following content is "Embed for customers (App-owns-data)". If it is embedded development for organizations, you can refer to this document . However, the actual development process is not very different, so you can also refer to this article.

Example

First of all, I strongly recommend readers to go to this website to experience the official examples , or you can directly Google "Power BI Embedded Playground", which provides many cool examples, as well as teaching documents and videos:

Insert image description here

The picture below is an example developed by me, including the following functions:

Report selection
Data filtering
switch theme
RLS (role-based row-level security)
Switch to edit mode to edit & save the report
Show & close bookmarks
Enter & exit full screen mode
Page refresh
Query the latest data refresh time
Perform data refresh
Switch to dashboard
Dashboard display mode
More (...)

The above example is powerful enough for ordinary users of Power BI, but in fact the functions that can be achieved are far more than these. This example is only a prototype, which means that based on the same technical implementation principle, we Many functions that are completely beyond imagination can be realized, such as the custom submenu with the function of sending emails that pops up in the official example, as well as custom visual analysis and so on.

This example is temporarily deployed on a personal local server, so you cannot access it yet. Videos will be recorded later to demonstrate the effects of each function.

Now, please follow the document through steps 1 to 8 and read the summary below.

Summary of preliminary work

1.Power BI Embedded is not a simple iframe embedding. Although you can simply publish the report to the Web in PBI Service and then embed the iframe in the HTML page, this is not Power BI Embedded in the true sense because you will not be able to control permissions and use the powerful PBI JS library provided by the official To achieve rich interactive functions and so on. To achieve these effects, you must first obtain a valid embedded token , which is the focus of the preliminary work.

2. During the testing phase, it is recommended to choose the Master Account mode (PPU, Pro or Pro trial account). Power BI Embedded has two authentication modes, Service Principal and Master Account. Officially, the latter cannot be used in production environments and can only generate a limited number of embedded tokens, but since you can use this account to log in to Power BI Service, Therefore, this can facilitate developers to perform related debugging. The Service Principal can join the security group as a user and assign permissions in the PBI workspace (this is a necessary step, as shown in the figure) , but it cannot log in to the Service itself.

Insert image description here

After the application is online, it is recommended to change the authentication method to Service Principal. Using this method does not require increasing the account and password values in the configuration file, but you need to provide a Client Secret, which can be created on Azure and specify the validity period: In addition, in PBI
Insert image description here
Service After enabling "Allow service principals to use Power BI APIs" in the tenant settings (step 6 of the document), it is recommended to apply it to the security group (the security group can be created by the administrator in Azure):

Insert image description here

Development and deployment Q&A

1. Failed to obtain embedded token

Error message: 401 Unanthorized: Error while retrieving Embed URL
Insert image description here
Solution: Add Power BI Service permission to App in Azure Portal

Insert image description here
Note: If 403 Forbidden is returned, you need to add App permissions to the PBI workspace (mentioned above)

2.'$' is not defined

Insert image description here
Solution: Don’t use IE browser, switch to a newer version of Chrome, Firefox or Edge browser, and introduce Jquery in HTML:

<script src="/scripts/jquery.js"></script>

3.Server Error in ‘/’ Application

Insert image description here

Solution: Use Package Manager to install the .net package:

Install-Package Microsoft.Net.Compilers -Version 3.7.0-2.final

If the problem persists, you need to convert it to an application in IIS: Insert image description here
4.powerbi is not defined

Insert image description here
Solution: Copy the script folder in the installed Powerbi.javascript package to the project root directory

5. An error occurs when the report is converted to edit mode
Insert image description here
. Solution:

//在Config追加
permissions: models.Permissions.All

ASP.NET

var generateTokenRequestParameters = new GenerateTokenRequest(TokenAccessLevel.View);

Change to:

var generateTokenRequestParameters = new GenerateTokenRequest(TokenAccessLevel.Edit);

I am very much looking forward to feedback from readers on the problems you have encountered and the solutions (if any). I will add related questions to enrich this part of the content and help more people.

【Appendix 1】How to implement specific functions

The original code of Power BI Emdedded Playground is somewhat complicated and difficult to understand. Here are just one or two examples to help you understand everything.

1. Implement full screen

HTML

<button id="r_fullscreen" type="button" onclick="fullscreen()">全屏</button>

 function fullscreen() {
     var embedContainer = document.getElementById('embedDiv');
     report = powerbi.get(embedContainer);
     report.fullscreen();
     return;
 };

2. Hover the mouse to get the latest update time of the data set

HTML

<button id="d_refresh" title="
            上次刷新开始时间: 
            <% = this.refresh_startTime %>
            上次刷新完成时间: 
            <% = this.refresh_endTime %>" 
type="button" onclick="refresh()">刷新数据</button>

ASP.NET

public string refresh_startTime;
public string refresh_endTime;
using (var client = new PowerBIClient(new Uri(Configurations.ApiUrl), Authentication.GetTokenCredentials()))
{
	var report = client.Reports.GetReportInGroup(Configurations.WorkspaceId, new Guid(ddlReport.SelectedValue));
	var refresh_history = client.Datasets.GetRefreshHistoryInGroup(Configurations.WorkspaceId,report.DatasetId);
	refresh_startTime = refresh_history.Value[0].StartTime.Value.ToString();
	refresh_endTime = refresh_history.Value[0].EndTime.Value.ToString();
}

【Appendix 2】Related information

Power BI Javascript documentation

Power BI Developer in a Day course

Power BI Developer in a Day video collection

Power BI Embedded implements RLS

RADACAD Power BI Embedded Article Series

Follow the author: Zhihu | Power BI official community