v2.3.0

Updating your application

To update your application to use the newest version of Microsoft Graph Toolkit, navigate to your project directory and run:
npm i @microsoft/mgt@latest

If you’re using the Toolkit via mgt-loader, your application will be automatically updated to the newest version.

Teams SSO Provider

Thank you @simonagren for contributing this feature! 🙌

Version 2.3 includes a brand new Provider, TeamsMsal2Provider, for authentication in Microsoft Teams applications. Built on top of msal-browser and the more secure Authorization Code Flow with PKCE, this new provider supports both single-sign on and interactive login in your Microsoft Teams tab applications

What’s the difference between the TeamsProvider and TeamsMsal2Provider?

The TeamsProvider, built on top of msal.js, uses the implicit grant flow and only supports authentication through interactive client-side login. The new TeamsMsal2Provider, built on top of msal-browser, implements the OAuth 2.0 Authorization code flow with PKCE, which is more secure. Additionally, the TeamsMsal2Provider now supports single sign-on in addition to interactive login.

Why should I migrate?

Authorization Code Flow is more secure for web applications than the implicit grant flow used in our original Teams Provider, and we recommend using the TeamsMsal2Provider going forward.

Additionally, with the new provider, you are able to leverage Single Sign-On in your Teams application, which means if a user consents to use your app, they do not have to consent again on another device as they are signed in automatically.

Please note, for SSO, you will need to implement a backend that enables exchanging the Microsoft Teams authentication token with a token that can be used to call Microsoft Graph via the on-behalf-of flow. Take a look at our Node SSO Sample for a reference implementation of the backend service, and for an end-to-end example of enabling Single Sign-On with the Microsoft Graph Toolkit in your Microsoft Teams apps.

Will you continue supporting the existing TeamsProvider?

Yes, as long as msal.js is supported, we will continue supporting the original Teams Provider. However, we do not plan to add any additional features and any new feature development will go in the new TeamsMsal2Provider.

How do I migrate or get started developing with the new provider?

Check out our Teams MSAL2 Provider documentation for migration instructions, and our step-by step Build a Microsoft Teams Tab (interactive login) or Build a Microsoft Teams SSO Tab guides to get started with developing an application.

File upload functionality in mgt-file-list

Thank you @aaclage for contributing this feature! 🙌

We’ve updated our File List component to support the uploading of files by users. Now, you can display a list of files and/or folders from One Drive or SharePoint and allow users to upload items from their device to that location with a single attribute.

Below is an example that shows a signed-in user uploading files to their root drive:

To try out this new feature, visit the documentation to learn how to use File List.

Improvements and Updates

• Add role value to presence in mgt-person #1257
• Add 'presentational' loading template when mgt-get component refreshes #1242
• Add loading document thumbnails in mgt-get #1222 (thanks @waldekmastykarz)
• Add loading progress ring in mgt-file-list #1221
• Add group type multi selection in mgt-people-picker #1186
• Add selectGroupsById support in mgt-people-picker #1174 (thanks @umaknow-william)
• Allow PublicClientApplication to be passed directly into Msal2Provider #1181 (thanks @isaacfimbres1)
• Update timeCached for cached users without photo when recheck after configured caching period #1247 (thanks @NathZ1)
• Update cursor to pointer when mgt-person-card is clickable #1282 (thanks @jonepo)
• Add support to new apisandbox solution #1258

New samples:

• Add Msal2Provider SSO sample in ASP.NET Core #1239
• Add Msal2Provider sample in Angular #1192

Bug fixes:

• Fix bug: insight file rendering from cache in mgt-file-list - #1251
• Fix bug: cleanup unused css in mgt-person-card - #1250
• Fix bug: templateContext not passed to templateRendered event - #1237
• Fix bug: calling functions with multiple args in tempalteContext - #1227 (thanks @waldekmastykarz)
• Fix bug: filter out null groups in mgt-people-picker - #1205
• Fix bug: pre-encode name/email for users that contain '#' sign - #1197
• Fix bug: updated dependencies in ProxyProvider sample - #1300
• Fix bug: mgt-agenda header display for all day events - #1291 (thanks @SharePointJR)
• Fix bug: default image for mgt-person-card standalone - #1288
• Fix bug: templateContext changes will trigger re-rendering of templates - #1279
• Fix bug: css custom properties not properly set when using --input-border-* - #1278
• Fix bug: overflow text on task titles - #1276 (thanks @iorivera)

v2.2.1

This version includes a service update to align with sandbox proxy api changes.

Microsoft Graph Toolkit v2.2.0

