Power BI 工作区集合示例的入门指南

借助 Power BI 工作区集合,可以将 Power BI 报表直接集成到 Web 或移动应用程序中。 本文介绍 Power BI 工作区集合 入门示例。

重要

Power BI 工作区集合已被弃用,并将可用至 2018 年 6 月或直到您的合同规定的时间为止。 建议你计划迁移到 Power BI Embedded,以避免应用程序中的中断。 有关如何将数据迁移到 Power BI Embedded 的信息,请参阅 如何将 Power BI 工作区集合内容迁移到 Power BI Embedded

在进一步讨论之前,请保存以下资源:这些资源在将 Power BI 报表集成到示例应用和你自己的应用中时非常有用。

注释

在配置并运行 Power BI 工作区集合入门示例之前,需要在 Azure 订阅中创建至少一个 工作区集合 。 若要了解如何在 Azure 门户中创建 工作区集合 ,请参阅 Power BI 工作区集合入门

配置示例应用

让我们逐步介绍如何设置 Visual Studio 开发环境以访问运行示例应用所需的组件。

  1. 下载并解压缩 Power BI 工作区集合 - 将报表集成到 GitHub 上的 Web 应用示例。

    重要

    此示例中的某些 URL 只能在全局环境中使用。 若要使其在 Azure 中国环境中正常工作,必须进行一些替换。 例如:将文件\ProvisionSample\App.config中的https://api.powerbi.com替换为https://api.powerbi.cn,将文件\ProvisionSample\Program.cs中的https://management.azure.com替换为https://management.chinacloudapi.cn,将文件\ProvisionSample\ProgramExtensions.cs中的https://management.core.windows.net替换为https://management.core.chinacloudapi.cn,将文件中的https://login.windows.net替换为https://login.chinacloudapi.cn。 有关全球和中国 URL 差异的更多详细信息,请参阅 此处

  2. 在 Visual Studio 中打开 PowerBI-embedded.sln 。 可能需要在 NuGet 包管理器控制台中执行 Update-Package 命令才能更新此解决方案中使用的包。

  3. 生成解决方案。

  4. 运行 ProvisionSample 控制台应用。 在示例控制台应用中,预配工作区并导入 PBIX 文件。

  5. 若要预配新 工作区,请选择选项 1、 集合管理,然后选择选项 6、 预配新工作区

  6. 若要导入新的 报表,请选择选项 2、 报表管理,然后选择选项 3, 将 PBIX Desktop 文件导入工作区

  7. 输入 工作区集合 名称和 访问密钥。 可以在 Azure 门户中获取这些内容。 若要详细了解如何获取 访问密钥,请参阅 Power BI Embedded 入门中的 Power BI API 访问密钥

    在 Azure 门户中访问密钥

  8. 复制并保存新创建的 工作区 ID ,以供本文稍后使用。 创建 工作区 ID 后,可以在 Azure 门户中找到它。

    Azure 门户中的工作区 ID

  9. 若要将 PBIX 文件导入 工作区,请选择选项 6。将 PBIX 桌面文件导入现有工作区。 如果没有现成的 PBIX 文件,可以下载 零售分析示例 PBIX

  10. 如果系统提示,请输入 数据集的友好名称。

应会看到如下所示的响应:

Checking import state... Publishing
Checking import state... Succeeded

注释

如果 PBIX 文件包含任何直接查询连接,请运行选项 7 以更新连接字符串。

此时,已将 Power BI PBIX 报表导入 工作区。 现在,让我们看看如何运行 Power BI 工作区集合 入门示例 Web 应用。

运行示例 Web 应用

示例 Web 应用程序是一款用于呈现进口到您工作区中的报表的演示应用程序。 下面介绍如何配置 Web 应用示例。

  1. PowerBI 嵌入式 Visual Studio 解决方案中,右键单击 EmbedSample Web 应用程序,然后选择 “设为启动”项目

  2. web.configEmbedSample Web 应用程序中,编辑 appSettingsAccessKeyWorkspaceCollection 名称和 WorkspaceId

    <appSettings>
        <add key="powerbi:AccessKey" value="" />
        <add key="powerbi:ApiUrl" value="https://api.powerbi.cn" />
        <add key="powerbi:WorkspaceCollection" value="" />
        <add key="powerbi:WorkspaceId" value="" />
    </appSettings>
    
  3. 运行 EmbedSample Web 应用程序。

运行 EmbedSample Web 应用程序后,左侧导航面板应包含“ 报表 ”菜单。 若要查看导入的报表,请展开 “报表”,然后单击报表。 如果导入了 零售分析示例 PBIX,该示例网页应用将如下所示:

示例应用程序中的左侧导航示例

单击报表后, EmbedSample Web 应用程序应如下所示:

应用程序内显示的示例报表

探索示例代码

Power BI 工作区集合示例是一个示例 Web 应用,演示如何将 Power BI 报表集成到应用中。 它使用模型View-Controller(MVC)设计模式来演示最佳做法。 本部分重点介绍可在 PowerBI 嵌入式 Web 应用解决方案中浏览的示例代码的一部分。 模型View-Controller(MVC)模式将领域的建模、展示以及基于用户输入的动作分隔为三个单独的类:模型、视图和控制器。 若要了解有关 MVC 的详细信息,请参阅 “了解 ASP.NET”。

