The New Modern Look of Microsoft Graph Explorer

Do you want to know which tool we are going to talk about? The tools used to test out the endpoints of the Microsoft Graph API? The tool used to get and set live information across Microsoft 365 with the Postman kind of application? The power users or developers or even users use it from the browser. That tool is none other than Microsoft Graph Explorer!!!! It is more modern now and has come out with a great look and feel when compared to older versions.
 
Below are the newly-added features and enhanced features to the Microsoft Graph Explorer preview.
 

New Features

  • Uses Monaco Editor
  • Shows Access Token
  • Shows Adaptive Cards
  • Shows Snippets

Enhanced Features

  • Improved Sample Queries
  • Improved History
  • Modified Permission View
  • Sign In
 
 
New Graph Explorer preview is built from the ground up using React and Office UI Fabric. We can navigate back and forth between the old Graph explorer and the new one using the Preview toggle button, which is available below the Sign-in button or Login name in the left panel.
 
We can access the Graph Explorer preview from the URL https://developer.microsoft.com/en-us/graph/graph-explorer/preview
 
Monaco editor
 
Request body and Response information can be formatted now and that is possbile by the inclusion of Monaco editor, whereas the tabs Request Body, Permissions under Request section and all tabs (Response Preview, Response Headers, Adaptive Cards and Snippets) use the React-based Monaco editor. Monaco editor is the open source project from Microsoft, used for developing the VS Code.
 
Access Token
 
Access Token is a must for Microsoft Graph API to access the data across Microsoft 365. This can be generated after the user login to the application. And we can view the long generated access token in the newly added Auth tab under Request section.
 
 
Adaptive Cards and Snippets
 
Other new additions to the Graph Explorer were Adaptive Cards and Snippets tabs, which are located under the Response section. If the endpoint generates and returns the success response and it is suitable for Adaptive Card syntax, the suitable for adaptive card was previewed in the Adaptive card tab.
 
 
The snippets tab dynamically generates the code based on the endpoint we entered and tested in the Graph Explorer. At present, the code generates for C#, JavaScript, Python and Objective-C. We can directly use copy and use the code snippets in developing applications after the inclusion of the appropriate Microsoft Graph SDK.
 
 
 
Improved Sample Queries and History
 
From the left panel of the Graph explorer; under Preview switch, we can see an enhanced Sample Queries and History section in a tab view. Clicking on each tab shows the respective list of items.
 
The Sample Queries lists out some of the most required endpoints under each application category in a grouped manner instead of application category selection from separate popup panel in older version. This reduces the effort and increased the performance of choosing the sample query. The search box in the tab helps to search for any endpoint across all application categories from the single panel.
 
Modified Permission View
 
To use the Microsoft Graph API from Graph Explorer, user must approve (consented) some permissions to this application. The Permission tab from Request section shows the permission scopes required for the entered endpoint. In the older version, users have to research and select the appropriate permission scope for the endpoint we are about to test. A  lot more has changed in this new Permission view, here user can only see appropriate permissions. And if the permission has not consented, it shows the Consent button to enable the permission. The consented status ensures the user has approved Graph Explorer preview with that permission scope.
 
 
 
Authentication is required for Graph Explorer to test with live data. The enhanced "Sign-in with Graph Explorer" button above the Preview switch asks the user to authenticate with popup instead of redirection. Due to that, the browser requires us to allow the popups. After the sign-in, the Auth tab under the Request section gets the  AccessToken.
 
 

Conclusion

 
The new Graph Explorer is developed as an open source project and it can be accessed from https://github.com/microsoftgraph/microsoft-graph-explorer-v2. So we can also contribute to the project by adding fixes and raising issues. And we can also host the project in our local environment by cloning and test the Graph API instead of accessing cloud based Graph Explorer.