Hope you all are doing great and staying safe!
Today, in this blog I am gonna share PowerGuideTip23, where I’ll show you a way to call Microsoft Graph API in Canvas App. This article is also helpful for all those folks, who are looking for a Step by Step guidance to call Custom Connector in PowerApps.
If you are yet to know the fundamentals of Microsoft Graph API. Please check my this article first.
There are many business requirements, where you need to collect information about Logged In-App users from Azure Active Directories like User’s Security Roles, Security Group, License, Profile details, and much more. Apart from collecting information from Azure AD, you may also need to perform operations in Microsoft Teams, Office 365, SharePoint, and many other applications as well directly through Canvas App.
Let’s get started and check how to use Microsoft Graph API in your Canvas App.
- Azure Subscription (Trial is also fine)
- Global Admin rights on Azure AD.
- PowerApps License (Trial is also fine)
- Graph Explorer to test the Microsoft Graph API.
Azure AD App Registration
Step 1 – Open Azure Portal.
Step 2 – Click on Manage Azure Active Directory > View.
Step 3 – Select the App registrations option from the left panel and click on the + New registration
button to register a new application.
Step 4 – Provide the Name of the application “PowerAppsConnectorApp” and click on Register.
Step 5 – Copy the Application ID for later use.
Step 6 – Generate a Secret Key and Copy it for later use
Step 7 – Configure API Permission to call Graph API and perform the operation in Azure AD.
Step 8 – Hit Grant admin consent. You need to have the appropriate rights (Global Admin) to perform this action.
Create a Custom Connector in PowerApps to call Graph API
Step 1 – Open PowerApps Creation Page. Click here
Step 5 – Provide the Connector details in 3 sections (General, Security, and Definition) as per below
- Provide the Client Id and Client Secret key copied in the earlier step
- Set Login URL to – https://login.windows.net
- Go to the Resource URL section and update the value as https://graph.microsoft.com
In the Operation ID section, we need to provide the operation/function name that we will call from the canvas app to get the API response.
- Open Graph Explorer (https://developer.microsoft.com/en-us/graph/graph-explorer#) in another tab.
- Test the Graph API
- Copy the Request and Response information for later use
Click on Import from Sample > Choose Get Method > Paste the Graph API URL > Hit Import (as shown below)
Since, In this demo I want to retrieve only logged in powerapps user information from Azure AD, Hence, I have used /V1.0/me/. You can change the API URL as per your business need.
Same for the API Response. Click on + Add default response and paste the Response JSON (copied from Graph Explorer above) under the Body section (as shown below). And then Hit Import
Step 6 – Hit Create Connector
Step 7 – Navigate back to Security and copy the Redirect URL.
Step 8 – Go to Azure Portal > Open your App > Click on Redirect URI > Click on + Add platform > Select Web > Paste the URL > Click on Configure
Step 9 – Test the Connector
You must get the same response as Graph Explorer.
Create a Canvas App and use the Custom Connector
Step 1 – Create a new Canvas App or can open your existing app as well.
Step 2 – Add a Blank screen and some Text Input controls and one Button as per below
Step 3 – Go to View > Data Sources and Add our Custom Connector in the App.
Step 5 – Add the formula to call custom connector on OnSelect property of the button.
In this formula, I have captured the response returned from the Graph API in a Local Variable (UserProfile), so that later, I could use it to set the value in Text Input Controls.
Step 6 – Set the value in Text Input controls retrieved from the Custom Connector.
Test & Demo