学习目标

在本练习中，学员将使用 Copilot 构建 Power Pages 站点。创建站点后，你将使用 Power Pages 设计工作室执行任务，例如添加和修改内容以及更改主题。

场景

Contoso Consulting 会在全年举办多种不同类型的活动，包括线下活动、网络研讨会、讲师引导式培训，等等。他们希望使用 Microsoft Power Platform 来管理他们举办的各种活动。他们想要使用 Power Pages 创建一个活动管理站点，用于显示他们托管的各种活动。

成功完成本练习后，你将：

使用 Copilot 构建活动管理网站。
将新内容添加到站点。
预览不同类型的设备的新 Power Pages 站点。

实验室详细信息：**

在开始本练习之前，需要你已完成以下实验室：

实验室 2 – 创建数据模型**

重要提示： 此实验室使用 AI 构建组件。由于 AI 结果可能会有所不同，因此请务必注意，该结果可能与实验室中的定义不同（但类似）。无论创建什么内容或其命名是什么，实验室中概述的基本概念都是一样的。如果表和列不完全匹配，则可能需要进行调整以适应已为你创建的内容。

完成此练习预计需要 30 到 45 分钟的时间**。

开始之前： 如果这是你首次访问 Power Pages Power Apps Maker Portal，则可能需要快速进行某些设置。若要执行此操作，请遵循以下说明。否则，可以继续执行任务 1**。

如有必要，请导航到 Microsoft Power Pages。
在“欢迎使用 Power Pages”屏幕上，选择“开始使用”按钮****。
在“向我们大概介绍一下自己的情况”屏幕，选择“跳过”按钮****。

任务 1：使用 Copilot 创建新的 Power Pages 站点。

如有必要，请导航到 https://make.powerpages.microsoft.com
在 Power Pages 设计工作室主页上，输入以下文本**：“构建站点以管理组织举办的活动。”
选择“发送”按钮。
在“查看基本站点详细信息”屏幕中，按如下所示进行配置**：
- 为站点命名：**Contoso Event Management
- 创建 Web 地址：** 接受提供的默认地址
- 站点语言：** 英语
选择“下一步”按钮。
在“选择布局”屏幕中，查看提供的建议布局**。如果想要其他布局建议，请选择“重试”，让 Copilot 建议其他布局**。
确定要使用的模板后，请选择“下一步”**。
在“添加常用页面”部分中，选择以下页面**：
- 关于我们
- 联系我们
- 常见问题解答
- 根据需要选择任何其他页面。
选择页面后，选择“完成”**。

新站点将在后台创建，这可能需要几分钟时间。
创建站点后，将其打开（如果尚未转到此站点）。

注意： 有时，当站点首次加载时，你可能会看到“找不到 Liquid 对象”消息。如果发生这种情况，请刷新浏览器窗口 (F5) 以重新加载站点。此时应会显示该站点。

任务 2：修改站点的内容

现在你已经创建了初始站点，可以使用设计工作室通过添加页面、文本、图像、表单等来修改站点。

主导航，选择“主页”以打开“主页”页面****。
将鼠标悬停在站点标题中的“Contoso 活动管理站点”文本上，然后选择“编辑站点标题”****。
将“站点标题”更改为“Contoso Consulting”****。
选择“上传图像”按钮**。
在“添加图像”屏幕上，选择“上传图像”，从类文件中选择“Contoso 徽标”，然后选择“打开”******。
选中“Contoso 徽标”图像后，选择“确定”****。
完成更改后，选择“X”退出“编辑站点标题”屏幕****。
若要更改站点背景图像，请单击背景图像中的任意位置。
从显示的菜单中，选择“编辑背景”**。
选择“更改图像”按钮**。
选择“媒体库”，然后选择“上传图像”****。
从类文件中选择“Site_Background”图像，然后选择“打开”****。
选中“Site_Background”后，选择“确定”**。
选择“欢迎参加 Contoso 活动”文本，并将该文本更改为“Contoso Consulting”****。
在出现的工具栏上，选择“设计”（画笔）按钮**。
选择“文本阴影”属性旁边的箭头，并将“水平偏移”设置为“2”****。
选择“X”以关闭“文本设计”窗口****。
选择 Contoso Consulting 下面的文本（显示的内容可能类似于“你在活动管理中的合作伙伴”），并将其更改为“你在今天和明天的合作伙伴”**。

现在我们已经对主页进行了一些基本更改，接下来将更新站点的主题，以更好地匹配 Contoso 的品牌。
使用左侧的导航，选择“样式”按钮**。
选择“亮蓝色”主题**。
在“品牌颜色”下，选择“灰色”圆圈****。
更改十六进制颜色：**** 101E2B
选择“确定”**。
选择白色圆圈，然后将颜色更改为十六进制代码 e8e8e8****
选择确定
选择黑色圆圈，然后将颜色更改为“白色”****。 (ffffff)
选择“确定”**。
进行所需的任何其他主题更改。完成主题更改后，选择“保存”按钮**。

