练习 - 添加高级客户端功能

15 分钟

本动手实验旨在展示如何使用外部图表库和使用门户 Web API 从 Dataverse 检索的数据，向页面添加 JavaScript 代码，从而以图表的形式呈现 Microsoft Dataverse 中的数据。

如果您有可供使用的示例数据，则能够极大提升本练习的效果。根据您使用的环境，您可能希望安装一些示例数据来帮助练习。 Microsoft Power Platform 为您提供按需添加示例数据的功能。如果您使用的环境未安装示例数据，请按照添加或删除示例数据文档中的步骤在环境中安装示例数据。

学习目标

这些练习的目标是帮助您学习如何：

设置站点设置和表权限以启用门户 Web API 请求。
向内容网页添加内联代码，以使用门户 Web API 检索和转换数据。
使用外部 JavaScript 库绘制已转换的数据。

先决条件

在本练习中，确保在环境中设置以下参数：

已预配的 Power Pages 网站。如果没有可用的 Power Pages 网站，请按照使用 Power Pages 创建站点文档中的说明创建网站。
对 Power Pages Maker 主页的访问权限。

简要步骤

要完成练习，您需要完成以下任务：

创建站点设置和表权限，允许门户 Web API 读取对客户表的请求。
创建内容页面并添加用于检索和转换数据的 JavaScript 代码。
使用库构建包含检索数据的图形，向页面和 JavaScript 代码添加图表库。

详细步骤

要完成本实验，请按照以下详细步骤操作。

启用门户 Web API 请求

此部分将向您展示如何启用对客户表的门户 Web API 请求。

创建站点设置

要创建站点设置，请按照以下步骤操作。

登录 Power Pages 主页。
在右上角选择正确的环境。
选择省略号 (...) 菜单，然后选择门户管理。

门户管理应用将在新选项卡中打开。
选择站点设置。
选择 + 新建，然后输入以下信息：
- 名称 - Webapi/account/enabled
- 网站 - 选择您的网站
- 值 - true
选择保存。
选择 + 新建，然后输入以下信息：
- 名称 - Webapi/account/fields
- 网站 - 选择您的网站
- 值 - name、numberofemployees、revenue
选择保存并关闭。

创建表权限

要创建表权限，请按照以下步骤操作。

切换到 Power Pages 主页。
选择目标网站对应的编辑以打开 Power Pages 设计工作室。
选择设置工作区，然后选择表权限。
选择 + 新建权限，然后填写以下信息：
- 名称 - 客户
- 表 - 客户 (account)
- 访问类型 - 全局
- 权限 - 读取
选择添加角色，然后添加匿名用户和经过身份验证的用户。
选择保存。

测试 Web API

要测试 Web API，请打开以下 URL：https://yourwebsite.powerappsportals.com/_api/accounts?$select=name,numberofemployees,revenue

输出应如下图所示。

创建内容页面并检索数据

要创建内容页面并添加用于检索和转换数据的 JavaScript 代码，请按照以下步骤操作：

在设计工作室中，选择页面工作区，然后选择 + 页面。
输入图表作为页面名称。
确保已选中向主导航添加页面选项。
选择从空白开始布局。
选择添加。
选择编辑代码。
在弹出对话框中，选择打开 Visual Studio Code。
在 Visual Studio Code 编辑器中，选择 Chart.en-US.customjs.js 文件。

追加以下脚本：

function makeChart(rawData) {
  // transform raw data into plotting array
  var rData = rawData.value.map(({
    name,
    revenue,
    numberofemployees
  }) => ({
    "x": numberofemployees,
    "y": revenue,
    "z": (!revenue) ? 1 : numberofemployees / revenue,
    "name": name
  }));
  console.log(rData);
}
// retrieve accounts data using portals Web API
$(document).ready(function() {
  $.get('/_api/accounts?$select=name,numberofemployees,revenue', makeChart, 'json');
});

按 Ctrl + S 键盘快捷键（在 Mac 上为 ⌘ + S）以保存文件。
关闭 Visual Studio Code 选项卡，在系统提示同步更改时，选择同步。
选择预览 > 桌面。
显示页面时，按 F12 键显示浏览器开发人员工具。
验证控制台输出包含的数据与之前检索的数据是否相同，除非这些数据现在显示为已转换。
数据结构现在已准备好进行绘制。为数据点分配适当的标签：
- 名称 - 公司名称
- x - 员工数量
- y - 公司收入（千）
- z - 每个员工的收入（计算）

添加外部库功能

本练习使用 Highcharts.js 库（免费供个人或非盈利使用）基于数据创建气泡图。

切换到设计工作室。
选择页脚，然后选择编辑代码。
在弹出对话框中，选择打开 Visual Studio Code。

在文件末尾追加以下代码。

  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>

按 Ctrl + S 键盘快捷键（在 Mac 上为 ⌘ + S）以保存文件。
关闭 Visual Studio Code 选项卡。
选择工具栏上的编辑代码，打开页面的 Visual Studio Code。
选择 Chart.en-US.customjs.js 文件。

修改文件，将 makeChart 函数更改为如下所示：

function makeChart(data) {
  console.log(data);
  var rData = data.value.map(({
    name,
    revenue,
    numberofemployees
  }) => ({
    "x": numberofemployees,
    "y": revenue,
    "z": (!revenue) ? 1 : numberofemployees / revenue,
    "name": name
  }));
  console.log(rData);

  // new code to plot the data
  Highcharts.chart($('.mychart')[0], {
    title: {
      text: "Customers efficiency"
    },
    legend: {
      enabled: false
    },
    xAxis: {
      title: {
        text: "Number of employees"
      }
    },
    yAxis: {
      title: {
        text: "Turnover ($K)"
      }
    },
    tooltip: {
      pointFormat: '<strong>{point.name}</strong><br/>Employed: {point.x}<br>Turnover ($K): ${point.y}',
      headerFormat: ''
    },
    series: [{
      type: 'bubble',
      data: rData
    }]
  });
}

// retrieve accounts data using portals Web API
$(document).ready(function() {
  $.get('/_api/accounts?$select=name,numberofemployees,revenue', makeChart, 'json');
});

按 Ctrl + S 键盘快捷键（在 Mac 上为 ⌘ + S）以保存文件。
选择 Chart.en-US.webpage.copy.html 文件。

将以下代码插入到内部 <div> 元素中：

  <figure>
    <div class="mychart"></div>
  </figure>

按 Ctrl + S 键盘快捷键（在 Mac 上为 ⌘ + S）以保存文件。
关闭 Visual Studio Code 选项卡，然后选择同步以同步更改。
选择预览 > 桌面。
现在输出应包括气泡图。将光标悬停在气泡上方以验证数据。

继续