第 6 章：在应用中使用 Web API

Maria 和 Kiana 准备将应用与 Web API 合并在一起。 但是，在继续之前，他们决定咨询 IT 运营经理 Preeti。

了解 Web API 的 IT 运营管理要求

Preeti 担心应用和 Web API 必须是安全的，因为他们提供对存储在各种数据库中的敏感数据的访问权限。 Preeti 想要保证包括身份验证和授权，以阻止对信息的无保证访问。 Preeti 还了解到公司正在快速扩展，并且管理客户、约会、零件和知识库时涉及的数据量在近期内可能会呈指数级增加。 因此，解决方案需要可缩放。

Kiana 向 Preeti 解释到，当前使用 Azure 应用服务实施 Web API。 此服务支持许多 Preeti 可使用 Azure 门户配置的身份验证提供程序。 Preeti 对 Microsoft Entra ID 特别感兴趣，因为 VanArsdel 希望在近期内向许多其他公司系统推出此形式的身份验证。

应用服务还提供水平和垂直可扩展性。 如果需要，Preeti 可以通过升级 Web 应用的应用服务计划来纵向扩展可用于 Web API 的资源：

Preeti 还可以通过配置自动缩放来安排系统进行横向扩展。 通过应用服务，运营经理可以定义自动缩放规则，确定当负载增加时系统应在更多实例上横向扩展的条件，或者在需求下降时再次缩小。 Preeti 还可以将抢先式自动缩放配置为根据日程安排执行：

IT 运营经理角色的关键部分是关注系统如何发展，并确保基础支持结构能够处理未来的扩展和变化。 Preeti 知道由 Kiana 开发的 Web API 将来可能会扩展并用于其他 VanArsdel 系统。 Preeti 需要能够管理和控制开发人员请求使用 Web API 的方式，能够保护它作为一项宝贵的资源并监视其用途。 因此，Preeti 决定使用 Azure API 管理服务保护 Web API。

API 管理为 Web API 提供了额外的一层安全性，同时还对客户端可以访问哪些操作进行详细监视和控制。 使用 API 管理，Preeti 可以管理资源利用，限制低优先级客户端的性能，以确保更高优先级的关键应用的服务速度更快。

有关 API 管理提供的服务的信息，请转到关于 API 管理。

创建 API 管理服务

使用以下步骤，Preeti 通过 Azure 门户创建了 API 管理服务：

1. 登录到 Azure 门户，然后在主页上，选择创建资源。

   

2. 在搜索市场文本框中，输入 API 管理，然后选择输入。

3. 在 API 管理页面上，选择创建。

   

4. 在创建 API 管理页面上，输入以下值，然后选择查看 + 创建：

   • 订阅：选择您的订阅
   • 资源组：webapi_rg（这是您为应用服务创建的相同资源组）
   • 区域：选择最近的区域
   • 资源名称：输入服务的唯一名称
   • 组织名称：VanArsdel
   • 管理员电子邮件：itadmin@vanarsdel.com
   • 定价层：开发人员（无 SLA）

   备注

   不要为生产系统使用开发人员定价层。

   

5. 在验证页面上，选择创建，等待 API 管理服务创建。

   备注

   预配 API 管理服务可能需要 30 分钟或更多时间；请耐心等待。

通过 API 管理发布 Web API

创建 API 管理服务后，Preeti 通过以下步骤发布了 Web API，使其可供其他服务和应用程序访问：

1. 在 Azure 门户中，转到 API 管理服务。

2. 在 API 管理服务页面上，在左侧窗格上的 API 下，选择 API：

   

3. 在添加新 API 窗格中，选择 OpenAPI：

   

4. 在从 OpenAPI 规范创建对话中，输入以下值，然后选择创建：

   • OpenAPI 规范：https://<webapp name>.azurewebsites.net/swagger/v1/swagger.json，其中 <webapp name> 是托管 Web API 的应用服务的名称
   • 显示名称：现场工程师 API
   • 名称：field-engineer-api
   • API URL 后缀：保留为空
   • 基本 URL：使用默认 URL

   

5. 创建现场工程师 API 后，为 API 选择设置选项卡，将 Web 服务 URL 设置为 https://<webapp name>.azurewebsites.net，然后选择保存：

   

