练习 - 将数据源添加到画布应用和设计功能页

  • 8 分钟

在 Power Apps 中，可以将数据连接到现有的应用程序或从头开始构建的应用程序。 你的应用可以连接到 SharePoint、Microsoft Dataverse、Salesforce、OneDrive 或任何其他数据源。

我们将 SharePoint 用作此应用程序的主要数据源。 你可以连接到 SharePoint 网站以从自定义列表自动生成应用，在将数据添加到现有应用之前创建连接，或从头开始生成应用。

创建 SharePoint 站点

  1. 使用Microsoft组织凭据登录到 SharePoint 门户 。

  2. 在 SharePoint 起始页上选择 “+ 创建网站 ”以创建 SharePoint 网站。

    显示在 SharePoint 起始页上创建网站的屏幕截图。

  3. 在 SharePoint 起始页上，你将找到以下信息：

    • 选择网站类型;选择是通信网站或团队网站。 选择“通信网站”。

    • 输入站点的合适名称;例如 ，Easy Sales。

    • 根据需要添加 网站说明 （可选）。

    • 从下拉列表中选择所选 语言 。

  4. 选择 “完成 ”以创建 SharePoint 网站以加载数据。

    更新网站详细信息的屏幕截图。

新式 SharePoint 网站已创建并可供几秒钟使用。 现在可以在新创建的网站中创建列表、文档库、页面等。

注释

如果选择了“团队网站”，则还将创建一个 Microsoft 365 组。

创建 SharePoint 列表

SharePoint 列表收集数据，其结构类似于表、电子表格或简单数据库。 它可以包含许多不同类型的信息，例如数字、文本、附件，甚至图像。

对于 Easy Sales 应用程序，我们将创建一个列表，其中包含所有产品类别的详细信息： 沙发、 椅子、 桌子和 地毯。

  1. 在名为 Easy Sales 的新创建的 SharePoint 网站中，选择“ + 新建 ”下拉列表，然后选择 “列表 ”以创建 SharePoint 列表。

    选择列表的屏幕截图。

  2. 在“ 创建列表 ”窗口中，选择 “空白列表 ”以从头开始创建 SharePoint 列表。

    选择“空白列表”的屏幕截图。

  3. 配置“ 创建 ”窗格，如下所示：

    • 输入列表的合适名称;例如 ，Easy Sales。

    • 根据需要填写说明（可选）。

    • 选中 “在网站导航中显示 ”复选框。

    • 选择 创建。

      “创建窗格”的屏幕截图。

将数据添加到 SharePoint 列表

创建列表后，可以添加数据。 此处，“data”表示任何特定产品的详细信息。 产品详细信息包括以下信息：名称、图像、价格、尺寸、重量、颜色、主要材料、面积、高度和 3D 模型/图像（在混合现实中查看）。

  1. 在创建的 简易销售 列表中，选择 + 添加列 以添加特定类型的列。 下面的列表显示了需要创建的列，其名称和类型采用以下格式： 列 - 列类型的名称。

    • 名称：单行文本
    • ImageLink：单行文本
    • 价格：单行文本
    • 维度：单行文本
    • 权重：单行文本
    • 颜色：单行文本
    • PrimaryMaterial：单行文本
    • 高度：数字
    • 深度：数字
    • 宽度：数字
    • 每平方厘米价格：数量
    • ProductCategory：单行文本
    • FileType：单行文本

    从下拉列表中选择列类型;例如，选择 单行文本。

    选择单行文本的屏幕截图。

    在 “创建列 ”选项卡中输入列的详细信息，然后选择“ 保存”。

    创建列的屏幕截图。

    对上述列表中的其余列重复相同的过程。

    注释

    创建 SharePoint 列表后，将创建一个默认 的“标题 ”列，你可以将其重命名为 “名称”。

  2. 添加列后，必须添加这些列下的实际数据。 通过下载包含所有四个列表的所有产品详细信息的自定义文件夹，开始向列添加数据。 若要访问数据，请选择以下链接，选择页面右上角的“ 更多文件作 ”按钮（...），然后选择“ 下载”。

    Power Apps 自定义文件夹

  3. 选择 “+ 新建 ”以添加项目，然后填写下载的 Excel 文件中提供的所需详细信息。 选择 “保存” 以保存输入的详细信息。

    在网格视图中选择“新建”或“编辑”以添加新项的屏幕截图。

    注释

    网格视图允许向不同的行或列自由添加信息。

  4. 开始在其各自的列中添加数据，如图所示：

    包含添加详细信息的 sharepoint 列表的屏幕截图

    注释

    如果要包含自己的图像，可以在 ImageLink 列下添加 Internet 上可用的公共图像的图像链接。 可以通过右键单击并选择 “复制映像地址 ”选项来获取图像链接。

    注释

    你不需要 地毯 类别列表的高度、深度和宽度值。 此产品类别将采用“在混合现实中度量”会话期间测量的面积值，并在计算出的面积后面给出地毯的价格。 但是，我们添加了 Price/cm2 列来帮助计算过程。