任务 3：将站点连接到业务数据

Power Pages 的主要优点之一是能够将 Power Pages 连接到 Dataverse 中的业务数据。我们需要生成一些将要使用的元素，然后才能引入数据。

使用左侧的导航，选择“数据”图标**。
在“搜索”字段中，输入“活动”****。
选择“事件”表**。

首先，我们将创建一个窗体，在想要添加新活动时将使用该窗体。
选择“窗体”选项卡，然后选择“+ 新建窗体”****。
将“窗体名称”设置为“Create Event”，然后选择“创建”按钮****。
我们不会对布局进行任何修改。选择保存并发布按钮。
按下后退箭头，返回设计器**。

接下来，我们将创建一个窗体，用于查看和编辑现有活动
选择“+ 新建窗体”按钮**。
将窗体命名为“查看活动”，然后选择“创建”按钮****。
在命令栏上，选择“添加组件”，然后选择“子网格”****。
按如下所示配置“子网格”：
- 显示相关记录：** 是
- 表：活动研讨会
- 默认值：** 活动会话
选择“完成”。**
选择保存并发布按钮。
选择“后退”按钮以返回到设计工作室****。

任务 4：创建必要的网页窗体

现在我们已为“活动”表定义了窗体，接下来我们将创建包含这些窗体的页面，以便站点用户能够处理“活动”记录。我们将创建用于查看、创建和编辑活动的页面。

使用左侧的导航，选择“页面”图标**。
选择“+ 页面”按钮**。
在 Copilot 中，输入以下文本**：Add a new blank page. 选择“发送”按钮**。
选择“保留”按钮**。
在新页面的顶部，选择“添加分区”按钮**。
选择“1 列”**。
在“选择要添加到此分区的组件”中，选择“窗体”****。
选择 + 新窗体。
在“添加窗体”屏幕上，按如下所示进行配置**：
- 选择表：** 事件
- 选择窗体：** 创建活动
- 为所选窗体的副本命名：** 创建活动
选择“数据”选项卡并验证“此窗体的数据”是否设置为“创建新记录”****。
选择“提交时”选项卡**。在“显示此消息”** 字段中，输入 Your event has been successfully submitted.**
选择“确定”按钮。

让我们移除页面上的任何其他分区，因为我们不需要它们。
选择刚添加的窗体下方的分区**。在出现的工具栏上，选择“更多”(…)，然后选择“删除”**。
重复上一步，从页面中移除其余两个分区。

完成后，应保留的唯一项目是所创建的窗体和页面底部的页脚。
在左侧的“主导航”下，选择所创建的“新页面”旁边的省略号****。
从出现的菜单中选择“页面设置”**。
按如下所示配置页面设置：
- 名称： 新建活动
- 部分 URL：** New-Events
选择“确定”按钮。

接下来，我们将添加一个可用于查看单独活动的附加页面。
请确保你仍然选择了“页面”，然后单击“+ 页面”按钮****。
在“描述页面以创建它”屏幕中，输入**：Add a Blank Page named View Event. 选择“发送”按钮**。
选择“保留”按钮以接受新页面**。
在新页面的顶部，选择“添加分区”按钮**。
选择“1 列”**。
在“选择要添加到此分区的组件”中，选择“窗体”****。
选择 + 新窗体。
在“添加窗体”屏幕上，按如下所示进行配置**：
- 选择表：** 事件
- 选择窗体：** 查看活动
- 为所选窗体的副本命名：** 查看活动
选择“数据”选项卡，并将“此窗体的数据”字段设置为“只读”****。
选择“确定”按钮。

让我们移除页面上的任何其他分区，因为我们不需要它们。
选择刚添加的窗体下方的分区**。在出现的工具栏上，选择“更多”(…)，然后选择“删除”**。
重复上一步，从页面中移除剩余分区。
在左侧的“主导航”下，选择所创建的新页面旁边的省略号****。
从出现的菜单中选择“页面设置”**。
按如下所示配置页面设置：
- 名称： 查看活动
- 部分 URL：** 查看活动
选择“确定”按钮。

最后，让我们再创建一个网页窗体，以用于编辑活动。
请确保你仍然选择了“页面”，然后单击“+ 页面”按钮****。
在“描述页面以创建它”屏幕中，输入**：Add a Blank Page named Edit Event. 选择“发送”按钮**。
选择“保留”按钮以接受新页面**。
在新页面的顶部，选择“添加分区”按钮**。
选择“1 列”**。
在“选择要添加到此分区的组件”中，选择“窗体”****。
选择 + 新窗体。
在“添加窗体”屏幕上，按如下所示进行配置**：
- 选择表：** 事件
- 选择窗体：** 创建活动
- 为所选窗体的副本命名：** 编辑活动
选择“数据”选项卡，并将“此窗体的数据”设置为“更新现有记录”****。
选择“确定”按钮。