6. 在测试选项卡上，选择 GET api/Appointments URI，然后选择发送：

   

7. 验证请求是否成功（HTTP 返回代码为 200 确定），并确认请求返回在响应正文中包含约会列表的结果：

   

从应用连接到 API 管理

现在，Kiana 和 Maria 可以协作通过 API 管理服务将使用 Power Apps 生成的应用连接到 Web API。

第一个任务是创建应用用于与 API 管理通信的自定义连接器。 这包括将 API 导出到用于创建应用的 Power Apps 环境，Kiana 按照如下方式执行此操作：

1. 在 Azure 门户中，转到 Preeti 创建的 API 管理服务的页面。

2. 在左侧窗格上的 API 下，选择 API。

3. 选择 现场工程师 API 的省略号按钮，然后选择导出。

   

4. 在导出 API 窗格上，选择 Power Apps 和 Power Automate：

   

5. 在将 API 导出到 PowerApps 窗格上，选择您在其中创建了原型应用的 Power Apps 环境（在下图中，为 Maria），然后选择导出。

   

6. 导出 API 后，选择现场工程师 API。 在设置页面上，向下滚动到订阅部分，清除所需订阅，然后选择保存。

   

原型应用为数据源使用了 Excel 工作薄。 现在，Web API 的自定义连接器可用，Maria 执行以下步骤以将连接器添加到应用：

1. 登录到 Power Apps。

2. 在左侧窗格上，展开数据，然后选择自定义连接器。 应该列出 field-engineer-api 自定义连接器。 选择创建连接。

   

3. 在 field-engineer-api 对话框中，选择创建。

   

4. 创建连接后，验证它是否显示在可用连接列表中。

   

5. 在左侧窗格上，选择应用，选择 VanArsdelApp，然后选择编辑。

   

6. 在左侧窗格上，选择数据选项卡。选择添加数据，选择连接器的省略号，然后选择刷新。

   

7. 在连接器列表中，选择 field-engineer-api 连接器。

   

8. 在 field-engineer-api 对话框中，选择 field-engineer-api 连接器。

   

9. 在数据窗格上，验证是否列出了 FieldEngineerApi 连接器。

   

更新应用以使用连接器：现场库存管理

现在，连接已添加到应用，Maria 可以修改屏幕以使用它替换 Excel 工作薄。 这涉及有条不紊地完成每个屏幕并更改数据源。 不需要进行任何其他更改。 Maria 从 BrowseParts 和 PartDetails 屏幕开始，如下所示：

1. 在应用的主屏幕上，选择零件按钮。 将 OnSelect 操作属性设置为以下公式。

   ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts());
   
   Navigate(BrowseParts, ScreenTransition.Fade)
   

   ClearCollect 函数创建名为 partsCollection 的新集合，并使用通过在 FieldEngineerAPI 连接中调用 getboilerparts 操作生成的数据填充该集合。

   

   备注

   较好的做法是将数据检索到集合中并从需要信息的任何屏幕引用该集合。 此方法可以避免不同的屏幕重复运行相同查询并获取相同数据。

2. 选择 F5 以预览应用。

3. 在主屏幕上，选择零件。 此操作将创建 partsCollection 集合。 关闭预览窗口，并返回到 Power Apps Studio。

   备注

   此步骤的目的是使您能够在编辑 BrowseParts 屏幕时，通过以下步骤查看数据。

4. 在 BrowseParts 屏幕中选择 BrowseGallery1 控件。 在项目属性的公式中，将对 [@Table1] 数据源的引用替换为 partsCollection。

   此更改将导致某些错误。 这是因为原始 Excel 工作簿中的字段名称使用大写形式（名称、CategoryID 和概述），而 Web API 响应正文中返回的属性名称采用小写形式。 更改这些引用以使用小写形式。 公式应如下所示。

   SortByColumns(Search(FieldEngineerApi.getapiboilerparts(), TextSearchBox1.Text, "name", "categoryId", "overview"), "name", If(SortDescending1, Descending, Ascending))
   

   

