如何：将代码应用连接到数据（预览版）

代码应用支持连接到 Power Platform 连接器。

注释

预览功能不适合生产使用且功能可能受限。 这些功能在正式发布之前可用，以便客户能够提前访问并提供反馈。

使用以下步骤：

1. 在 Power Apps 中创建和设置连接
2. 在代码应用中添加连接
3. 更新应用以调用连接

注释

使用 pac code init 初始化应用后，请使用这些步骤。 请参阅“如何：从头开始创建代码应用”部分中“初始化代码应用”部分前的步骤。

重要

正式支持以下连接器：SQL、SharePoint、Office 365 用户、Office 365 组、Azure 数据资源管理器、OneDrive for work 或 school、Power Apps for Makers、Microsoft Teams、MSN Weather 和 Microsoft Translator V2。 正式支持 Dataverse 的创建、读取、更新和删除操作。 其他连接器应正常工作，但未测试。

在 Power Apps 中创建和设置连接

首先在 Power Apps 中创建和配置连接。 复制连接元数据，以便在后续步骤中使用。

重要

对于初始版本，只能将代码应用配置为在 Power Apps 中使用现有连接。 无法通过 PAC CLI 命令创建新连接。 将来的版本中将添加对创建新连接的支持。

打开“Power Apps 连接”页面

转到 Power Apps ，然后从左侧导航导航到 “连接” 页。

创建 Office 365 用户连接示例

选择 “+ 新建连接 ”，然后选择 “Office 365 用户”。 选择 创建。

注释

如果已有 Office 365 用户连接，则可以使用该连接，而不是创建新的连接。

（可选）创建 SQL 数据库连接（或其他表格式数据源的连接）

小窍门

有关将代码应用连接到 Azure SQL 的分步指南，请参阅 如何：将代码应用连接到 Azure SQL。

获取所有已创建连接的连接元数据

可以通过两种方式来执行此操作：

• 使用 PAC CLI pac 连接列表 命令。
• 从 Power Apps 中的 URL 获取数据。

使用 PAC CLI

可以使用 Power Apps CLI 列出可用连接，并使用 pac 连接列表 命令检索其 ID。

pac connection list 显示所有连接的表格，包含连接 ID 和 API 名称，该名称在添加数据源时作为 appId 使用。

使用 Power Apps

在检查连接的详细信息时，还可以通过查看 URL 来使用 Power Apps 检索此信息。

请注意 API 名称和连接 ID 如何追加到 URL：

将 API 名称和连接 ID 从 PAC CLI 复制到每个连接的 URL。

为代码应用程序添加连接

创建或标识要使用的现有连接，并从上一步复制连接元数据后，将这些连接添加到应用。

将数据源添加到应用将自动在存储库中生成类型化 TypeScript 模型和服务文件。 例如，Office 365 用户数据源生成 Office365UsersModel 和 Office365UsersService。

1. 使用 PAC CLI pac 代码 add-data-source 命令将非表格数据源（例如 Office 365 用户）添加到应用。

   在命令行中运行以下命令。 使用从前面的步骤收集的 API 名称和连接 ID。

   pac code add-data-source -a <apiName> -c <connectionId>
   

   例如：

   pac code add-data-source -a "shared_office365users" -c "aaaaaaaa000011112222bbbbbbbbbbbb"
   

2. （可选）向应用添加表格数据源（例如 SQL 或 SharePoint）。

   使用相同的 PAC CLI pac 代码 add-data-source 命令，但包含表 ID 和数据集名称。 表格数据源的架构指定这些值。 如果还没有这些名称，请参阅 “检索数据集名称和表 ID”。

   pac code add-data-source -a <apiName> -c <connectionId> -t <tableId> -d <datasetName> 
   

   例如：

   pac code add-data-source `
   -a "shared_sql" `
   -c "aaaaaaaa000011112222bbbbbbbbbbbb" `
   -t "[dbo].[MobileDeviceInventory]" `
   -d "paconnectivitysql0425.database.windows.net,paruntimedb"
   
   pac code add-data-source `
   -a "shared_sql" `
   -c "aaaaaaaa000011112222bbbbbbbbbbbb" `
   -t "[dbo].[EmployeeInformation]" `
   -d "paconnectivitysql0425.database.windows.net,paruntimedb" 
   

3. （可选）将 SQL 存储过程添加为数据源。

   在命令行中运行以下命令。 使用之前收集的 API 名称和连接 ID。

   pac code add-data-source -a <apiId> -c <connectionId> -d <dataSourceName> -sp <storedProcedureName> 
   

   例如：

   pac code add-data-source `
   –a "shared_sql" `
   -c "33dd33ddee44ff55aa6677bb77bb77bb" `
   -d "paconnectivitysql0425.database.windows.net,paruntimedb" `
   -sp "[dbo].[GetRecordById]" 
   

