sp-dev-fx-webparts/samples/react-teams-tagging
Hugo Bernier 7e97daab76 Added more contributions 2023-03-15 01:23:34 -04:00
..
.devcontainer Added 1.8.x containers 2022-02-16 00:42:49 -05:00
assets Changed docs links to learn 2022-10-24 09:42:45 -04:00
config spfx webpart to Tag Teams using a TermSet in SP (#845) 2019-04-18 21:08:35 +03:00
src React teams tagging (update after community call demo) (#879) 2019-06-07 11:12:52 +03:00
teams spfx webpart to Tag Teams using a TermSet in SP (#845) 2019-04-18 21:08:35 +03:00
.editorconfig spfx webpart to Tag Teams using a TermSet in SP (#845) 2019-04-18 21:08:35 +03:00
.gitignore spfx webpart to Tag Teams using a TermSet in SP (#845) 2019-04-18 21:08:35 +03:00
.yo-rc.json spfx webpart to Tag Teams using a TermSet in SP (#845) 2019-04-18 21:08:35 +03:00
README.md Added more contributions 2023-03-15 01:23:34 -04:00
gulpfile.js spfx webpart to Tag Teams using a TermSet in SP (#845) 2019-04-18 21:08:35 +03:00
package-lock.json spfx webpart to Tag Teams using a TermSet in SP (#845) 2019-04-18 21:08:35 +03:00
package.json spfx webpart to Tag Teams using a TermSet in SP (#845) 2019-04-18 21:08:35 +03:00
tsconfig.json spfx webpart to Tag Teams using a TermSet in SP (#845) 2019-04-18 21:08:35 +03:00
tslint.json spfx webpart to Tag Teams using a TermSet in SP (#845) 2019-04-18 21:08:35 +03:00

README.md

spfx web part to Tag Teams using a TermSet in SharePoint

Summary

This sample shows how read and update a custom Schema extension in MS Graph to Tag a Team using metadata from a specific TermSet in SharePoint. The user can select different Terms (up to 3), and are saved as a custom Schema extension in Group Graph entity. Besides, the web part allows to find other Teams tagged wit the same Tag (for demo puposes only 1st Tag is used to run the query)

Custom Schema Extension Webpart

Compatibility

⚠️ Important
Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.
Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility.

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

Applies to

Contributors

Version history

Version Date Comments
1.0.0 Apr 18, 2019 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_TeamsTagging",
    "description": "Adding Tags to Teams",
    "owner": "bbb1b0ef-2f6b-4b50-bcc9-b6a062f202c2",
    "targetTypes": [
        "Group"
    ],
    "properties": [
        {
            "name": "tag1", "type": "String"
        },
        {
            "name": "tag2", "type": "String"
        },
        {
            "name": "tag3", "type": "String"
        }
    ]
}

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 TeamsTagging.tsx file and change lines 30, 47, 86 with the id "inheritscloud_TeamsTagging" 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. The schema extension is composed of 3 string values (list of Tags). For demo purposes we are not storing the ID of the Terms, only the label (and the TaxonomyPicker is not bound with the stored values)

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
  • Using TaxonomyPicker control from spfx PnP React controls
  • How to update an MS Graph entity (in this case, Office 365 Group) with custom data
  • How to filter Graph data using a custom Schema Extension
  • 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.