5. 在树视图窗格上，选择 IconRefresh1 控件。 将 OnSelect 操作更改为公式 ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts())。

   备注

   此操作的原始公式调用刷新函数以使用与原始数据源的连接重新填充数据。 您无法将刷新与运行函数以检索数据的连接结合使用，因此它不适用于 FieldEngineerApi.getapiboilerparts()。 此步骤中的解决方案使用最新数据重新填充 partsCollection 集合。

6. 在树视图窗格上，展开 BrowseGallery1 控件，然后选择 Body1 控件。 将文本属性更改为 ThisItem.overview。

7. 在树视图窗格上，选择 Subtitle1 控件。 将文本属性更改为 ThisItem.categoryId。

8. 在树视图窗格上，选择标题控件。 将文本属性更改为 ThisItem.name。

9. 在树视图窗格上，在 PartDetails 屏幕中选择 DetailForm1 控件。 将 DataSource 属性从 [@Table1] 更改为 partsCollection。

10. 在树视图窗格上，在 DetailForm1 下选择 Name_DataCard1 控件。 将默认属性更改为 ThisItem.name。

    

11. 将 CategoryID_DataCard1 控件的默认属性更改为 ThisItem.categoryId。

12. 将 Overview_DataCard1 控件的默认属性更改为 ThisItem.overview。

13. 将 Price_DataCard1 控件的默认属性更改为 ThisItem.price。

14. 将 NumberInStock_DataCard1 控件的默认属性更改为 ThisItem.numberInStock。

15. 将 Image_DataCard1 控件的默认属性更改为 ThisItem.imageUrl。

16. 在左侧窗格的数据选项卡上，右键单击 Table1 数据连接，然后选择删除以将其从应用中删除。 不再需要此连接。

    

17. 保存应用。

    备注

    您可以通过选择 Ctrl+S 快速保存应用，而无需使用文件菜单。

18. 选择 F5 以预览应用。 浏览零件和零件详细信息屏幕应该完全像以前一样运行，但此时它们通过 Web API 从 InventoryDB Azure SQL 数据库（而不是从本地 Excel 文件）检索数据。

19. 关闭预览窗口，并返回到 Power Apps Studio。

更新应用以使用连接器：现场计划和注释

Maria 继续使用 BrowseAppointments、AppointmentDetails 和 EditAppointment 屏幕。 这些屏幕显示的数据当前源自另一个 Excel 工作簿中的约会表。

1. 在应用的主屏幕上，将 OnVisible 操作设置为以下公式。

   ClearCollect(appointmentsCollection, Sort(Filter(FieldEngineerAPI.getapiappointments(), DateDiff(Today(), startDateTime) >= 0), startDateTime))
   

   该公式将约会数据检索到 appointmentsCollection 集合中。 筛选约会以检索当前日期或之后安排的访问。

2. 选择显示下一个约会时间的标签控件。 将文本属性设置为 Text(First(appointmentsCollection).startDateTime, ShortTime24)。

3. 选择显示下一个约会日期的标签控件。 将文本属性设置为 Text(First(appointmentsCollection).startDateTime, LongDate)。

4. 选择显示下一个约会的客户姓名的 label 控件。 将 Text 属性设置为 First(appointmentsCollection).customer.name。

5. 选择 F5 以预览应用。 在主屏幕上，选择约会。 此操作将创建 appointmentsCollection 集合。 关闭预览窗口，并返回到 Power Apps Studio。

6. 在树视图窗格上，在 BrowseAppointments 屏幕中选择 BrowseAppointmentsGallery 控件。 将项目属性中的公式设置为以下公式。

   Sort(Filter(appointmentsCollection, StartsWith(customer.name, TextSearchBox1\_1.Text)), startDateTime)
   

   此公式将按客户名称筛选屏幕上显示的数据，使用户可以输入客户的名称。 约会按日期和时间顺序显示。

7. 在树视图窗格中，展开 BrowseAppointmentsGallery 控件，并选择 Title1_1 控件。 将文本属性更改为以下内容。

   Text(ThisItem.startDateTime, LongDate)
   

   此公式显示约会的 startDateTime 字段的日期部分。

8. 在树视图窗格中，展开 BrowseAppointmentsGallery 控件，然后选择 Subtitle1_1 控件。 将文本属性更改为以下内容。

   Text(ThisItem.startDateTime, ShortTime24)
   

