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:

We truly appreciate and welcome all community contributions!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v2.0.0