Home > Canvas Apps > Canvas App: Call Graph API Directly and Read the Response

Canvas App: Call Graph API Directly and Read the Response

In this article, I will explain how to call the Graph API directly in a Canvas App and read the response.

What’s in Microsoft Graph?

Microsoft Graph exposes REST APIs and client libraries to access data on the following Microsoft cloud services:

  • Microsoft 365 core services: Bookings, Calendar, Delve, Excel, Microsoft 365 compliance eDiscovery, Microsoft Search, OneDrive, OneNote, Outlook/Exchange, People (Outlook contacts), Planner, SharePoint, Teams, To Do, Viva Insights
  • Enterprise Mobility + Security services: Advanced Threat Analytics, Advanced Threat Protection, Microsoft Entra ID, Identity Manager, and Intune
  • Windows services: activities, devices, notifications, Universal Print
  • Dynamics 365 Business Central services

What is a Graph Explorer:

  • Graph Explorer is a developer tool that lets you learn about Microsoft Graph APIs.

Now that you understand the basics, let’s learn how to call the Graph API and read the response using a Canvas App.

Scenario:

  • Call the me Graph API to get the profile details of the logged in user.
  • Below is an example of how the API response looks in Graph Explorer
  • Note down the property names (e.g., displayName, mail, etc.) which we will be using in the Canvas App while reading the response.

Lets proceed building the Canvas App.

Build a Canvas App:

  • Add a button control and on OnSelect add the following Power fx formula:
UpdateContext({responseGraphAPI:Office365Groups.HttpRequest("https://graph.microsoft.com/v1.0/me","GET","")})
  • In the above Power Fx formula, we use Office365Groups.HttpRequest to call the Graph API and store the response in responseGraphAPI variable.
  • responseGraphAPI will be an UnTyped object and you can access the API response properties as shown below using period(.) operator (i.e., responseGraphAPI.displayName).

Similar to the simple GET example above, we can also make POST calls to the Graph API and read the responses.

🙂

  1. No comments yet.
  1. No trackbacks yet.

Leave a comment