练习 - 显示客户列表

  • 20 分钟

本动手实验旨在使用 Liquid 访问 Microsoft Dataverse。

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

学习目标

这些练习旨在帮助您学习如何：

  • 输入 Liquid 代码作为页面内容的一部分。

  • 使用 Liquid 访问 Dataverse 数据。

  • 添加条件语句仅显示可用数据。

先决条件

在本练习中，您需要在环境中设置以下参数：

  • 已预配的 Power Pages 网站。 如果没有可用的网站，请按照使用 Power Pages 创建站点说明创建网站。

  • Power Pages 设计工作室访问权限。

简要步骤

在本练习中，您将使用 Power Pages 设计工作室代码编辑器向网页添加一些 HTML 和 Liquid 代码，以便显示选定的 Dataverse 记录。

  1. 在 Power Pages 设计工作室中打开网站。

  2. 添加供应商网页。

  3. 添加列出所有可用客户的 HTML 和 Liquid 代码。

  4. 在设计工作室和浏览器中预览结果。

  5. 添加客户表的读取表权限并在浏览器中验证结果。

详细步骤

按照此部分中的详细步骤完成此练习。

启动 Power Pages 设计工作室

按照以下步骤启动 Power Pages 设计工作室：

  1. 登录 Power Pages。

  2. 在右上角选择正确的环境。

  3. 选择网站，然后选择编辑。

创建“供应商”网页

要创建供应商网页，请按照以下步骤操作：

  1. 选择页面工作区。

  2. 选择 + 页面。

    • 输入供应商作为页面名称。

    • 选择从空白开始模板。

    • 选择添加。

编辑源代码

要编辑源代码以列出所有可用客户，请按照以下步骤操作：

  1. 在页面画布上选择内容并添加文本组件。

  2. 用以下文本替换组件占位符：

    <h2>List of accounts</h2>
{% entityview logical_name:'account', name:'Active Accounts' %}
<p>We have {{ entityview.total_records }} accounts.</p>
<ul>
  {% for account in entityview.records -%}
  <li>{{ account.name }}
    {% if account.telephone1 %}
    (<a href="tel:{{ account.telephone1 }}">{{ account.telephone1 }}</a>)
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endentityview %}

  3. 选择同步。

  4. 应用画布上应显示当前客户列表，包括出现的超链接电话号码。

    设计工作室中页面上的客户列表的屏幕截图。

    重要提示

    设计工作室允许您使用标准文本组件输入 Liquid。 保存并同步页面后，Power Pages 会将文本组件转换为高级组件，指示直接编辑不再可用。 您仍然可以在 Visual Studio Code 编辑器中访问 Liquid 代码，可以通过选择编辑代码按钮来启动该编辑器。

  5. 选择预览 > 桌面。 显示的网页应仅包含文本：“我们有 0 个客户。”

    注意

    预计获得此结果，因为在运行时 Power Pages 将拒绝访问表行，除非存在允许访问数据的表权限记录。

添加表权限

要在浏览页面时显示客户记录列表，您需要添加表权限。

警告

在本练习中，您需要在客户表上为所有访问者添加全局读取权限。 此设置不是典型的安全配置，仅用于演示目的。

按照以下步骤添加表权限：

  1. 选择设置工作区，然后选择表权限。

  2. 选择 + 新建。

  3. 输入以下值：

    • 名称 - 供应商

    • 表 - 选择客户表

    • 访问类型 - 选择全局访问

    • 权限 - 选择读取

  4. 选择添加角色。

  5. 选择匿名用户和经过身份验证的用户。

  6. 选择保存。

  7. 选择预览 > 桌面。

    此时应显示客户列表。

    在匿名浏览会话中显示客户列表的网页的屏幕截图。