แก้ไข

แชร์ผ่าน

How to: Connect your code app to data (preview)

Code apps enable connecting to Power Platform connectors.

Note

Preview features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.

Use the following steps:

  1. Create and set up connections in Power Apps
  2. Add a connection to a code app
  3. Update the app to call connections

Note

Use these steps after you initialize the app with pac code init. This is the third step in how to create a code app from scratch

Create and set up connections in Power Apps

Start by creating and configuring connections at Power Apps. Copy connection metadata from there for use in later steps.

The following connectors are officially supported:

Other connectors are expected to work but are untested.

Important

For the initial release, you can only configure code apps to use existing connections in Power Apps. You can't create new connections through PAC CLI commands. Support for creating new connections will be added in a future release.

Launch the Power Apps Connections page

Go to Power Apps and navigate to the Connections page from the left-hand navigation.

Power Apps Connections page showing New connection button

Example: Create an Office 365 Users connection

Select + New connection and select Office 365 Users. Select Create.

Note

If you already have an Office 365 Users connection, you can use that instead of creating a new one.

Create Office 365 Users connection in Power Apps

(Optional) Create a SQL connection (or a connection for another tabular data source)

Tip

For a step-by-step guide to connecting your code app to Azure SQL, see How to: Connect your code app to Azure SQL.

Get connection metadata for all created connections

There are two ways to do this:

Use PAC CLI

Use the Power Apps CLI to list your available connections and retrieve their IDs using pac connection list command.

pac connection list displays a table of all your connections, including the Connection ID and API Name, which is used as the appId when adding a data source.

PAC CLI list output showing Connection ID and API Name

Use Power Apps URL

You can also retrieve this information using Power Apps by viewing the URL when you examine the details of a connection.

Select a connection in Power Apps to view its details

Notice how the API name and connection ID are appended to the URL:

Connection details showing API name and Connection ID values

Copy the API name and the connection ID from PAC CLI to the URL for each connection.

Add a connection to a code app

After you create or identify existing connections to use, and copy the connection metadata from the previous step, add those connections to the app.

Adding the data sources to the app automatically generates a typed TypeScript model and service file in the repo. For example, the Office 365 Users data source produces Office365UsersModel and Office365UsersService.

Add a nontabular data source

Add a nontabular data source (for example Office 365 Users) to the app using the PAC CLI pac code add-data-source command.

From a command line, run the following command. Use the API name and connection ID collected from previous steps.

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

For example:

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

Add a tabular data source

SQL or SharePoint are examples of tabular data sources.

Use the same PAC CLI pac code add-data-source command, but include a table ID and dataset name. The schema of your tabular data source specifies these values. If you don't already have these, see Retrieve a dataset name and table ID.

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

For example:

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"

Retrieve a dataset name and table ID

Important

The following steps to retrieve a dataset name and table ID are a temporary workaround. We plan to add an easier mechanism to get these values.

If you don't already have the table and dataset name, you can get them by running a canvas app and copying the values from the browser network inspector:

  1. Create a new canvas app in Studio.

  2. Add the connection to a canvas app.

  3. Bind the connection to a gallery control.

  4. Publish and run the app.

  5. Open your browser's Developer Tools, go to the Network tab, and inspect requests made when the app loads. Check the "invoke" request, and go to its response.

  6. Find an Azure API Management (APIM) request with the connection ID, dataset name, and table ID, and copy those values.

    Using this example data request URL through APIM, look for the <Connection ID>, <Dataset name>, and <Table ID> values in these places in the URL:

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

Add a SQL stored procedure as a data source

From a command line, run the following command. Use the API name and connection ID collected previously.

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

For example:

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

Delete data sources

If needed, you can delete data sources after adding.

From a command line, run the following command. Use the API name and connection ID collected previously.

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

For example:

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

Important

If the schema on a connection changes, there's no command to refresh the typed model and service files. Delete the data source and readd it instead.

Use connection references to add a data source