Announcing the general availability of Microsoft Graph Toolkit v2.2! This release introduces two new components: File and File List, a new authentication provider for MSAL 2, and a new mgt-spfx package for working with Microsoft Graph Toolkit in SharePoint Framework.

Updating your application

To update your application to use the newest version of Microsoft Graph Toolkit, navigate to your project directory and run:
npm i @microsoft/mgt@latest

If you’re using the Toolkit via mgt-loader, your application will be automatically updated to the newest version.

File Component

PR: #910
Docs: File Component

The File component can be used to display a single file or folder that is stored in OneDrive or a SharePoint document library. The component retrieves a file’s data from Microsoft Graph and renders the file using its name, an icon representing the file type, and other configurable properties such as the last modified date, file size, or author. As a developer, all you need to do is drop the component in your app and provide a set of identifiers or a query to the file you want to show.

File List Component

PR: #919
Docs: File List Component

The File List component builds on top of the File component and enables you to display a list of multiple files and/or folders with just one line of code. You can specify what files to show by providing a set of identifiers or a query to the desired drive or site, or you can provide an insight type such as trending, used, or shared, to show only files that are most relevant to the signed in user.

Below is an example that displays all files in the signed in user’s root drive, which is the default behavior:

To try out these components, check out the samples on our playground.

MSAL 2 Provider

PR: #969
Docs: MSAL 2 Provider

We’ve introduced a new authentication provider for MSAL 2.0. This new provider uses authorization code flow, which is more secure than the implicit grant flow used in our original MSAL provider, so we recommend the use of this provider when building web applications going forward.

If you are already using the original MSAL provider in your application, you can easily switch over with just a couple of steps by following the instructions here.

SharePoint Framework Library for Microsoft Graph Toolkit

PR: #856 (thanks @waldekmastykarz and @rabwill)
Docs: SharePoint Framework library for Microsoft Graph Toolkit

Another new feature included in this release is a new SharePoint Framework library for Microsoft Graph Toolkit. The new package allows developers to deploy the Microsoft Graph Toolkit to their tenant and reference components in any webpart, avoiding any registration conflicts and duplication across webparts. If you are looking to build SharePoint web parts that use Microsoft Graph Toolkit components, this library now makes it easier to develop and manage your web parts.

Improvements and Updates

<mgt-person>

• Added support to fetch additional person properties not available by default - #913
• Added presence to default template - #965 (thanks @harlankoehn)
• Updated presence APIs usage from beta to v1.0 - #1014
• Added --avatar-cursor custom property - #1076 (thanks @NathZ1)

<mgt-people>

• Added support for additional graph queries - #963 (thanks @waldekmastykarz)

<mgt-people-picker>

• Added user-type \ userType to configure what type of users can be picked - #1119
• Added default-selected-group-ids \ defaultSelectedGroupIds to select groups on initial load - #1123 (thanks @jeroenvdmeer)
• Added support for entering any email address - #1069

<teams-channel-picker>

• Updated scopes to Channel.ReadBasic.All and Team.ReadBasic.All - #943 (thanks @Abderahman88)
  • the developer must opt in to use the new scopes to avoid breaking changes - #1120

<mgt-file-list>

• Added custom properties to style file border - #1075 (thanks @aaclage)
• Added reload method to clear cache and reload state - #1151 (thanks @aaclage)

MsalProvider

• Added support for domainHint - #925
• Added support for prompt - #998

mgt-react

• Exported the templateRendered event - #966
• Added ref support - #1137

General

• Replaced Microsoft Graph Beta Types with npm package to removed dependency on git - #929
• Added provider type to SdkVersion header for analytics - #956
• Added requiredScopes static getter to all component to get all required scopes for that type of component - #999 (thanks @waldekmastykarz)

Bug Fixes

• [mgt-agenda] - Fixed handling of UTC dates - #944 (thanks @waldekmastykarz)
• [mgt-person] - Fixed avatar presence style - #952
• [mgt-person] - Fixed avatar image for legacy accounts - #968
• [mgt-person] - Fixed unnecessary image fetching when avatarType is set to initials - #1006
• [mgt-people-picker] - Fixed selectedUsersById parameter types - #961 (thanks @Alikont)
• [mgt-people-picker] - Fixed keyboard tab navigation - #1002
• [mgt-people-picker] - Fixed exceptions thrown when user has not consented to people scopes - #1118
• [mgt-person-card] - Fixed displaying profile information - #1005
• [mgt-file-list] - Fixed state not refreshing when pageSize changed - #1112 (thanks @aaclage)
• [mgt-file-list] - Fixed highlight state for clicked file - #1151 (thanks @aaclage)
• [mgt-file] - Fixed OneNote icon not rendering - #1098 (thanks @aaclage)
• [mgt-file] - Fixed folder names with dot and upper case file extensions - #1146 (thanks @aaclage)
• Fixed caching bug when IndexedDB is not supported - #1016

