![\"Power](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/12\/Building-Standalone-Apps-with-Power-Apps-Code-Apps-Part-1-\u2013-Using-Dataverse-and-Office-365-Users-Connectors.png\")
<\/p>\n<\/p>\n
In the Dynamics 365 and Power Apps ecosystem, we have several options for building applications, each one is for a specific type of requirement. Model-driven Apps works well when we need a structured UI with standard components, while we use Canvas Apps to create custom, mobile-friendly interfaces with a low-code approach. Recently, Microsoft introduced another application type called Code Apps, which offers a completely different way to build applications using pro code approach.<\/p>\n
With the introduction of\u00a0 Power Apps Code Apps, things have changed. Code Apps let us build standalone single page applications using modern web frameworks. These are independent applications that cannot be integrated with Canvas Apps or Model-driven Apps.<\/p>\n
The best part is that we get direct access to more than 1,500 standard and premium connectors through the Power Apps SDK. We do not have to write any authentication code, no OAuth flows, no custom APIs, no middleware. We just have to connect and use.<\/p>\n
In this article, we’ll walk you through creating a Code App from scratch. We’ll build Personal Dashboard, a simple application that pulls assigned cases and leads from Dataverse and shows current logged in user details using the Office 365 Users and Dataverse connectors.<\/p>\n
We can build a UI of our own choice and connect to a wide range of data sources using more than 1,500 standard and premium connectors provided by the Power Platform. All connections are secure because the Power Apps SDK handles authentication, and each connector enforces user-level permissions. This means the app can only access data that the signed-in user is allowed to see, so there\u2019s no need to write custom authentication code.<\/p>\n
Code Apps provide a balanced approach with several key advantages:<\/p>\n
The connector integration is particularly valuable. Whether the need is to query Dataverse, access current user profile details, or use other services, the connector can be called directly. There’s no need to configure service principals, manage app registrations, or implement token management. The integration works seamlessly within the platform.<\/p>\n
Before getting started, we have to make sure the following prerequisites are in place:<\/p>\n
Let’s create the app. Open VS Code, launch a PowerShell terminal, and run the following command:<\/p>\n
npm create vite@latest PersonalDashboard — –template react-ts<\/em><\/p>\n For this application, we are using React as the framework and TypeScript as the variant. After that, navigate to the project folder and install the dependencies:<\/p>\n npm install npm i –save-dev @types\/node<\/em><\/p>\n After executing these commands, the project structure will appear as shown in the image below.<\/p>\n According to the official Microsoft documentation, the Power Apps SDK currently requires the port to be 3000 in the default configuration. To configure this, open vite.config.ts and replace the content with the following code:<\/p>\n Note for Mac users: It may be necessary to modify the package.json scripts section.<\/em><\/strong><\/p>\n Change from:<\/p>\n to this<\/p>\n Save the file and run the Code App locally by executing:<\/p>\n npm run dev<\/em><\/p>\n Browse to http:\/\/localhost:3000<\/a>. If the application loads successfully, press Ctrl+C to stop the server.<\/p>\n First authenticate to Power Platform:<\/p>\n pac auth create<\/em><\/p>\n After that, sign in with the credentials and select the environment:<\/p>\n pac env select -env <environment-url><\/em><\/p>\n Initialize the Code App:<\/p>\n pac code init –displayName “Personal Dashboard”<\/em><\/p>\n This will create a power.config.json file in the project as shown in the image below.<\/p>\n Now install the Power Apps SDK. This package provides APIs that allow the application to interact directly with Power Platform services and includes built-in logic to manage connections automatically as they are added or removed.<\/p>\n npm install –save-dev “@microsoft\/power-apps<\/em><\/p>\n Update package.json to run both Vite and the Power Apps SDK server:<\/p>\n <\/p>\n Create PowerProvider.tsx under src and add the Power SDK context provider code given below.<\/p>\n <\/p>\n Update the main.tsx and add this line in the imports section:<\/p>\n and change this code snippet<\/p>\n to this<\/p>\n Run the app by executing :<\/p>\n npm run dev<\/em><\/p>\n Now comes the part where we will add the data source to our application. In this step, we\u2019ll use the Dataverse connector to fetch assigned cases and leads for the logged-in user.<\/p>\n For that First, we need to create a connection:<\/p>\n 1. Go to Power Apps<\/a> and open Connections.<\/p>\n 2. Click New Connection and select Dataverse.<\/p>\n Follow the instruction properly to create the connection, as shown in the<\/p>\n Once the connection is ready, we have to open the terminal. For Dataverse, we have to add the tables required for the application. For this example, we’ll add the Leads and Incident (Cases) tables using the following commands:<\/p>\n pac code add-data-source -a dataverse -t lead <\/em><\/p>\n pac code add-data-source -a dataverse -t incident After running these commands, we can see that some files and folders are added to the project. Inside the generated folder, there are services and models folders. These contain the files for Leads, Incidents, and other tables, which can be used in the code. For example:<\/p>\n CRUD operations can be performed on Dataverse using the app. Before accessing any data, we have to initialize the Power Apps SDK to avoid errors. An async function or state check can ensure the SDK is ready before making API calls. For example:<\/p>\n <\/p>\n Similar to Dataverse, we need to create a connection for Office 365 Users by following the same steps. Once the connection is ready, we need to add it to the application. First, list all available connections to get the connection ID using command:<\/p>\n pac connection list<\/em><\/p>\n It will list all the connections available in the selected environment. We need to Copy the connection ID for Office 365 Users from the list, then add it to the project using:<\/p>\n pac code add-data-source -a “shared_office365users” -c “<connection-id>”<\/em><\/p>\n After running this command, the Office 365 Users connector will be available to use in the application, allowing access to user profiles, and other Office 365 user data.<\/p>\n There are two ways to build a good UI. The first is the traditional coding approach where we write the complete code manually. The second is by using GitHub Copilot integrated in VS Code with the help of prompts.<\/p>\n We can generate the UI by writing a detailed prompt in GitHub Copilot. Here’s an example prompt:<\/p>\n Create a Personal Dashboard UI component in React with TypeScript that displays:<\/p>\n – Left section: Display a list of assigned Cases (Incidents) from Dataverse<\/p>\n * Show case title, case number, priority, status, and created date<\/p>\n * Use card layout for each case<\/p>\n * Add loading state and error handling<\/p>\n – Right section: Display a list of assigned Leads from Dataverse<\/p>\n * Show lead name, company, topic, status, and created date<\/p>\n * Use card layout for each lead<\/p>\n * Add loading state and error handling<\/p>\n – Responsive layout (works on desktop and mobile)<\/p>\n – Tailwind CSS for styling<\/p>\n – Professional color scheme (blues and grays)<\/p>\n – Proper spacing and typography<\/p>\n – Loading spinners while data is fetching<\/p>\n – Error messages if data fails to load<\/p>\n After providing this prompt to GitHub Copilot, it will generate the complete component code. We can then review the generated code, make any necessary adjustments, and integrate it into our application.<\/p>\n Once the code is complete and the app is running locally, the next step is to deploy the application. For Code Apps, deployment is straightforward. First, build the application by running:<\/p>\n npm run build <\/em><\/p>\n After a successful build, execute the following command to push the application to Power Apps:<\/p>\n pac code push <\/em><\/p>\n This command will deploy the application to Power Apps. To verify the deployment, go to the Power Apps portal and open the Apps section. The newly deployed Code App will be visible in the list as shown in the image below.<\/p>\n To run the app, click the play button. On the first launch, the application will prompt for permission to access the connected data sources. After allowing the permissions, the application will use those connection references for all subsequent operations.<\/p>\n \u00a0<\/strong><\/p>\n With Power Apps Code Apps, we can now build standalone applications. The real advantage here is the direct access to over 1,500 connectors through the Power Apps SDK. We can connect to Dataverse, Office 365 Users, and other services without writing any authentication code. The Power Apps SDK handles all the security, and each connector respects user level permissions automatically.<\/p>\n We also get complete freedom to design our own UI using any libraries we prefer. The deployment process is simple. Just run the build command and push it to Power Platform with a single command.<\/p>\n In this article, we built a Personal Dashboard that pulls data from Dataverse and Office 365 Users. The same approach works for any application that needs to connect with Power Platform services. The setup is straightforward, and once the project is initialized, adding new data sources is just a matter of running a few commands.<\/p>\n Code Apps provide a practical way to build custom applications within the Power Platform ecosystem while maintaining secure connections and proper access control.<\/p>\n Power Apps Code Apps are a new application type in Microsoft Power Platform that allow developers to build standalone single-page applications using modern web frameworks such as React, Angular, or Vue. They provide direct access to Power Platform connectors through the Power Apps SDK without requiring custom authentication code.<\/p>\n Unlike Canvas Apps and Model-Driven Apps, Code Apps:<\/p>\n No. Authentication is handled automatically by the Power Apps SDK. Developers do not need to implement OAuth flows, manage tokens, or configure app registrations. All connectors enforce user-level permissions by default.<\/p>\n Yes. Power Apps Code Apps can connect directly to Dataverse using the Dataverse connector. Developers can perform CRUD operations on Dataverse tables, such as Leads and Incidents once the SDK is initialized.<\/p>\n Code Apps use the Office 365 Users connector to retrieve profile details such as name, email, job title, and profile photo. The connector respects the signed-in user\u2019s permissions automatically.<\/p>\n","protected":false},"excerpt":{"rendered":" In the Dynamics 365 and Power Apps ecosystem, we have several options for building applications, each one is for a specific type of requirement. Model-driven Apps works well when we need a structured UI with standard components, while we use Canvas Apps to create custom, mobile-friendly interfaces with a low-code approach. Recently, Microsoft introduced another\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2354,38,2361],"tags":[],"class_list":["post-43115","post","type-post","status-publish","format-standard","hentry","category-dataverse","category-microsoft-powerapps","category-technical"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/43115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=43115"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/43115\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=43115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=43115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=43115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n<\/em>
\nInstall the node type definitions:<\/p>\n![\"PowerAppsCode\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/12\/1PowerAppsCode.png\")
<\/p>\nimport { defineConfig } from 'vite'\r\n\r\nimport react from '@vitejs\/plugin-react'\r\n\r\nimport * as path from 'path'\r\n\r\n\u00a0\r\n\r\n\/\/ https:\/\/vite.dev\/config\/\r\n\r\nexport default defineConfig({\r\n\r\nbase: \".\/\",\r\n\r\nserver: {\r\n\r\nhost: \"::\",\r\n\r\nport: 3000,\r\n\r\n},\r\n\r\nplugins: [react()],\r\n\r\nresolve: {\r\n\r\nalias: {\r\n\r\n\"@\": path.resolve(__dirname, \".\/src\"),\r\n\r\n},\r\n\r\n},\r\n\r\n});<\/pre>\n\"scripts\": \u00a0{\r\n\r\n\"dev\": \"start vite && start pac code run\",\r\n\r\n\"build\": \"tsc -b && vite build\",\r\n\r\n\"lint\": \"eslint .\",\r\n\r\n\"preview\": \"vite preview\"\r\n\r\n}<\/pre>\n\"scripts\": {\r\n\"dev\": \"vite && pac code run\",\r\n\"build\": \"tsc -b && vite build\",\r\n\"lint\": \"eslint .\",\r\n\"preview\": \"vite preview\"\r\n}<\/pre>\nStep 2: Initialize the Code App<\/strong><\/h3>\n
![\"PowerAppsCode\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/12\/2PowerAppsCode.png\")
<\/p>\n\"scripts\": {\r\n\"dev\": \"start pac code run && vite\",\r\n\"build\": \"tsc -b && vite build\",\r\n\"lint\": \"eslint .\",\r\n\"preview\": \"vite preview\"\r\n}<\/pre>\nStep 3: Configure Power Provider<\/strong><\/h3>\n
import { initialize } from \"@microsoft\/power-apps\/app\";\r\n\r\nimport { useEffect, type ReactNode } from \"react\";\r\n\r\ninterface PowerProviderProps {\r\n\r\nchildren: ReactNode;\r\n\r\n}\r\n\r\nexport default function PowerProvider({ children }: PowerProviderProps) {\r\n\r\nuseEffect(() => {\r\n\r\nconst initApp = async () => {\r\n\r\ntry {\r\n\r\nawait initialize();\r\n\r\nconsole.log('Power Platform SDK initialized successfully');\r\n\r\n} catch (error) {\r\n\r\nconsole.error('Failed to initialize Power Platform SDK:', error);\r\n\r\n}\r\n\r\n};\r\n\r\ninitApp();\r\n\r\n}, []);\r\n\r\nreturn <>{children}<\/>;\r\n\r\n}<\/pre>\nimport PowerProvider from '.\/PowerProvider.tsx'<\/pre>\n
<StrictMode>\r\n<App \/>\r\n<\/StrictMode>,<\/pre>\n
<StrictMode>\r\n\r\n<PowerProvider>\r\n\r\n<App \/>\r\n\r\n<\/PowerProvider>\r\n\r\n<\/StrictMode>,<\/pre>\n
Open the URL provided by the Power SDK Server in the same browser profile as that of power platform tenant.
\n
\n<\/strong>Step 4: Adding Dataverse Connector<\/strong><\/h3>\n![\"PowerAppsCode\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/12\/3PowerAppsCode.png\")
<\/p>\n
\n<\/em><\/p>\n![\"PowerAppsCode\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/12\/4PowerAppsCode.png\")
<\/p>\nimport { AccountsService } from '.\/generated\/services\/AccountsService';\r\n\r\nImport type { Accounts } from '.\/generated\/models\/AccountsModel';<\/pre>\nuseEffect(() => {\r\n\r\n\/\/ Define a function of asynchronous type to properly initialize the Power Apps SDK to avoid any error during runtime\r\n\r\n\u00a0\r\n\r\nconst init = async () => {\r\n\r\ntry {\r\n\r\nawait initialize(); \/\/ Wait for SDK initialization\r\n\r\nsetIsInitialized(true); \/\/ Mark the app as ready for data operations\r\n\r\n} catch (err) {\r\n\r\nsetError('Failed to initialize Power Apps SDK'); \/\/ Handle initialization errors\r\n\r\nsetLoading(false); \/\/ Stop any loading indicators\r\n\r\n}\r\n\r\n};\r\n\r\n\u00a0\r\n\r\ninit(); \/\/ Call the initialization function when the component mounts\r\n\r\n}, []);\r\n\r\n\u00a0\r\n\r\nuseEffect(() => {\r\n\r\nIf (!isInitialized) return;\r\n\r\n\u00a0\r\n\r\n\/\/ Place your data reading logic here<\/pre>\n}, []);<\/h3>\n
<\/pre>\n
Step 5: Adding Office 365 Users Connector<\/strong><\/h3>\n
\n<\/strong>Step 6: Building the UI<\/strong>
\n
\n<\/strong><\/h3>\nUsing GitHub Copilot:<\/strong><\/h3>\n
\n
\n
Step 7: Deploy Your Code App<\/strong><\/h3>\n
![\"PowerAppsCode\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/12\/5PowerAppsCode.png\")
<\/p>\n![\"PowerAppsCode\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/12\/6PowerAppsCode.png\")
<\/p>\n![\"PowerAppsCode\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/12\/7PowerAppsCode.gif\")
<\/strong><\/p>\nConclusion<\/strong><\/h3>\n
Frequently Asked Questions (FAQs)<\/h3>\n
What are Power Apps Code Apps?<\/h3>\n
How are Code Apps different from Canvas Apps and Model-Driven Apps?<\/h3>\n
\n
Do Power Apps Code Apps require authentication setup?<\/h3>\n
Can Power Apps Code Apps connect to Dataverse?<\/h3>\n
How do Code Apps access Office 365 user information?<\/h3>\n