Main aim of this post is to show how we can use Microsoft Graph Extensions with SPFX to provide ability for user to configure consistent UI experience across different devices and apps.
As Microsoft Graph provide a single API endpoint that give you access to data and insights from office 365, azure and other platforms.
You can also extend Microsoft Graph using your own application data.
You can directly add custom properties to Graph Resources for example, User, Group, Message etc. See following table for supported resources.
|Resource||Open extensions||Schema extensions|
|Administrative unit||Preview only||Preview only|
|Group calendar event||GA||GA|
|Group conversation post||GA||GA|
There are two types of Microsoft Graph Extensions available
- Its provide a way to add custom untyped data directly to specific resource
- In Schema Extensions, you need to create / define your schema first and then use that schema for strongly typed custom data.
In this demo, I will be using Graph Open Extension
Application contain 4 tabs as below
We can create a new Microsoft Graph Open Extension under this tab.
You need to provide a JSON body of an openTypeExtension, with the following required name-value pairs, and any additional custom data. The data in the JSON payload can be primitive types, or arrays of primitive types. See below an example.
One thing to make sure is that your extension name should be unique. Recommendation is to use a reverse domain name system (DNS) format that is dependent on your own domain, for example, in my case, com.ejazhussain.settings.
Do not use the Microsoft domain (Com.Microsoft or Com.OnMicrosoft) in an extension name.
Here we can retrieve existing Open Graph Extension by its unique extension ID. In my case it will be “com.ejazhussain.settings”.
In term of choosing unique name for your
Here we will update existing Open Graph Extension. There is a possibility that you might want to update only a single property. So, the trick here is that you need to get existing Graph Extension values first and then update the required property using PATCH call.
Delete Open Graph Extension
Following permissions needed to create Graph Extension under USER resource
Here are the content of custom Graph service
This is how you can call above Graph service from your component to Create Graph Extension. Similar way you can call GET,POST,DELETE methods.
You can find complete source code at the following GitHub RepoExplore solution on GitHub
Hope you found this post useful.