此公式显示 startDateTime 字段的时间元素。

9. 在树视图窗格中，展开 BrowseAppointmentsGallery 控件，然后选择 Body1_1 控件。 将文本属性更改为以下内容。

   ThisItem.customer.name
   

10. 在树视图窗格中，选择 BrowseAppointments 页面中的 IconRefresh1_1 控件。 将 OnSelect 操作设置为以下公式。

    ClearCollect(appointmentsCollection, Sort(Filter(FieldEngineerAPI.getapiappointments(), DateDiff(Today(), startDateTime) >= 0), startDateTime));
    

11. 在树视图窗格中，展开 AppointmentDetails 屏幕，然后选择 DetailForm1_1 控件。 将 DataSource 属性设置为 appointmentsCollection。

12. 在树视图窗格上，选择 IconEdit1 控件。 修改 DisplayMode 属性中的公式以测试 appoinmentsCollection 集合。

    If(DataSourceInfo(**appointmentsCollection**, DataSourceInfo.EditPermission), DisplayMode.Edit, DisplayMode.Disabled)
    

13. 在树视图窗格中，展开 DetailForm1_1 屏幕，然后选择 Customer Name_DataCard1 控件。 将默认属性更改为 ThisItem.customer.name。

14. 更改剩余数据卡的默认属性，如下所示：

    • Customer Address_DataCard1：ThisItem.customer.address
    • Contact Number_DataCard1：ThisItem.customer.contactNumber
    • Problem Details_DataCard1：ThisItem.problemDetails
    • Status_DataCard1：ThisItem.appointmentStatus.statusName
    • Notes_DataCard1：ThisItem.notes
    • Image_DataCard1_1: ThisItem.imageUrl

15. 在树视图窗格上，展开 EditAppointment 屏幕，然后选择 EditForm1 控件。 将 DataSource 属性设置为 appointmentsCollection。

16. 在树视图窗格中，展开 EditForm1 控件，然后选择 Customer Name_DataCard3 控件。 将默认属性更改为 ThisItem.customer.name。

17. 更改剩余数据卡的默认属性，如下所示：

• Contact Number_DataCard2：ThisItem.customer.contactNumber；此外，将 MaxLength 属性更改为 20
• Problem Details_DataCard2：ThisItem.problemDetails
• Status_DataCard5：ThisItem.appointmentStatus.statusName
• Notes_DataCard3：ThisItem.notes
• Image_DataCard2：ThisItem.imageUrl

18. 在树视图窗格中，展开 Problem Details_Card2 控件。 重命名 DataCardValueX（X 将是一个数字）字段更名为 ProblemDetailsValue。 对以下数据卡中的 DataCardValueX 控件重复此过程：

    • Status_DataCard5：StatusValue
    • Notes_DataCard3：NotesValue

    备注

    将在下一章处理图像控件。

19. 选择 ProblemDetailsValue，然后将 MaxLength 属性设置为 100。

20. 在树视图窗格上，在 EditAppointment 屏幕上选择 IconAccept1 控件。 将 OnSelect 操作属性设置为以下公式。

    FieldEngineerAPI.putapiappointmentsid(BrowseAppointmentsGallery.Selected.id, {problemDetails:ProblemDetailsValue.Text, statusName:StatusValue.Selected.Value, notes:NotesValue.Text, imageUrl:""});
    
    Remove(appointmentsCollection, First(Filter(appointmentsCollection, id=BrowseAppointmentsGallery.Selected.id)));
    
    Set(appointmentRec, FieldEngineerAPI.getapiappointmentsid(BrowseAppointmentsGallery.Selected.id));
    
    Collect(appointmentsCollection, appointmentRec);
    
    Navigate(AppointmentDetails, ScreenTransition.None);
    

    此公式在 Web API 中为约会控制器调用 PUT 操作。 它将当前约会的约会 ID 作为第一个参数传递，后跟用户可能在屏幕上已修改的详细信息。 详细信息作为 JSON 对象传递。 “删除”、“设置”和“收集”语句使用保存到数据库的数据更新 appointmentsCollection 集合。

    备注

    在这种情况下，不要使用 ClearCollect 函数删除和刷新整个集合，因为如果仅更改一个记录（示例），这将浪费时间。