Starting in version 1.51.1 of the Power Apps CLI released in December 2025, you can use connection references to add data sources to your code app. A connection reference is a solution component that points to a specific connection for a connector. Instead of binding your app directly to a user-specific connection, you bind it to a reference. This makes the solution environment-aware and portable across Dev, Test, and Prod environments for smooth application lifecycle management.

Note

This section assumes you have a basic knowledge of solutions in Power Apps and connection references. You should have a solution created already and a connection reference in that solution for your data source. If you haven't, follow the steps outlined in the links below to create one.

Get the solution ID

There are two ways to get the ID of your solution:

Use the PAC CLI solution list command:

  1. Open a command prompt or terminal window.

  2. Run the following command to get a list of solutions in the environment you're connected to:

    pac solution list --json | ConvertFrom-Json | Format-Table

    This command outputs a table to the console with the Id, SolutionUniqueName, and FriendlyName solution properties.

  3. Copy the solution Id and save it for later use.

Use the Power Apps solution explorer:

  1. Sign in to Power Apps.

  2. On the left pane, select Solutions. If the item isn't in the side panel pane, select More and then select the item you want.

  3. Find the solution that contains the connection reference for your data source.

  4. Select the solution to open it.

  5. In the URL of the browser, find the solution ID at the end of the URL. Your URL is of the form:

    https://make.powerapps.com/environments/environmentId/solutions/solutionId

  6. Copy the solution ID from the URL and save it for later use.

Get the name of the connection reference to your data source

There are two ways to get the connection reference to your data source:

Use the PAC CLI code command to list the connection references in a solution:

  1. Open a command prompt or terminal window.

  2. Run the following command to get the solution ID and name of the connection reference to your data source:

     pac code list-connection-references -env <environmentURL> -s <solutionID>

  3. The output includes the display name, logical name, and description of the connection references in the solution.

Use the Power Apps solution explorer to examine the connection references in a solution:

  1. Sign in to Power Apps.
  2. On the left pane, select Solutions. If the item isn't in the side panel pane, select More and then select the item you want.
  3. Find the solution that contains the connection reference for your data source.
  4. Select Connection References from the list of Objects in the left pane.

Add the data source to your code app using the connection reference

From a command line, run the following command. Use the solution ID and connection reference logical name collected from previous steps.

pac code add-data-source -a <apiName> -cr <connectionReferenceLogicalName> -s <solutionID>

The app now uses the connection associated with the connection reference in your Power Apps solution.

Update the app to call connections

Once connections are added, you can update the app to use the generated model and service.

Note

You can also make these changes using an agent in your IDE. For instance, in Visual Studio Code you might use GitHub Copilot agent mode to make them for you after the data sources are added.

  1. Ensure Power Apps SDK initialization before data calls

    In your App.tsx file, implement logic that waits for the Power Apps SDK to fully initialize before performing any data operations. This prevents errors caused by uninitialized services or missing context. This only needs to be done once.

    Use an asynchronous function or state management to confirm initialization before making API calls. For example:

    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. Import required types and services

    When you add a data source, model and service files are automatically generated and placed in the /generated/services/ folder. For example, if you add Office365Users as a data source, the following files are created:

    • Office365UsersModel.ts – Defines the data model for requests and response objects in the Office365Users connector.
    • Office365UsersService.ts – Provides service methods for interacting with the Office365Users data.

    You can import and use them in your code like this:

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

  3. Update the app to use the nontabular data source (for example, Office 365 Users)

    You can see the generated files under the src/generated/models and src/generated/services folders for the typed connection 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. (Optional) Update the app to use the tabular data source (for example, SQL)

    You can see the generated files under the src/Models and src/Services folders for the typed connection API.

    For 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. Run the app locally to verify changes

    Use this command in the terminal:

    npm run dev

  6. Push the app to run on Power Apps

    Use this command in the terminal:

    npm run build | pac code push
  • Last updated on