创建连接

既然应用程序所需的所有数据都存储在 SharePoint 列表中，我们将在 Power Apps 中建立连接。 建立连接后，即可通过应用程序轻松访问 SharePoint 数据。

  1. 若要开始创建连接，请登录到 Power Apps ，然后在左侧导航栏中选择 “连接 ”。 然后选择左上角附近的 “+ 新建连接 ”。

  2. 选择“SharePoint”。 我们正在选择 SharePoint ，因为我们已将所需数据存储在 SharePoint 列表中。

    选择 Sharepoint 的屏幕截图。

  3. 若要连接到 SharePoint Online，请选择“ 直接连接”（云服务），然后选择“ 创建”，然后在出现提示时提供凭据。

    选择“创建”的屏幕截图。

  4. 连接已创建，你可以从头开始生成应用。

    注释

    即使创建了连接，您仍然可以添加、编辑和删除存储在 SharePoint 列表中的数据。 所有更改都会通过连接反映在应用程序中。

让我们开始基于 SharePoint 数据生成 Easy Sales 应用程序，然后根据需要从其他源添加数据。 按照此过程，你将能够设计应用程序的一些主页。 例如，你将了解如何设计初始屏幕、产品页面和产品列表页。 我们还将通过 Power Apps 画廊控件访问存储在 SharePoint 列表中的数据。

打开空白应用

  1. 转到 Power Apps 主页，然后在左侧菜单中选择“ 创建 ”。 选择“空白应用”，然后在“空白画布”应用下选择“创建”。

    从空白选择画布应用的屏幕截图。

  2. 指定应用的名称;例如 Easy-Sales。 选择 “电话”，然后选择“ 创建”。

    指定应用名称和选择“创建”的屏幕截图。

    Power Apps Studio 为手机创建空白应用。

    注释

    虽然你可以从头开始为各种设备设计应用，但本主题重点介绍如何设计适用于手机的应用。

  3. 如果打开“欢迎使用 Power Apps Studio”对话框，选择“跳过”。

    选择跳过选项的屏幕截图。

连接到数据

若要在 Power App 中包含数据，必须通过应用程序中的连接器连接到数据。 由于我们已将所有数据存储在 SharePoint 列表中，因此我们将选择 SharePoint 作为连接器之一。

  1. 在 Power Apps Studio 的左侧，选择 “数据 ”选项。

  2. 打开 “数据 ”窗格后，选择 “添加数据 ”按钮以连接到数据。

  3. 在 “选择数据源 ”窗口中，展开“ 连接器 ”部分，然后选择 “SharePoint ”选项。

    选择“添加数据和 SharePoint”选项的屏幕截图。

  4. 在上一个练习中，我们已经创建了一个连接。 选择创建的连接以将数据添加到应用程序。 选择在“Easy Sales”名称下创建的 SharePoint 网站。

    选择“轻松销售”的屏幕截图。

  5. 选择 Easy Sales SharePoint 网站后，将显示在该网站上创建的所有列表。 接下来，选择与应用程序相关的 SharePoint 列表，然后单击“ 连接”。

    选择列表的屏幕截图。

  6. 所有必需的数据都已连接，并已准备好在应用程序中使用。 现在可以开始生成应用程序。