v2.1.0

Microsoft Graph Toolkit v2.1

Announcing the general availability of Microsoft Graph Toolkit 2.1! This release introduces a new auth provider for Electron and many improvements to components and providers.

Updating your application

To update your application to use the newest version of Microsoft Graph Toolkit, navigate to your project directory and run:
npm i @microsoft/mgt@latest

If you’re using the Toolkit via mgt-loader, your application will be automatically updated to the newest version.

New Electron Provider - #868

The Electron provider uses msal-node to sign in users and acquire tokens to use with Microsoft Graph in an Electron application with only few lines of code. This is a brand new package you can install in your electron applications:

npm install @microsoft/mgt-element @microsoft/mgt-electron-provider

Take look at the documentation to learn more, or try the sample to see it in action.

Other improvements

• [mgt-react] Added support for HTML attributes and events, such as className, id, onClick - #855 and #857 (thanks @chingucoding and @tavikukko)
• [mgt-people-picker] Added disabled attribute and property - #858 (thanks @Ramakrishnan24689) and #916 (thanks @Abderahman88)
• [mgt-person] Added support for searching across the users endpoint - #860 (thanks @aakashbhardwaj619)
• [mgt-person] Added line click events - #882 (thanks @aakashbhardwaj619)
• [mgt-person] Added avatar-type property to disable fetching image and use initials - #896
• [mgt-person] Added fallback-details attribute when no person/user is found in graph - #900 (thanks @Abderahman88)
• [mgt-person] Added templates for metadata lines in person - #906
• [proxy provider] Added consistencylevel header - #886 (thanks @bakerzdozen13)

Bug fixes

• [mgt-channel-picker] Fixed overflow - #867
• [mgt-person] Fixed userid not updating component - #875
• [mgt-todo] Fixed bug in saving new todo task datetime - #909
• Fixed flyouts when used in a parent with css transform - #921
• Fixed state not getting cleared from components on sign out - #915 and #920

v2.0.1

• Added graph client dependency to packages that use it - #850
• Fixed people picker flyout layout - #853

v2.0.0

Microsoft Graph Toolkit v2.0

Announcing the general availability of Microsoft Graph Toolkit 2.0! This release includes an abundance of exciting new features, improvements, and updates.

Updating your application

To update your application to use the newest version of Microsoft Graph Toolkit, navigate to your project directory and run:
npm i @microsoft/mgt@latest

If you’re using the Toolkit via mgt-loader, your application will be automatically updated to the newest version.

New Packages

The Microsoft Graph Toolkit has been adding so many new goodies, and we decided to split it into smaller packages to make it easier to pick and choose just the features you need:

• @microsoft/mgt-element
• @microsoft/mgt-components
• @microsoft/mgt-msal-provider
• @microsoft/mgt-sharepoint-provider
• @microsoft/mgt-teams-provider
• @microsoft/mgt-proxy-provider
• @microsoft/mgt
• @microsoft/mgt-react

React components

The @microsoft/mgt-react library exports all toolkit components as React components. Take a look at this example:

import { PeoplePicker, People } from '@microsoft/mgt-react';

const App = (props) => {
  const [people, setPeople] = useState([]);

  const handleSelectionChanged = (e) => {
    setPeople(e.target.selectedPeople);
  };

  return
    <div>
      <PeoplePicker selectionChanged={handleSelectionChanged} />
      Selected People: <People people={people} />
    </div>;
};

Documentation

Person Card Component Update

We’ve redesigned and added new features to the Person Card component so that you can easily display more information about a person. The new Person Card, displays additional profile information, such as skills and interests, a person’s organizational chart, relevant conversations and files shared between the signed-in user and a person, and more.

To Do Component

With the release of the new To Do API on Microsoft Graph, we’ve also created a new To Do component to view, create, and complete tasks in your applications. Documentation

New Features

• Support for theming of components - switch between light and dark theme or configure your own themes. - Documentation
• Addition of an optional, configurable cache - improve the loading performance and user experience of your apps - Documentation
• Support for configurable string localization - Documentation
• Support for configurable RTL rendering - Documentation

Breaking changes

Important: This update includes the following breaking changes that may impact your application:

• Deprecated properties
  • Person Component (mgt-person): showName and showEmail . Use the view property instead.