4. （可选）如果需要，可以在添加后删除数据源。

   在命令行中运行以下命令。 使用之前收集的 API 名称和连接 ID。

   pac code delete-data-source -a <apiName> -ds <dataSourceName> 
   

   例如：

   pac code delete-data-source `
   -a "shared_sql" `
   -ds "MobileDeviceInventory" 
   

   重要

   如果连接上的架构发生更改，则没有用于刷新类型化模型和服务文件的命令。 请删除数据源后重新添加。

更新应用以调用连接

添加连接后，可以更新应用以使用生成的模型和服务。

注释

还可以通过 IDE 的代理进行这些更改。 例如，在 Visual Studio Code 中，可以使用 GitHub Copilot 代理模式在添加数据源后为你创建它们。

1. 确保在数据调用之前初始化 Power Apps SDK

   在您的 App.tsx 文件中实现逻辑，以确保在执行任何数据操作之前等待 Power Apps SDK 完全初始化。 这可以防止由未初始化的服务或缺少上下文导致的错误。 此操作仅需执行一次。

   在进行 API 调用之前，使用异步函数或状态管理来确认初始化。 例如：

   useEffect(() => {
   // Define an async function to initialize the Power Apps SDK
   const init = async () => {
         try {
               await initialize(); // Wait for SDK initialization
               setIsInitialized(true); // Mark the app as ready for data operations
         } catch (err) {
               setError('Failed to initialize Power Apps SDK'); // Handle initialization errors
               setLoading(false); // Stop any loading indicators
         }
   };
   
   init(); // Call the initialization function when the component mounts
   }, []);
   
   useEffect(() => {
   // Prevent data operations until the SDK is fully initialized
   if (!isInitialized) return;
   
   // Place your data reading logic here
   }, []);
   

2. 导入所需的类型和服务

   添加数据源时，会自动生成模型和服务文件并将其放置在 /generated/services/ 文件夹中。 例如，如果添加 Office365Users 为数据源，将创建以下文件：

   • Office365UsersModel.ts – 定义连接器中 Office365Users 请求和响应对象的数据模型。

   • Office365UsersService.ts – 提供用于与 Office365Users 数据交互的服务方法。

   可以在代码中导入和使用它们，如下所示：

   import { Office365UsersService } from './generated/services/Office365UsersService';
   import type { User } from './generated/models/Office365UsersModel';
   

3. 更新应用以使用非表格数据源（例如 Office 365 用户）

   您可在 src/generated/models and src/generated/services 对应连接 API 的文件夹下查看生成的文件。

   await Office365UsersService.MyProfile() 
   

   const profile = (await Office365UsersService.MyProfile_V2("id,displayName,jobTitle,id,userPrincipalName")).data; 
      setUser(profile); 
      if (profile?.id || profile?.userPrincipalName) { 
         // Try both id and userPrincipalName for photo 
         let photoData = null; 
         try { 
         photoData = (await Office365UsersService.UserPhoto_V2(profile.id || profile.userPrincipalName)).data; 
         } catch { 
         // fallback to userPrincipalName if id fails 
         if (profile.userPrincipalName) { 
            photoData = (await Office365UsersService.UserPhoto_V2(profile.userPrincipalName)).data; 
         } 
         } 
         if (photoData) setPhoto(`data:image/jpeg;base64,${photoData}`); 
   

4. （可选）更新应用以使用表格数据源（例如 SQL）

   可以在类型化连接 API 的 src/Models 和 src/Services 文件夹下查看生成的文件。

   Example

   await MobileDeviceInventoryService.create(<record>) 
   await MobileDeviceInventoryService.update(id, <record>) 
   await MobileDeviceInventoryService.delete(id) 
   await MobileDeviceInventoryService.get(id) 
   await MobileDeviceInventoryService.getall() 
   

   await MobileDeviceInventoryService.update(assetId, changedFields); 
   setAssets((prevAssets) => 
     prevAssets.map((asset) => { 
       if (asset.id === assetId) { 
   

5. 在本地运行应用以验证更改

   npm run dev
   

6. 将应用部署至 Power Apps 运行

   npm run build | pac code push
   

检索数据集名称和表 ID

重要

以下步骤用于临时解决方法，以检索数据集名称和表 ID。 我们计划添加一种更简单的机制来获取这些值。

如果还没有表和数据集名称，可以通过运行画布应用并从浏览器网络检查器复制值来获取它们：

1. 在 Studio 中创建新的画布应用。

2. 将连接添加到画布应用。

3. 将连接绑定到库控件。

4. 发布并运行应用。

5. 打开浏览器的 开发人员工具，转到“ 网络 ”选项卡，并检查应用加载时发出的请求。 检查“调用”请求，并查阅其响应。

6. 查找具有连接 ID、数据集名称和表 ID 的 Azure API 管理（APIM）请求，并复制这些值。

   通过 APIM 使用此示例数据请求 URL，在 URL 的以下位置查找 <Connection ID>、<Dataset name> 和 <Table ID> 的值：

   https[]()://{id value}.01.common.azure-apihub.net/apim/sharepointonline/<Connection ID>/datasets/<Dataset name>/tables/<Table ID>/items