创建启动画面

  1. 选择 Power Apps Studio 左侧的“树视图”选项。 Power Apps Studio 中应已有一个空白屏幕;如果不是，请在“ 开始 ”选项卡上，选择 “新建”屏幕 旁边的向下箭头，打开屏幕类型列表。 然后选择 “空白 ”以创建空白屏幕。

    创建新屏幕的屏幕截图。

  2. 选择屏幕名称旁边的三个点图标（...），然后选择“重命名”选项，将屏幕重命名为初始屏幕。

    重命名界面的屏幕截图。

  3. 选择新创建的屏幕以在屏幕右侧的“ 属性 ”选项卡中更改其属性。

  4. 选择 背景图像 属性旁边的下拉列表，将图像添加到屏幕。 选择 “+ 添加图像文件 ”以选择下载的徽标文件。

    添加简易销售徽标的屏幕截图。

  5. 将图像位置设置为 “拟合 ”，使整个图像适合指定大小。 “拟合”选项按比例缩放图像，不会裁剪图像。

    将 Easy Sales 徽标添加到初始屏幕的屏幕截图。

  6. 在 “插入 ”选项卡上，展开“ 输入 ”下拉列表，然后选择“ 计时器”。 然后，在屏幕上拖动按钮，并将其放置在所需位置。

    添加计时器的屏幕截图。

  7. 若要编辑某些计时器属性，可以使用左上角的 “属性 ”下拉列表或使用 “属性 ”窗格。 设置以下属性：

    • AutoStart： true

    • 持续时间：2000

    • 可见：false

      更新计时器属性的屏幕截图。

      注释

      默认情况下，持续时间以毫秒为单位。 由于 1 秒 = 1000 毫秒，我们将输入 2000 作为持续时间的值。

  8. 我们希望初始屏幕仅显示两秒钟，然后转换到主页。 像上一步一样创建 空白 屏幕，并将其重命名为 主页。 稍后，选择添加到 启动画面 的计时器按钮，并配置 OnTimerEnd 属性。 将 false 替换为以下内容：

    Navigate('Home Page',ScreenTransition.Fade)

    配置 OnTimerEnd 属性的屏幕截图。

  9. 通过导航到 “文件>保存”保存应用程序。 接下来，选择“ 云 ”选项，然后选择“ 保存”。