21. 在树视图窗格上，在 EditAppointment 屏幕上选择 IconAccept1 控件。 将 OnSelect 操作属性设置为以下内容。

    ResetForm(EditForm1);
    
    Navigate(AppointmentDetails, ScreenTransition.None);
    

22. 在左侧窗格的数据选项卡上，右键单击约会数据连接，然后选择删除以将其从应用中删除。

23. 保存应用。

24. 选择 F5 以预览应用。 在主屏幕中，转到约会屏幕，选择并编辑约会，然后保存更改。 验证是否已更新约会。

25. 关闭预览窗口，并返回到 Power Apps Studio。

为现场知识库创建 Azure 认知搜索服务

应用中的知识库屏幕当前未附加到任何数据源。 Web API 包括用于查看和更新 KnowledgeDB 数据库中的提示、BoilerParts 和工程师表的操作。 但是，应用中查询屏幕的目的是支持通过所有这些表进行搜索。 这些表中的数据量可能会快速增加，因此 Maria、Kiana 和 Preeti 决定部署 Azure 认知搜索以支持此功能。 应用可以通过自定义连接器提交查询并接收 Azure 认知搜索的结果。

如果要搜索的数据包含在单一数据库实体中，Azure 认知搜索最有效。 Kiana 在 KnowledgeDB 数据库中创建一个视图，以显示提示、BoilerParts 和工程师表的统一视图，如下所示：

1. 在 Azure 门户中，转到 KnowledgeDB SQL 数据库页面。

2. 在左侧窗格上，选择查询编辑器，然后使用密码 Pa55w.rd 以 sqladmin 身份登录到数据库。

   

3. 在查询窗口中，输入以下语句，然后选择运行。

   CREATE OR ALTER VIEW [dbo].[Knowledge] AS
   SELECT T.Id, T.Subject, T.Body, B.Name, B.Overview
   FROM [dbo].[Tips] T INNER JOIN [dbo].[BoilerParts] B
   ON B.Id=T.KnowledgeBaseBoilerPartId
   

   

   验证已成功创建知识视图。

4. 在左侧窗格上，选择连接字符串。 记下 ADO.NET 连接字符串；您将在配置 Azure 认知搜索时需要它。

   

Preeti 与 Kiana 协作配置 Azure 认知搜索服务的新实例，以在知识视图中的行上执行搜索，如下所示：

1. 在主页上，在 Azure 门户中，选择 + 创建资源，输入 Azure 认知搜索，选择输入，然后选择创建。

   

2. 在新搜索服务页面上，输入以下设置，然后选择查看 + 创建：

   • 订阅：选择您的 Azure 订阅
   • 资源组：webapi_rg
   • 服务名称：输入服务的唯一名称
   • 位置名称：选择最近的区域
   • 定价层：免费

3. 在验证页面上，选择创建，等待服务预配。

4. 转到新搜索服务的页面，选择概述，记下 URL（稍后当您为 Power Apps 创建自定义连接器时，将需要它），然后选择导入数据。

   

5. 在导入数据页面上，在数据源下拉列表框中，选择 Azure SQL 数据库。

   

6. 在连接到您的数据页面上，指定以下设置：

   • 数据源：Azure SQL 数据库
   • 数据源名称：knowledgebase
   • 连接字符串：为 KnowledgDB 数据库输入前面记录的 Azure SQL 数据库连接字符串；在此字符串中，确保将密码设置为 Pa55w.rd
   • 将用户 ID 和密码字段保留为其默认值；将从连接字符串中检索这些项目

7. 选择测试连接。 确保测试成功，在表/视图下拉列表框中选择[知识]，然后选择下一步：添加认知技能（可选）。

   

8. 在添加认知技能（可选）页面上，选择跳转到：自定义目标索引。

9. 在自定义目标索引页面上，为所有列选择可检索，为主题、正文、名称和概述选择可搜索。 选择下一步：创建索引器。

   

10. 在创建索引器页面上，将索引器名称更改为 knowledgebase-indexer。 对于日程安排，选择每小时，将高水印列设置为 ID，然后选择提交：

    

