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

Code apps enable connecting to Power Platform connectors.

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

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.

Launch the Power Apps Connections page

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

Example Create an Office 365 Users connection

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

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

Get connection metadata for all created connections

There are two ways to do this:

• Use the PAC CLI pac connection list command.
• Get data from the URL in Power Apps.

Use PAC CLI

You can 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.

Use Power Apps

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

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

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 will automatically generate a typed TypeScript model and service file in the repo. For example, the Office 365 Users data source produces Office365UsersModel and Office365UsersService.

1. 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. 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"
   

2. (Optional) Add a tabular data source (for example SQL or SharePoint) to the app.

   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" 
   

3. (Optional) Add a SQL stored procedure as a data source.

   From a command line, run the following. 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]" 
   

4. (Optional) If needed, you can delete data sources after adding.

   From a command line, run the following. 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.

Update the app to call connections

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

1. 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}`); 
   

2. (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.

   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) { 
   

3. Run the app locally to verify changes

   npm run dev
   

4. Push the app to run on Power Apps

   npm run build | pac code push
   

Retrieve a dataset name and table ID

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