• Naming updates to CSS custom properties:
  • Agenda Component (mgt-agenda):
    • --event-background -> --event-background-color
  • Login Component (mgt-login):
    • --color -> --button-color
    • Added --button-color-hover
    • --background-color -> --button-background-color
    • --background-color--hover -> --button-background-color--hover
    • --popup-content-background-color -> --popup-background-color
    • Added --popup-color
  • People Picker (mgt-people-picker) and Teams Channel Picker (mgt-teams-channel-picker) Components:
    • --font-color -> --color
    • --input-hover-color -> --input-border-color--hover
    • --input-focus-color -> --input-border-color--focus
    • --placeholder-focus-color -> --placeholder-color--focus
    • --placeholder-default-color -> --placeholder-color

Updates and fixes

• Added support for localization - #619

• Added support for right to left - #619

• Added support for fetching images in mgt-get - #718 (thanks @sebastienlevert)

• Added Files section and updated Profile section in Person Card - #669

• Added support for a 3rd line in mgt-person - #710

• Added reload method to mgt-agenda - #754 (thanks @sebastienlevert)

• Added global config to disable Contact Apis in mgt-person - #753

• Added support for transitive search when group-id is set on mgt-people-picker - #741 (thanks @sebastienlevert)

• Added dark theme support to all remaining components - #793

• Updated mgt-people-picker to use new advanced user search api - #742

• Updated mgt-people-picker to search group members via Graph calls instead of fetching all members first - #741 (thanks @sebastienlevert)

• Adds support for preferred timezone in mgt-agenda - #737 and #746 (thanks @waldekmastykarz and @jasonjoh)

• Optimized fetching presence of multiple people with one graph call - #709 (thanks @sebastienlevert)

• Exposed getInitials and getColorFromName as protected from mgt-person- #751 (thanks @aakashbhardwaj619)

• Introducing new theming support for dark theme (supported in mgt-people-picker and mgt-teams-channel-picker) - #676

• Filtered out non-person entities in person card organization - #673

• Fixed cache to cache image state when no image is available - #670

• Exporting mgt-element from mgt - #661

• Updated mgt-react types in package.json from types.d.ts to index.d.ts (thanks @elav000) - #663

• mgt-get - added support for caching - #763 (thanks @sebastienlevert)

• Updated mgt-react components to default to default template when not specified - #778 (thanks @aakashbhardwaj619)

• Fixed mgt-people-picker loading spinner when searching for people - #766

• Fixed mgt-people-picker text highlighting - #770

• Fixed Tasks dataSource type in mgt-react - #730

• Fixed mgt-react types - #719 (thanks @RobPethick)

• Fixed mgt-person to only require 'Presence.Read' for current signed in user - #697

• Fixed issue where person would not update when personQuery and userId properties change - #706

• Fixed setting storeAuthStateInCookie in MsalProvider - #699

• Fixed type attribute to events property on agenda component -#687 (thanks @jasonjoh)

• Fixed issue where me call was cached in Proxy Provider - #694

• Fixed blur event fire ordering on selection of person in People Picker - #696

• Fixed font in mgt-tasks arrow options - #722

• Fixed rendering of user-avatar and initials in person/person-card - #684

• Fixed mgt-people-picker input box deleting characters - #765

• Person Card - #774

  • Batching most graph calls to ensure the data is loaded as fast as possible with as few requests as possible
  • Sections now only render if there is data to show (there should no longer be 'no-data' rendered)
  • Restored basic templating (additional-details now works again)
  • Removed input box for sending quick message since those APIs are not available in the graph
  • Added global configuration api to configure what sections show up in the person card

    import { MgtPersonCard } from '@microsoft/mgt';
    MgtPersonCard.config.sections.profile = false;

  • Fixed issue with person card rendering of screen. The person card will make sure it is always visible and even move/animate when expanded
  • Fixed issue where the expanded view was not scrollable
  • Fixed issue where the person card state would not reset when dismissed
  • Sections
    • Contact compact view now supports copying
    • Files section now shows proper file icons
    • Organization now shows direct reports
    • Organization compact mode now shows direct reports when no manager is available (ex: CEO)
  • Added rtl support - #791
  • Added localization support - #798

• Package split - factored out toolkit into more packages - #767

  • @microsoft/mgt-element - base classes for creating components and providers
  • @microsoft/mgtmgt-components - all components
  • providers
    • @microsoft/mgtmgt-msal-provider - the msal provider
    • @microsoft/mgtmgt-teams-provider - the teams provider
    • @microsoft/mgtmgt-proxy-provider - the proxy provider
    • @microsoft/mgtmgt-sharepoint-provider - the sharepoint provider
  • @microsoft/mgtmgt - main package re-exporting all of the above
  • @microsoft/mgtmgt-react - react package