让我们移除页面上的任何其他分区，因为我们不需要它们。
选择刚添加的窗体下方的分区**。在出现的工具栏上，选择“更多”(…)，然后选择“删除”**。
重复上一步，从页面中移除剩余分区。
选择“确定”按钮。

任务 5：创建显示活动列表的页面

现在我们已经定义了要用于管理记录的必要窗体，接下来将创建一个页面视图来显示这些记录。

选择“+ 页面”按钮**。
在“描述页面以创建它”屏幕中，输入**：Add a blank page called events. 选择“发送”按钮**。
选择“保留”以接受新页面**。
在新页面的顶部，选择“添加分区”按钮**。
选择“1 列”**。
在“选择要添加到此分区的组件”中，选择“更多”按钮 (…)****。在“已连接数据”组下，选择“列表”**。
在“添加列表”屏幕中，选择“设置”选项卡，并按如下所示进行配置****：
- 选择表：** 事件
- 选择数据视图：** 有效活动、无效活动
- 为列表命名：**Events
选择“操作”选项卡并按如下所示进行配置**：
- 创建新记录：** 启用
  - 目标类型：** 窗体
  - 窗体：** 创建活动
  - 显示标签：**Create New Event
- 查看详细信息：** 启用
  - 目标类型：** 窗体
  - 窗体：** 查看活动
  - 显示标签：**See Event Details
- 编辑记录：** 启用
  - 目标类型：** 窗体
  - 窗体：** 编辑活动
  - 显示标签：**Edit Event
选择“完成”。**

任务 6：更新权限

为了确保用户只看到与其相关的数据，组织可以指定表权限。在此任务中，我们将创建非常基本的权限，即向任何人提供访问权限。

在“主导航”下，选择“活动”页****。
选择“活动”列表，然后单击“+ 新建权限”按钮****。
按如下所示配置权限：
- 名称： 事件
- 表：事件
- 访问类型：** 全局访问
将“权限”设置为“读取”****。
选择“添加角色”，然后选择“管理员”、“匿名用户”和“经过身份验证的用户”角色******。
选择“保存”按钮。**
这时出现一个屏幕，其中显示“任何人可以看到该数据”，选择“保存”****。

让我们对活动窗体页面重复此过程。我们将从“新建活动”页开始**
在“主导航”下，选择“新建活动”页****。
选择“更新权限”按钮**。
按如下所示配置权限：
- 名称： 创建活动
- 表：事件
- 访问类型：** 全局访问
将“权限”设置为“读取”和“创建”****。
选择“添加角色”，然后选择“管理员”、“匿名用户”和“经过身份验证的用户”角色******。
选择“保存”按钮，然后在弹出屏幕上再次选择“保存”****。

接下来，我们将为“编辑活动”屏幕进行设置**。
在“主导航”下，选择“编辑活动”页****。
选择“更新权限”按钮**。
按如下所示配置权限：
- 名称： 创建活动
- 表：事件
- 访问类型：** 全局访问
将“权限”设置为“读取”和“更新”****。
选择“添加角色”，然后选择“管理员”、“匿名用户”和“经过身份验证的用户”角色******。
选择“保存”按钮，然后在弹出屏幕上再次选择“保存”****。

任务 7：更新站点导航

现在我们已经按所需方式设置了页面和项目的格式，接下来将相应地调整站点导航。

在“主导航”下，选择“活动”页旁边的省略号****。
从显示的菜单中，选择“上移”**。
重复该步骤，直到“活动”页位于“联系我们”页下方****。
确保“新建活动”页位于“活动”页正下方**。（如果不是，请移动“新建活动”页，直到它位于此处。）
在“新建活动”页上，选择“省略号”按钮****。
从显示的菜单中，选择“将此设为子页面”**。
选择“查看活动”旁边的省略号，然后选择“移动到其他页面”****。
选择“编辑活动”旁边的省略号，然后选择“移动到其他页面”****。
在“命令栏”上，选择“同步”按钮****。

任务 8：预览和优化站点

创建站点后，需要审查该站点，确保它满足业务需求和要求，以便你可以决定是否进行任何必要的优化。可以在桌面和移动模式下预览站点

在设计工作室中，选择“主页”按钮**。
单击命令栏中的“预览”**。
选择“桌面”以在浏览器中预览站点**。
在“桌面”模式下查看时，请审查站点的以下方面，例如**：
- 布局和导航。
- 品牌元素，如颜色、字体和徽标。
测试完站点后，关闭浏览器标签页以返回到站点编辑器**。

接下来，我们将预览站点在移动设备上的显示效果。
再次选择“预览”按钮**。
扫描移动设备中显示的 QR 码**。
站点将在移动设备上打开（注意：系统可能会提示你登录，如果是，请提供登录凭据）**。
与在“桌面”模式下的操作一样，请审查站点的以下方面，例如：
- 布局和导航。
- 品牌元素，如颜色、字体和徽标。
完成测试后，关闭浏览器标签页以返回到站点。