创建主页

  1. 选择之前创建的 主页 。 若要插入四个按钮，请导航到“ 插入”选项卡 ，然后选择 “按钮 ”选项，将按钮添加到屏幕。 根据需要调整这些按钮的大小和位置。 将它们分别重命名为 Sofas_button、 Chairs_button、 Tables_button和 Carpets_button。

    添加按钮的屏幕截图。

  2. 更改按钮的显示文本，以指示产品类别，如 沙发、椅子、桌子和地毯。

    编辑显示文本的屏幕截图。

  3. 我们将使用这些按钮导航到各种类别下的产品列表。 为此，我们需要根据 产品类别从 SharePoint 列表中筛选出产品。 创建两个新的空白屏幕，并将它们分别重命名为产品和地毯。

    添加新屏幕的屏幕截图。

  4. 选择新创建的 Sofas_button 按钮并配置 OnSelect 属性。 选择按钮后，需要将我们带到在上一步中创建的产品列表页。 将 false 替换为以下代码：

    Navigate(Products,ScreenTransition.Cover, {ID:1});

    屏幕截图显示在“沙发”页中导航

    注释

    ID 是具有一些已分配值的上下文变量。 此值将传递给 Navigate 函数中提到的目标页面。 分配给变量的值根据 产品类别筛选出产品。

  5. 对其他三个按钮重复相同的过程。 同样，请确保在 Navigate 函数中提供正确的屏幕名称;例如，若要配置“椅子”、“表格”和“地毯”按钮的 OnSelect 属性，请使用 Navigate 函数，如下所示：

    Navigate(Products,ScreenTransition.Cover, {ID:2});

    Navigate(Products,ScreenTransition.Cover, {ID:3});

    Navigate(Carpets,ScreenTransition.Cover)

    小窍门

    若要保存进度，请选择顶部的“ 文件 ”选项卡，然后选择“ 保存 ”选项。 还可以使用 Ctrl+S 保存进度。

    注释

    Navigate 函数的默认语法为：Navigate（Screen [， Transition [， UpdateContextRecord]]] ）

    • 屏幕：必需。 要显示的屏幕。
    • 转换：可选。 要在当前屏幕和下一个屏幕之间使用的视觉转换。 默认值为“无”。
    • UpdateContextRecord：可选。 包含至少一个列的名称和每个列的值的记录。 此记录将更新新屏幕的上下文变量，就像传递给 UpdateContext 函数一样。

    小窍门

    可以通过按键盘上的 F5 键或单击 Power Apps Studio 右上角的 “播放 ”按钮来测试应用程序。

添加产品类别后，我们将在每个类别下显示产品列表。 在 Power Apps 中，我们使用库控件查看数据记录。

  1. 在产品屏幕上的插入选项卡中，选择库>垂直以将库控件添加到屏幕。

    添加相册的屏幕截图

  2. 将其重命名为 Gallery_products。 在左侧窗格的“ 属性 ”选项卡上，按如下所示配置 Items 属性：

    If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))

    连接 sharepoint 的屏幕截图

    我们根据产品类别筛选SharePoint列表中存储的产品。 上下文变量用于筛选过程。

  3. 通过在“属性”窗格中选择>来配置“图库”字段属性：

    • 将 Price 分配到 Subtitle1 标题。

    • 将 标题 设定为 Title1 标题。

      在产品页中配置字段的屏幕截图

    在分配上述字段时，你将观察到数据会在你的图库中得到反映。

  4. 根据需要调整 Gallery_products 的大小。 若要将 ImageLink 添加到 Image1 标题，请在图库中选择 Image，并在 属性 选项卡上通过添加以下代码行来配置 Image 属性：

    ThisItem.ImageLink

    在产品页中配置图像属性的屏幕截图

  5. 现在，选择“ 标签 ”选项，在屏幕顶部插入标签。 然后，按照图中所示自定义位置、颜色和文本显示：

    在产品页中添加标签的屏幕截图

  6. 在之前添加的标签上添加后退图标，以帮助用户在需要时导航到主页。 若要添加 “后退 ”图标，请展开 “图标 ”下拉列表，然后选择 “后退 ”图标。

    主页中“添加后退”图标的屏幕截图

  7. 根据需要正确定位 “后退 ”图标并更改其显示颜色。 通过添加以下内容配置其 OnSelect 属性：

    Navigate('Home Page',ScreenTransition.Cover)

    配置 OnSelect 属性的屏幕截图

  8. 为“地毯”页执行相同的步骤。 按以下方式配置添加到“地毯”页的库中的“项”属性：

    Filter('Easy Sales',ProductCategory = "Carpet")

    为“地毯”页执行相同步骤的屏幕截图

    小窍门

    若要保存进度，请选择顶部的“ 文件 ”选项卡，然后选择“ 保存 ”选项。 还可以使用 Ctrl+S 保存进度。

实现上述步骤后，下面是应用程序的外观。 该应用程序将包括出色的 初始屏幕、 主页和用于浏览产品的产品清单。

连接到数据源后的应用程序演示。