11. 若要测试索引器，请在搜索服务的概述页面上，选择搜索资源管理器：

    

12. 在查询字符串字段中，输入要在知识库中搜索的字词，然后选择搜索。 搜索服务应生成在主题、正文、名称或概述字段中具有匹配项的文档列表，然后在结果窗格中显示它们。 记下请求 URL 和示例结果；稍后当您设置 Power Apps 客户连接器时，您将需要这些项目作为示例请求和响应。

    

为 Azure 认知搜索服务创建自定义连接器

现在，Kiana 可以创建 Power Apps 用于将搜索请求发送到搜索服务的自定义连接器。 Kiana 使用 Power Apps Studio 执行此操作，如下所示：

1. 登录到 Power Apps。

2. 在左侧窗格上，展开数据，然后选择自定义连接器。 在右侧窗格上，选择 + 新建自定义连接器，然后选择从空白创建：

   

3. 在从空白创建对话框中，将新连接器名称设置为 VanArsdelKBConnector，然后选择继续：

   

4. 在常规信息页面上，输入描述，然后将架构设置为 HTTPS。 在主机框中，输入搜索服务的 URL（您在前面已记下此 URL），但没有 https:// 前缀，然后选择安全性。

   

5. 在安全性页面上，在身份验证下拉列表框中，选择 API 密钥。 在参数标签字段中，输入 api-key。 在参数名称字段中，输入 api-key。 选择定义。

   

6. 在定义页面上，选择新建操作。 在摘要字段中，输入查询。 在描述字段中，输入查询知识库。 在操作 ID 字段中，输入查询。 在请求下，选择 + 从示例导入。

   

7. 在从示例导入对话框中，输入以下值，然后选择导入：

   • 谓词：GET
   • URL：提供前面在搜索资源管理器中测试搜索服务时记下的示例请求 URL
   • 标头：Content-type

   

8. 返回定义页面，向下滚动到查询部分，选择搜索旁边的省略号按钮，然后选择编辑。

   

9. 在编辑屏幕上，在参数部分的默认值字段中，输入星号 (*)。 将其他字段保留为其默认值，然后选择返回。

   

10. 在定义页面上，在查询部分中，搜索 api-version 旁边的省略号按钮，然后选择编辑。

    

11. 在编辑屏幕上，在参数部分的默认值字段中，输入 2020-06-30-Preview（这是与 Azure 认知搜索的当前版本关联的版本）；您可以在前面记下的请求 URL 中查看该版本。 将为必填设置为是，并将可见性设置为内部。 将其他字段保留为其默认值，然后选择返回。

    

12. 在定义页面上，向下滚动到响应部分，然后选择 + 添加默认响应。

    ]

13. 在从示例导入对话框中，在标头字段中，输入文本 Content-type。 在正文字段中，输入在测试搜索服务时记录的示例结果，然后选择导入。

    

14. 在定义页面上，选择默认响应。

    

15. 在 Content-type 响应的描述字段中，输入 application/json，然后选择返回。

    

    备注

    如果已成功分析响应，此页面上的正文部分应显示响应的字段，例如正文、ID、名称、概述和主题。

16. 选择创建连接器。

    

应创建连接器，而不报告任何错误或警告。

更新应用以使用 Azure 认知搜索：现场知识库

现在，Maria 可以在应用中使用自定义连接器。 但首先，Maria 需要一个密钥，以授予连接到 Azure 认知搜索服务所需的特权。 Preeti 在 Azure 门户中从服务的密钥页面中获取密钥，并将其提供给 Maria。

Maria 在 Power Apps Studio 中编辑应用，并执行以下任务：

1. 打开 VanArsdelApp 应用以进行编辑。

2. 在视图菜单上，选择数据源，然后选择添加数据。

   

3. 在搜索框中，在选择数据源下，输入 Van。 应列出 VanArdelKBConnector 连接器。

   

4. 选择 VanArdelKBConnector 连接器。 在 VanArdelKBConnector 窗格中，输入 Preeti 为搜索服务提供的密钥，然后选择连接。

   

