sp-dev-fx-webparts/samples/react-graph-schema-extensions
Hugo Bernier 7087d7ef96 Added 1.5.1 containers 2022-02-16 20:23:19 -05:00
..
.devcontainer Added 1.5.1 containers 2022-02-16 20:23:19 -05:00
assets Removing unnecessary office product from the sample metadata 2021-12-10 19:55:32 +02:00
config Sample Spfx Webpart read / update MS Graph Custom Schema Extensions (#552) 2018-07-03 21:22:49 +03:00
src/webparts/graphSchemaExtension Sample Spfx Webpart read / update MS Graph Custom Schema Extensions (#552) 2018-07-03 21:22:49 +03:00
.editorconfig Sample Spfx Webpart read / update MS Graph Custom Schema Extensions (#552) 2018-07-03 21:22:49 +03:00
.gitignore Added 1.5.1 containers 2022-02-16 20:23:19 -05:00
.yo-rc.json Sample Spfx Webpart read / update MS Graph Custom Schema Extensions (#552) 2018-07-03 21:22:49 +03:00
README.md Added 1.5.1 containers 2022-02-16 20:23:19 -05:00
gulpfile.js Sample Spfx Webpart read / update MS Graph Custom Schema Extensions (#552) 2018-07-03 21:22:49 +03:00
package-lock.json Sample Spfx Webpart read / update MS Graph Custom Schema Extensions (#552) 2018-07-03 21:22:49 +03:00
package.json Sample Spfx Webpart read / update MS Graph Custom Schema Extensions (#552) 2018-07-03 21:22:49 +03:00
tsconfig.json Sample Spfx Webpart read / update MS Graph Custom Schema Extensions (#552) 2018-07-03 21:22:49 +03:00

README.md

Read / Update Microsoft Graph Custom Schema Extensions

Summary

This sample shows how read and update a custom Schema extension in Microsoft Graph. It shows how to create a custom Schema extension in Graph to store custom data related to an Office 365 Group, and how we can read and update that data using an spfx web part.

A possible business scenario here could be if we want to store some additional custom data related to some specific Office 365 Groups, for instance Sales information, and make it available in the SharePoint site.

Custom Schema Extension Web part

Compatibility

SPFx 1.5.1 Node.js v8 | v6 Compatible with SharePoint Online Compatible with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Local Workbench Compatible Hosted Workbench Compatible Compatible with Remote Containers

Applies to

Solution

Solution Author(s)
react-graph-schema-extensions Luis Mañez (MVP, ClearPeople, @luismanez)

Version history

Version Date Comments
1.0.0 Jul 03, 2018 Initial release

Prerequisites

  • Create a custom extenion for Groups using Graph API: Currently, spfx has no permissions to create custom extensions for entities in Graph API. To create the custom extension, you can use the MS Graph Explorer website.

To create the extension you must do a POST request to:

POST https://graph.microsoft.com/v1.0/schemaExtensions
content-type: application/json
{
    "id": "inheritscloud_SalesCustomData",
    "description": "Adding custom data to Groups created for sales",
    "owner": "ac638f16-63c2-462b-95a4-16f8a60b0628",
    "targetTypes": [
        "Group"
    ],
    "properties": [
        {
            "name": "businessUnit", "type": "String"
        },
        {
            "name": "estimatedBudget", "type": "Integer"
        },
        {
            "name": "expectedClosedDate", "type": "DateTime"
        }
    ]
}

See here for more information about the attributes: https://developer.microsoft.com/en-us/graph/docs/api-reference/beta/resources/schemaextension

Note:

  • For the id attribute, You can assign a value in one of two ways:
    • Concatenate the name of one of your verified domains with a name for the schema extension to form a unique string in this format, {domainName}_{schemaName}. As an example, contoso_mySchema.
    • Provide a schema name, and let Microsoft Graph use that schema name to complete the id assignment in this format: ext{8-random-alphanumeric-chars}_{schema-name}. An example would be extkvbmkofy_mySchema.
  • The owner attribute must be a valid ClientId registered in Azure AD
  • The targetTypes is an array with the different Entities that you want to extend (users, groups, event, message). However, spfx only allows to update Groups, so the value is set to group

Minimal Path to Awesome

  • clone repo
  • edit GraphSchemaExtenion.tsx file and change line 141 with the id "inheritscloud_SalesCustomData" assigned when you created the custom Schema extension
  • run gulp serve

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

Features

This sample shows how read and update a custom Schema extension in MS Graph.

This sample illustrates the following concepts on top of the SharePoint Framework:

  • How to create a custom schema extension in Graph API using Graph Explorer tool
  • Using GraphHttpClient to get data from MS Graph API
  • How to update an MS Graph entity (in this case, Office 365 Group) with custom data
  • Using async / await for the async calls
  • Office UI fabric components

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.