Part 2: Building Power Apps Code Apps – Adding Office 365 Users Connection

Please refer to the following blog for a step-by-step guide on creating Code Apps : https://mspowerplatformtips.blogspot.com/2025/08/creating-code-apps-in-power-apps-step.html

Setting up connection to connector for code apps.

Create and set up connections in Maker Portal 
You will need to start by creating and configuring connections at https://make.powerapps.com and you’ll need to copy connection metadata from there for use in later steps.

1. Launch the Maker Portal Connections page

Go to https://make.powerapps.com and navigate to the Connections page from the left-hand navigation.

2. Create an Office 365 Users connection

Click “+ New connection” and select Office 365 Users. Click “Create”.

Then open the connection in Url you can see connection ID



Get connection metadata for all created connections 

You can use the Power Apps CLI to list your available connections and retrieve their IDs:

pac connection list

This command will display a table of all your connections, including the Connection ID and API Name (which is used as the appId when adding a data source).


3. Add a connection to a code app

Once you have created or identified existing connections to use and copied the connection metadata from the previous step, you will now add those connections to the app. Adding the data sources to the app will automatically generate a strongly typed Typescript model and service file in the repo. For example, the Office 365 Users data source will produce Office365UsersModel and Office365UsersService. 
1. Add a non-tabular data source (e.g. Office 365 Users) to the app From a command line, run the following. Use the API name and connection ID collected from Step #2 above. 
pac code add-data-source -a <apiName> -c <connectionId> 
Example pac code add-data-source -a "shared_office365users" -c "aa35d97110f747a49205461cbfcf8558"

Then Create the ProfileScreen.tsx file in src
add below code
import React, { useEffect, useState } from 'react';
import { Office365UsersService } from '../src/Services/Office365UsersService';

const ProfileScreen: React.FC = () => {
  const [profile, setProfile] = useState<{ name: string; email: string; photo: string | null }>({
    name: '',
    email: '',
    photo: null,
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchProfile = async () => {
      try {
        const profileResponse = await Office365UsersService.MyProfile();
        const photoResponse = await Office365UsersService.UserPhoto(profileResponse.data.Id);

        setProfile({
          name: profileResponse.data.DisplayName,
          email: profileResponse.data.Mail,
          photo: photoResponse.data,
        });
        console.log('Profile data:', profileResponse.data);
        console.log('Photo data:', photoResponse.data);
      } catch (error) {
        console.error('Error fetching profile:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchProfile();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      {profile.photo && <img src={`data:image/jpeg;base64,${profile.photo}`} alt="Profile" style={{ borderRadius: '50%', width: '150px', height: '150px' }} />}
      <h1>{profile.name}</h1>
      <p>{profile.email}</p>
    </div>
  );
};

export default ProfileScreen;

in App.tsx 
//import { useState } from 'react'
import './App.css'
import ProfileScreen from './ProfileScreen'

function App() {

  return (
    <>
      <ProfileScreen/>
    </>
  )
}

export default App


now npm run build

if build successful then 
npm run dev.

you will get URL  


open in browser and you will see the result as below




Comments

Post a Comment

Popular posts from this blog

Step-by-Step Guide: Power Automate Custom Connector Using Graph API from Azure App Service

Image
Step 1: Open Power Automate, navigate to the Custom Connectors tab, and select Create from blank as shown in the image below. custom connector(click image for better resolution) Step 2: In the General tab, upload an icon (less than 1MB), add a description, select the correct scheme (in my case, HTTPS ), and provide the host name. For example, if your API URL is https://graph.microsoft.com/v1.0/users/{email} , the host name will be the highlighted part — graph.microsoft.com . Step 3: Go to the Security tab. Here, you need to select the authentication method. Choose OAuth 2.0 as the authentication type, as shown in the image below. Step 4: Select the Identity Provider as Azure Active Directory . Check the box Enable Service Principal Support . This option allows you to create a connection using a Client ID and Client Secret instead of using the user's own authentication. Next, provide the Client ID , Client Secret , Tenant ID , and other required details as shown in t...
Read more

Calling Microsoft Graph API from Power Automate Using Azure App Services – Step-by-Step Guide

Image
Step 1: You should have an Azure subscription, or if you have access to the Microsoft Entra Admin Center, you can create an app from there. This app can then be used in Power Automate to connect to Microsoft Graph API. Step 2: Click on "New registration" , provide a name for your app, assign the required API permissions (such as Microsoft Graph permissions), and then click "Register" to complete the app registration process. Step 3: After registration, you'll be redirected to the app's overview page. From there, navigate to the API permissions tab and click "Add a permission" to assign the necessary Microsoft Graph API permissions. Step 4: Select Microsoft Graph as the API, and based on your requirements, choose the appropriate permissions. In my case, I selected Application permissions , which do not require user sign-in and are suitable for background services or automation. Step 5: Select the required Microsoft Graph API permissions. Yo...
Read more

Step-by-Step: Give Unique Permissions to OneDrive Files Using Power Automate and Graph API (No Premium License Needed)

Image
We are uploading files through Power Apps using the Attachment control. In the backend, a Power Automate flow uploads these files to OneDrive and assigns unique permissions . Since Power Automate does not have a built-in connector to directly assign unique permissions in OneDrive, we are handling this through the Microsoft Graph API (without using a custom connector). Step 1: Create a Blank Power Apps Application Open Power Apps Studio. Select New app > Start with a page design as shown below. Step 2 :  select Blank Canvas  Step 3: Add an Attachment Control In Power Apps, the Attachment control is not available directly from the standard controls list. To get the Attachment control: Add an Edit Form to your app. Connect the form to a SharePoint list . Once connected, the form will automatically include the Attachments field. You can then use this Attachment control to upload files. Step 4: Keep Only the Attachment Control Since we only need th...
Read more