Power BI 工作区集合示例代码按如下所示分隔。 每个部分都包含PowerBI-embedded.sln解决方案中的文件名,以便你可以轻松地在示例中查找代码。

注释

本部分汇总了演示如何编写代码的示例代码。 若要查看完整的示例,请在 Visual Studio 中加载PowerBI-embedded.sln解决方案。

型号

该示例具有 ReportsViewModelReportViewModel

ReportsViewModel.cs:表示 Power BI 报表。

public class ReportsViewModel
{
    public List<Report> Reports { get; set; }
}

ReportViewModel.cs:表示 Power BI 报表。

public classReportViewModel
{
    public IReport Report { get; set; }

    public string AccessToken { get; set; }
}

连接字符串

连接字符串必须采用以下格式:

Data Source=tcp:MyServer.database.chinacloudapi.cn,1433;Initial Catalog=MyDatabase

使用通用服务器和数据库属性失败。 例如:Server=tcp:MyServer.database.chinacloudapi.cn,1433;Database=MyDatabase;

查看

该视图管理 Power BI 报表和 Power BI 报表的显示。

Reports.cshtml:循环访问 Model.Reports 以创建 ActionLinkActionLink 组合如下:

部件 DESCRIPTION
标题 报表的名称。
QueryString 指向 Report ID 的链接。
<div id="reports-nav" class="panel-collapse collapse">
    <div class="panel-body">
        <ul class="nav navbar-nav">
            @foreach (var report in Model.Reports)
            {
                var reportClass = Request.QueryString["reportId"] == report.Id ? "active" : "";
                <li class="@reportClass">
                    @Html.ActionLink(report.Name, "Report", new { reportId = report.Id })
                </li>
            }
        </ul>
    </div>
</div>

Report.cshtml:设置 Model.AccessTokenPowerBIReportFor 的 Lambda 表达式。

@model ReportViewModel

...

<div class="side-body padding-top">
    @Html.PowerBIAccessToken(Model.AccessToken)
    @Html.PowerBIReportFor(m => m.Report, new { style = "height:85vh" })
</div>

控制器

DashboardController.cs:创建一个 PowerBIClient,并传递一个 应用令牌。 JSON Web 令牌(JWT)是从 签名密钥 生成的,用于获取 凭据凭据用于创建 PowerBIClient 实例。 拥有 PowerBIClient 实例后,可以调用 GetReports() 和 GetReportsAsync()。

CreatePowerBIClient()

    private IPowerBIClient CreatePowerBIClient()
    {
        var credentials = new TokenCredentials(accessKey, "AppKey");
        var client = new PowerBIClient(credentials)
        {
            BaseUri = new Uri(apiUrl)
        };

        return client;
    }

操作结果报告

    public ActionResult Reports()
    {
        using (var client = this.CreatePowerBIClient())
        {
            var reportsResponse = client.Reports.GetReports(this.workspaceCollection, this.workspaceId);

            var viewModel = new ReportsViewModel
            {
                Reports = reportsResponse.Value.ToList()
            };

            return PartialView(viewModel);
        }
    }

任务报表(string reportId)

    public async Task<ActionResult> Report(string reportId)
    {
        using (var client = this.CreatePowerBIClient())
        {
            var reportsResponse = await client.Reports.GetReportsAsync(this.workspaceCollection, this.workspaceId);
            var report = reportsResponse.Value.FirstOrDefault(r => r.Id == reportId);
            var embedToken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceId, report.Id);

            var viewModel = new ReportViewModel
            {
                Report = report,
                AccessToken = embedToken.Generate(this.accessKey)
            };

            return View(viewModel);
        }
    }

将报表集成到应用中

拥有 报表后,可以使用 IFrame 嵌入 Power BI 报表。 下面是 Power BI 工作区集合 示例中 powerbi.js 的代码片段。

init: function() {
    var embedUrl = this.getEmbedUrl();
    var iframeHtml = '<iframe style="width:100%;height:100%;" src="' + embedUrl + 
        '" scrolling="no" allowfullscreen="true"></iframe>';
    this.element.innerHTML = iframeHtml;
    this.iframe = this.element.childNodes[0];
    this.iframe.addEventListener('load', this.load.bind(this), false);
}

筛选应用程序中嵌入的报表

可以使用 URL 语法筛选嵌入报表。 为此,请在 iFrame src URL 中添加一个带有 $filter 查询字符串参数和 eq 运算符的 URL,同时指定筛选条件。 下面是筛选器查询语法:

https://app.powerbi.com/reportEmbed
?reportId=d2a0ea38-...-9673-ee9655d54a4a&
$filter={tableName/fieldName}%20eq%20'{fieldValue}'

注释

{tableName/fieldName} 不能包含空格或特殊字符。 {fieldValue} 接受单个分类值。

另请参阅

常见的 Power BI 工作区集合方案
在 Power BI 工作区集合中进行身份验证和授权
嵌入报表
从数据集创建新报表
Power BI Desktop
JavaScript 嵌入示例

更多问题? 尝试参与 Power BI 社区