5. 在文件菜单上，保存并关闭应用，然后再次打开它。 当应用重新打开时，系统可能会提示您授权使用自定义连接器。

   备注

   必须执行此步骤才能启用自定义连接器。

6. 在树视图窗格上，展开知识库屏幕，然后选择 TextSearchBox2 控件。 为 OnChange 操作输入以下公式。

   If(!IsBlank(TextSearchBox2.Text), ClearCollect(azResult, VanArsdelKBConnector.Query({search: TextSearchBox2.Text}).value))
   

   此公式调用自定义连接器的查询操作，以搜索与用户在搜索框中键入的搜索词匹配的搜索词。 结果存储在名为 azResult 的集合中。

7. 在树视图窗格上，在知识库屏幕上，选择 BrowseGallery2 控件。 将项目属性设置为 azResult。

8. 展开 BrowseGallery2 控件，然后删除 Image4 控件。

9. 选择 Title2 控件。 设置以下属性：

   • 文本：ThisItem.Subject
   • X：24
   • 宽度：Parent.TemplateWidth - 104

10. 选择 Subtitle2 控件。 将文本属性设置为 ThisItem.Body。

11. 选择 F5 以预览应用。 在知识库屏幕上，输入搜索词，然后选择输入。 应显示知识库中匹配的文章。

    

    备注

    尚未创建详细信息屏幕，因此选择文章旁边的 > 图标不起作用。

12. 关闭预览窗口，并返回到 Power Apps Studio。

13. 在树视图窗格上，右键单击 PartDetails 屏幕，然后选择复制屏幕。 此操作将向应用添加另一个名为 PartDetails_1 的屏幕。

    

14. 在树视图窗格上，将 PartDetails_1 屏幕重命名为 KnowledgebaseDetails。

    在屏幕上选择 LblAppNameX 控件；将文本属性设置为“文章详细信息”（包括引号）。

15. 在树视图窗格上，在屏幕上选择 DetailFormX 控件。 设置以下属性：

    • 数据源：azResult
    • 项目：**BrowseGallery2.Selected**

    备注

    BrowseGallery2 是知识库屏幕上的浏览库。 在应用程序中，此库可能有不同的名称。

16. 在树视图窗格上，展开 DetailFormX 窗体，然后更改以下数据卡控件的名称：

    • Name_DataCard1_1: Name_DataCard
    • CategoryID_DataCard1_1: Subject_DataCard
    • Overview_DataCard1_1: Overview_DataCard
    • Price_DataCard1_1: Body_DataCard

17. 删除 NumberInStock_DataCard1_1 和 Image_DataCard1_1 控件。

18. 选择 Name_DataCard 控件。 将默认属性设置为 ThisItem.Name。

19. 选择 Subject_DataCard 控件。 设置以下属性：

    • DataField："Subject"
    • DisplayName："Subject"
    • 默认值：ThisItem.Subject

20. 选择 Overview_DataCard 控件。 将默认属性设置为 ThisItem.Overview。

21. 选择 Body_DataCard 控件。 设置以下属性：

    • DataField："Body"
    • DisplayName："Body"
    • 默认值：ThisItem.Body

22. 在 Body_DataCard 控件中选择 DataCardValueX 控件。 将文本属性设置为 Parent.Default。

23. 调整每个数据卡控件的大小，以使它们沿屏幕展开。

    

24. 选择屏幕标头上的后退箭头。 将 OnSelect 操作属性更改为 Navigate(Knowledgebase, ScreenTransition.None)。

25. 在树视图窗格上，选择知识库屏幕，然后选择 BrowseGalleryX 控件。 将 OnSelect 操作属性更改为 Navigate(KnowledgebaseDetails, ScreenTransition.None)。 当用户在浏览屏幕中为条目选择 > 图标时，此操作显示知识库文章的详细信息屏幕。

26. 保存应用。

27. 选择 F5 以预览应用。 在知识库屏幕上，输入搜索词，然后选择输入。 选择文章并验证是否显示其详细信息。 验证返回图标是否将用户返回到浏览屏幕。

28. 关闭预览窗口，并返回到 Power Apps Studio。

Maria、Kiana 和 Preeti 已成功将 Web API 和 Azure 认知搜索合并到应用中。

上一个下一个