{"id":4976,"date":"2020-07-02T12:47:39","date_gmt":"2020-07-02T19:47:39","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4976"},"modified":"2021-10-18T10:54:42","modified_gmt":"2021-10-18T17:54:42","slug":"a-lap-around-microsoft-graph-toolkit-day-13-using-microsoft-graph-toolkit-with-react","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/a-lap-around-microsoft-graph-toolkit-day-13-using-microsoft-graph-toolkit-with-react\/","title":{"rendered":"A Lap around Microsoft Graph Toolkit Day 13 \u2013 Using Microsoft Graph Toolkit with React"},"content":{"rendered":"

Updates (December 2020):<\/strong><\/p>\n

As of December 11th, 2020, the Microsoft Graph Toolkit team released version 2.0. In this version, mgt-react<\/strong><\/a> is officially included as part of the project. There is a newly updated guide on how to use the Microsoft Graph Toolkit with React here.<\/a><\/p>\n

Author: Fabio Franzini<\/span><\/span><\/strong>, Microsoft Office Development and Microsoft Business Application MVP<\/p>\n

@franzinifabio<\/span><\/a>|\u00a0<\/span>GitHub<\/span><\/a>\u00a0|\u00a0<\/span>LinkedIn<\/span><\/a>\u00a0<\/span><\/p>\n

Introduction<\/span>\u00a0<\/span><\/h3>\n

Welcome to Day 13 of the <\/span>Microsoft Graph Toolkit blog series<\/span><\/a>!<\/span>\u00a0<\/span><\/p>\n

There are many application scenarios where developers need to create or modify stand-alone web applications using specific frameworks such as React\u00a0<\/span>– not just<\/span>\u00a0HTML\u00a0<\/span>or<\/span>\u00a0<\/span>JavaScript.<\/span>\u00a0<\/span>Microsoft itself uses\u00a0<\/span>this framework\u00a0<\/span>in many services and libraries among the most famous there is Fluent UI, a UI control library used in the Microsoft 365 services ecosystem and beyond.<\/span>\u00a0<\/span>In this blog, we <\/span>create a web application in React and\u00a0<\/span>show you\u00a0<\/span>how to\u00a0<\/span>use the<\/span>\u00a0<\/span>Microsoft Graph Toolkit <\/span>for<\/span>\u00a0both<\/span>\u00a0<\/span>a<\/span>uthentication\u00a0<\/span>and e<\/span>vent<\/span>\u00a0visualization<\/span>. \u00a0<\/span>\u00a0<\/span><\/p>\n

Here is a preview of the web application<\/strong><\/em><\/p>\n

\"View<\/p>\n

In making the application, we use two approaches. <\/span>First, we<\/span>\u00a0integrate the MGT components directly with React<\/span>\u00a0and<\/span> highlight<\/span> everything needed to make things work<\/span>.\u00a0<\/span>Then, we use the<\/span>\u00a0MGT-React library<\/span>,\u00a0<\/span>a set of React controls that wrap<\/span>\u00a0the MGT web component library.<\/span>\u00a0<\/span><\/p>\n

Creating\u00a0Web\u00a0App in React<\/span>\u00a0<\/span><\/h3>\n

First<\/span>,<\/span>\u00a0w<\/span>e <\/span>create a<\/span>\u00a0<\/span>w<\/span>eb\u00a0<\/span>a<\/span>pp in React.<\/span>\u00a0<\/span><\/p>\n

There are several ways to do this, but\u00a0<\/span>let\u2019s make it easy by<\/span>\u00a0us<\/span>ing<\/span>\u00a0a simple command called “create-react-app”.<\/span>\u00a0<\/span>This command is extremely powerful because, thanks to the many options available, it is possible to do the scaffolding of the entire project\u00a0<\/span>with just a few<\/span>\u00a0manual operations<\/span>. \u00a0And,<\/span>\u00a0by executing this command using \u201c<\/span>npx<\/span>\u201d<\/span>,<\/span> we don’t need to worry about the version as it always runs the latest version available.<\/span>\u00a0<\/span><\/p>\n

npx\u202fcreate-react-app\u202fdemo-mgt-react\u202f--template\u202ftypescript<\/pre>\n
I added \u201c–template typescript\u201d as a parameter to use TypeScript as a programming language instead of the classic JavaScript.<\/span>\u00a0<\/span><\/p>\n
Now that we have created the project, we add the necessary\u00a0npm\u00a0librar<\/span>y that is “@microsoft\/mgt”:<\/span>\u00a0<\/span><\/p>\n
npm\u202finstall\u202f@microsoft\/mgt\u202f\u2013save<\/pre>\n
Using MGT Providers\u00a0<\/strong><\/p>\n
To<\/span> recover data, this application requires you to have a provider configured. <\/span>In this example we\u2019re using<\/span>\u00a0<\/span>MsalProvider<\/span>, but we could use any other provider provided by MGT, it depends on the context in which you\u00a0<\/span>have to<\/span>\u00a0use it.<\/span>\u00a0<\/span>Inside the\u00a0<\/span>App.tsx<\/span>\u00a0file we are going to add the following code which<\/span>\u00a0(when<\/span>\u00a0using a valid Client-I<\/span>D)<\/span>\u00a0allows you to set\u00a0<\/span>MsalProvider<\/span>\u00a0and use its status to check if the user is logged in or not.<\/span>\u00a0<\/span><\/p>\n
function\u202fApp()\u202f{ \n\u202f\u202fconst\u202f[isLoggedIn,\u202fsetIsLoggedIn]\u202f=\u202fuseState(false); \n\u202f\u202fProviders.globalProvider\u202f=\u202fnew\u202fMsalProvider({\u202fclientId:\u202f'[CLIENT_ID]'\u202f}); \n\u202f\u202fProviders.globalProvider.onStateChanged((e)\u202f=>\u202f{ \n\u202f\u202f\u202f\u202fif\u202f(Providers.globalProvider.state\u202f!==\u202fProviderState.Loading) \n\u202f\u202f\u202f\u202f\u202f\u202fsetIsLoggedIn(Providers.globalProvider.state\u202f===\u202fProviderState.SignedIn); \n\u202f\u202f}); \n\u202f\u202f... \n}<\/pre>\n
Using MGT\u00a0with “mgt-react”<\/strong><\/p>\n
A<\/span>\u00a0<\/span>more<\/span>\u00a0elegant way of integrating MGT with React is to use the mgt-react library. This is a library of React components that wraps all MGT components. Let’s see how it is used.<\/span>\u00a0<\/span><\/p>\n
First<\/span>,<\/span>\u00a0we need to add the\u00a0<\/span>npm<\/span>\u00a0package:<\/span>\u00a0<\/span><\/p>\n
npm\u202finstall\u202fmgt-react\u202f-\u2013save<\/pre>\n
\u00a0<\/span><\/span>Then we import the components (React) that we want to use:<\/span><\/span>\u00a0<\/span><\/p>\n
import\u202f{\u202fAgenda,\u202fMgtTemplateProps\u202f}\u202ffrom\u202f'mgt-react';<\/pre>\n
All the attributes and events of the MGT component are mapped as properties of the corresponding React component, very simple.<\/span>\u00a0<\/span><\/p>\n
For the templating part, however, everything changes. We can use all the power and knowledge\u00a0<\/span>i<\/span>n React to define the template with the syntax and components in React!<\/span>\u00a0<\/span><\/p>\n
We can define a React component that has the\u00a0MgtTemplateProps\u00a0object as its type of props, like this:<\/span>\u00a0<\/span><\/p>\n
import\u202f{\u202fMgtTemplateProps\u202f}\u202ffrom\u202f'mgt-react'; \n\nconst\u202fMyEvent\u202f=\u202f(props:\u202fMgtTemplateProps)\u202f=>\u202f{ \n\u202f\u202fconst\u202f{\u202fevent\u202f}\u202f=\u202fprops.dataContext; \n\u202f\u202freturn\u202f<div>{event.subject}<\/div>; \n};<\/pre>\n
And use it in the component (always React) Agenda like this:<\/span><\/span>\u00a0<\/span><\/p>\n
import\u202f{\u202fAgenda\u202f}\u202ffrom\u202f'mgt-react'; \n \nconst\u202fApp\u202f=\u202f(props)\u202f=>\u202f{ \n\u202f\u202freturn\u202f<Agenda> \n\u202f\u202f\u202f\u202f<MyEvent\u202ftemplate=\"event\"> \n\u202f\u202f<\/Agenda> \n}<\/pre>\n
The “template” property<\/span>\u00a0(<\/span>defined into the \u201d<\/span>MgtTemplateProps<\/span>\u201d type<\/span>)<\/span>\u00a0is used to understand which template (available in the Agenda control)\u00a0<\/span>is associated with\u00a0<\/span>the\u00a0<\/span>MyEvent<\/span>\u00a0control<\/span>.<\/span>\u00a0<\/span><\/p>\n
In this case, there is no need to use the ref property to “hook” the context of the template with custom functions. <\/span>S<\/span>imply create the functions you need in the component that acts as a template.<\/span>\u00a0<\/span><\/p>\n
Let’s now implement the same template as before with the new set of React controls:<\/span>\u00a0<\/span><\/p>\n
import\u202fReact\u202ffrom\u202f'react'; \nimport\u202f'@microsoft\/mgt'; \nimport\u202f{\u202fAgenda,\u202fMgtTemplateProps\u202f}\u202ffrom\u202f'mgt-react'; \n \nconst\u202fAgendaReact =\u202f()\u202f=>\u202f{ \n\u202f\u202f\u202f\u202freturn\u202f( \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<Agenda\u202fgroupByDay={true}\u202f> \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<Event\u202ftemplate=\"event\"\u202f\/> \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<NoData\u202ftemplate=\"no-data\"\u202f\/> \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<\/Agenda> \n\u202f\u202f\u202f\u202f); \n} \n \nconst\u202fEvent\u202f=\u202f(props:\u202fMgtTemplateProps)\u202f=>\u202f{ \n\u202f\u202f\u202f\u202fconst\u202f{\u202fevent\u202f}\u202f=\u202fprops.dataContext; \n\u202f\u202f\u202f\u202fconst\u202fopenWebLink\u202f=\u202f()\u202f=>\u202f{ \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202fwindow.open(event.webLink,\u202f'_blank'); \n\u202f\u202f\u202f\u202f}; \n \n\u202f\u202f\u202f\u202fconst\u202fgetDate\u202f=\u202f(dateString:\u202fstring)\u202f=>\u202f{ \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202flet\u202fdateObject\u202f=\u202fnew\u202fDate(dateString); \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202freturn\u202fdateObject.setHours(0,\u202f0,\u202f0,\u202f0); \n\u202f\u202f\u202f\u202f}; \n \n\u202f\u202f\u202f\u202fconst\u202fgetTime\u202f=\u202f(dateString:\u202fstring)\u202f=>\u202f{ \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202flet\u202fdateObject\u202f=\u202fnew\u202fDate(dateString); \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202freturn\u202fdateObject.getHours().toString().padStart(2,\u202f'0') \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f+\u202f':'\u202f+ \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202fdateObject.getMinutes().toString().padStart(2,\u202f'0'); \n\u202f\u202f\u202f\u202f}; \n \n\u202f\u202f\u202f\u202freturn\u202f( \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<div\u202fclassName=\"...\"> \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<div\u202fclassName=\"...\"\u202fonClick={()\u202f=>\u202f{\u202fopenWebLink();\u202f}}> \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f{event.subject} \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<\/div> \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f{(getDate(event.start.dateTime) \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f==\u202fgetDate(event.end.dateTime))\u202f? \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<div\u202fclassName=\"...\"> \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202ffrom\u202f{getTime(event.start.dateTime)} \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202fto\u202f{getTime(event.end.dateTime)} \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<\/div> \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f:\u202fnull \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f} \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f{(event.body.content\u202f!=\u202f'')\u202f? \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<div\u202fclassName=\"...\" \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202fdangerouslySetInnerHTML={{\u202f__html:\u202fevent.body.content\u202f}}\u202f\/> \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f:\u202fnull \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f} \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202f<\/div> \n\u202f\u202f\u202f\u202f); \n}; \n \nconst\u202fNoData\u202f=\u202f(props:\u202fMgtTemplateProps)\u202f=>\u202f{ \n\u202f\u202f\u202f\u202freturn\u202f<div\u202fclassName=\"...\"> \n\u202f\u202f\u202f\u202f\u202f\u202f\u202f\u202fNo\u202fevents\u202fto\u202fshow \n\u202f\u202f\u202f\u202f\u202f\u202f<\/div> \n}; \n \nexport\u202fdefault\u202fAgendaReact;<\/pre>\n
Add a style to this React App\u00a0<\/strong><\/p>\n
Obviously<\/span>,<\/span>\u00a0what is missing is a bit of style. MGT components already have their own style, but when we go to define our\u00a0<\/span>templates,<\/span>\u00a0we\u00a0<\/span>must<\/span>\u00a0make do with the CSS we want to use. In this example application I used a very interesting CSS framework, Tailwind CSS<\/span>, added as a regular\u00a0<\/span>npm<\/span>\u00a0package:<\/span>\u00a0<\/span><\/p>\n
npm\u202finstall\u202ftailwindcss\u202f-\u2013save<\/pre>\n
As for\u00a0<\/span><\/span>T<\/span><\/span>ailwind<\/span><\/span>\u00a0<\/span><\/span>CSS<\/span><\/span>, the only thing we need to do before using it in the project is to create a file like “tailwind.<\/span>css<\/span>” in the root of the \u201c<\/span><\/span>src<\/span><\/span>\u201d folder and\u00a0<\/span><\/span>add this<\/span><\/span>\u00a0content:<\/span><\/span>\u00a0<\/span><\/p>\n
@tailwind\u202fbase; \n@tailwind\u202fcomponents; \n@tailwind\u202futilities;<\/pre>\n
This is used by the\u00a0<\/span>T<\/span>ailwind<\/span>\u00a0CSS<\/span>\u00a0<\/span>compiler to\u00a0<\/span>generate the CSS that will contain the classes used.<\/span>\u00a0<\/span><\/p>\n
Now the only thing to do is to use the classes that the framework makes available to give style to the application.<\/span>\u00a0<\/span>I leave you at the official link to learn more about\u00a0<\/span>T<\/span>ailwind<\/span>\u00a0CSS<\/span>\u00a0<\/span>here:\u00a0<\/span>https:\/\/tailwindcss.com\/<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n
Recap<\/span>\u00a0<\/span><\/h3>\n
We have come to an end and we have managed to use MGT within a React application.<\/span><\/p>\n
You can find the\u202fsource code for this\u202fReact App sample here:\u00a0<\/span>https:\/\/github.com\/microsoftgraph\/mgtLap-TryItOut<\/span>\u00a0<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Welcome to Day 13 of the\u00a0Microsoft Graph Toolkit blog series!\u00a0There are many application scenarios where developers need to create or modify stand-alone web applications using specific frameworks such as React\u00a0– not just\u00a0HTML\u00a0or\u00a0JavaScript.\u00a0In this blog, we create a web application in React and\u00a0show you\u00a0how to\u00a0use the\u00a0Microsoft Graph Toolkit for\u00a0both\u00a0authentication\u00a0and event\u00a0visualization. \u00a0\u00a0<\/p>\n","protected":false},"author":69077,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[34],"class_list":["post-4976","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","tag-microsoft-graph-toolkit"],"acf":[],"blog_post_summary":"
Welcome to Day 13 of the\u00a0Microsoft Graph Toolkit blog series!\u00a0There are many application scenarios where developers need to create or modify stand-alone web applications using specific frameworks such as React\u00a0– not just\u00a0HTML\u00a0or\u00a0JavaScript.\u00a0In this blog, we create a web application in React and\u00a0show you\u00a0how to\u00a0use the\u00a0Microsoft Graph Toolkit for\u00a0both\u00a0authentication\u00a0and event\u00a0visualization. \u00a0\u00a0<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69077"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=4976"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4976\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=4976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}