A special shoutout

The Microsoft Graph Toolkit team would like to give a special shoutout and thank you to everyone who has contributed to the Microsoft Graph Toolkit project, whether it was reporting a bug, fixing a bug, or submitting a new sample or feature. Special thanks to:

• @sebastienlevert
• @aakashbhardwaj619
• @RobPethick
• @chingucoding
• @HiltonGiesenow
• @MaJaHa95
• @Abderahman88
• @jasonjoh
• @waldekmastykarz
• @elav000
• @CameronDwyer
• @simonagren

We truly appreciate and welcome all community contributions!

2.0.0-rc.1

First 2.0 release candidate

2.0.0-preview.9

This prerelase update includes the following updates:

• Added dark theme support to all remaining components - #793

• Person Card - #774

  • Batching most graph calls to ensure the data is loaded as fast as possible with as few requests as possible
  • Sections now only render if there is data to show (there should no longer be 'no-data' rendered)
  • Restored basic templating (additional-details now works again)
  • Removed input box for sending quick message since those APIs are not available in the graph
  • Added global configuration api to configure what sections show up in the person card

    import { MgtPersonCard } from '@microsoft/mgt';
    MgtPersonCard.config.sections.profile = false;

  • Fixed issue with person card rendering of screen. The person card will make sure it is always visible and even move/animate when expanded
  • Fixed issue where the expanded view was not scrollable
  • Fixed issue where the person card state would not reset when dismissed
  • Sections
    • Contact compact view now supports copying
    • Files section now shows proper file icons
    • Organization now shows direct reports
    • Organization compact mode now shows direct reports when no manager is available (ex: CEO)
  • Added rtl support - #791
  • Added localization support - #798

• Package split - factored out toolkit into more packages - #767

  • @microsoft/mgt-element - base classes for creating components and providers
  • @microsoft/mgtmgt-components - all components
  • providers
    • @microsoft/mgtmgt-msal-provider - the msal provider
    • @microsoft/mgtmgt-teams-provider - the teams provider
    • @microsoft/mgtmgt-proxy-provider - the proxy provider
    • @microsoft/mgtmgt-sharepoint-provider - the sharepoint provider
  • @microsoft/mgtmgt - main package re-exporting all of the above
  • @microsoft/mgtmgt-react - react package

• Other

  • mgt-get - added support for caching - #763 (thanks @sebastienlevert)
  • Updated mgt-react components to default to default template when not specified - #778 (thanks @aakashbhardwaj619)
  • Fixed mgt-people-picker loading spinner when searching for people - #766
  • Fixed mgt-people-picker text highlighting - #770

v2.0.0-preview.6

This prerelase update includes the following updates:

• Added reload method to mgt-agenda - #754 (thanks @sebastienlevert)
• Added global config to disable Contact Apis in mgt-person - #753
• Added support for transitive search when group-id is set on mgt-people-picker - #741 (thanks @sebastienlevert)
• Updated mgt-people-picker to use new advanced user search api - #742
• Updated mgt-people-picker to search group members via Graph calls instead of fetching all members first - #741 (thanks @sebastienlevert)
• Fixed mgt-people-picker input box deleting characters - #765

v2.0.0-preview.4

This prerelase update includes the following updates:

• Added support for localization - #619
• Added support for right to left - #619
• Added support for fetching images in mgt-get - #718 (thanks @sebastienlevert)
• Introducing new theming support for dark theme (supported in mgt-people-picker and mgt-teams-channel-picker) - #676
• Added support for a 3rd line in mgt-person - #710
• Adds support for preferred timezone in mgt-agenda - #737 and #746 (thanks @waldekmastykarz and @jasonjoh)
• Optimized fetching presence of multiple people with one graph call - #709 (thanks @sebastienlevert)
• Exposed getInitials and getColorFromName as protected from mgt-person- #751 (thanks @aakashbhardwaj619)
• Fixed Tasks dataSource type in mgt-react - #730
• Fixed mgt-react types - #719 (thanks @RobPethick)
• Fixed mgt-person to only require 'Presence.Read' for current signed in user - #697
• Fixed issue where person would not update when personQuery and userId properties change - #706
• Fixed setting storeAuthStateInCookie in MsalProvider - #699
• Fixed type attribute to events property on agenda component -#687 (thanks @jasonjoh)
• Fixed issue where me call was cached in Proxy Provider - #694
• Fixed blur event fire ordering on selection of person in People Picker - #696
• Fixed font in mgt-tasks arrow options - #722
• Fixed rendering of user-avatar and initials in person/person-card - #684