Friday 6 November 2020

PowerApps - Call Microsoft Graph API in Canvas App




Introduction

Hello Everyone,

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.

Prerequisites -
  • 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.

Implementation

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 2 - Expand the Data section and Click on Custom Connectors from the left panel.


Step 3 - Click on + New Custom Connector and select Create from blank.

Step 4 - Provide the Name of the Connector and hit Continue.


Step 5 - Provide the Connector details in 3 sections (General, Security, and Definition) as per below

General Section




Security Section
  • 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


Definition Section

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.




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.

UpdateContext({UserProfile:PowerUserConnector.getmyuserdetails()})  

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



10 comments:

  1. Thanks for your needful blog post about Microsoft & I hope this will be the helpful topic for beginners. Well, I am also following some post like this and the persons who have more knowledge about this and its proper implementation. One of them AdyatanTech is very good platform as per my point of view. So I must say all to follow some popular posts with superb ideas to improve their business.

    ReplyDelete
  2. Great details here, better yet to discover out your blog which is fantastic. Nicely done!!! For more visit 2020 Inc. 5000 Europe companies contact list

    ReplyDelete
  3. any other options to connect graph API in powerapps because custom connector is disabled into our environment.

    ReplyDelete
    Replies
    1. You can call the Graph API directly in Power Automate as well. And call the power automate in your powerapps.

      Delete
  4. I recently need to show you i are new at all to blog site along with surely appreciated this site internet site. Probably I’m gonna book mark your blog. Anyone definitely get amazing reports. Kind regards pertaining to expressing around your blog. [pii_email_8079047078567379049d]

    ReplyDelete
  5. Earlier this year, Apple released its list of top iPhone Elyments App at the one billion download mark. It's a very interesting list and there are a lot of good lessons to be learned from it and a lot of money to be made, if you can get it right. How to get access to this giant cash cow? Here are some tips, based on our analysis of Apple's twenty top paid apps.

    ReplyDelete
  6. Merely a smiling visitant here to share the love (:, btw outstanding style. best cell phone spy apps

    ReplyDelete
  7. As a Power Automate partner , Dynatech Systems helps you to automate repeated tasks & focus attention on what's needed most. Get started with Power Automate.

    ReplyDelete
  8. I think this is one of the most significant information for me. And i’m glad reading your article. But should remark on some general things, The web site style is perfect, the articles is really great : D. Good job, cheers buy google reviews

    ReplyDelete
  9. Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! flexispy reviews

    ReplyDelete

Blogger Widgets