Up next in 10
Microsoft 365 Fast track Development in React by Abhijeet Jadhav || React Virtual Conference
3K views
Nov 9, 2023
With few lines of code you can implement complete customized functionality of customized people picker, SharePoint list items update using the Microsoft Graph Toolkit. This session explains the details of Microsoft Graph Toolkit with live demo using React About Speaker Microsoft Certified Azure Architect, Blogger, Speaker, PMP Certified Professional with 15+ years of experience. Abhijeet is a C# Corner MVP for the year 2019-2020. He loves exploring and sharing knowledge in MS Azure, Office 365 development, and Modern digital workplace. Specialized to utilize modern technologies in building customized business solutions and have been instrumental in multiple Enterprise solutions. C# Corner - Community of Software and Data Developers https://www.c-sharpcorner.com
View Video Transcript
0:00
Here we are going to talk about Microsoft 365 FastTrack development in React
0:10
Before that, before we begin the session, I would like to introduce myself
0:14
I'm a Microsoft Certified Azure Architect, Blogger, Speaker, and PMP Certified Professional
0:21
with 15 plus years of experience. I love sharing my knowledge in the areas of Microsoft Azure
0:28
Office 365 development, modern digital development areas. Today, we are going to talk about
0:37
the Microsoft 365 fast-track development in React. Microsoft 365 and SharePoint is one of my favorite area
0:47
This is the agenda what we are going to cover today. So today we are going to have a given background
0:54
I'll give you the background about why, how, and what is that we are going to talk
1:01
And then I'll give you the Fast Act development evolution of Microsoft 365
1:05
We'll get into the Microsoft Graph Toolkit components because this is the base at which
1:11
you know, where the Fast Act development can happen. And there are Microsoft Graph Toolkit
1:16
components i'll talk about the providers and also i'll give you the cool demo and we will have the
1:24
the playground as well so before i start just yeah let me know uh yeah so i'll start with the background okay Okay
1:43
So for any given technology, these are the things which comes to mind
1:49
when we are developing an application or whenever we are adopting a new technology
1:54
So what is the new technology? What it has brought to us
1:59
How are we going to implement? And why should we adopt that particular
2:03
or why should we go for the development using that technology? So these are the three criteria
2:11
that we would first try to get into. And once we have the answers for this
2:18
then we choose our path and move forward. So taking that into consideration
2:25
I'll start with what. So consider you're developing a React application where you would like to pull the information
2:50
from the Microsoft 365 or you would like to push any information to Microsoft 365
2:55
Either it'd be a SharePoint, either it'd be an Outlook event, either you want to create
2:59
a Teams channel or you want to post messages to Teams channel, you would like to use the
3:03
People Picker functionality of Azure Active Directory and so on so forth
3:08
So for this, I will take an example of calendar, taking the events from your Outlook calendar
3:16
or creating the events from your Outlook calendar. Consider that as an example
3:21
For that, if you think of developing an application using React, what we would need to do
3:27
We would need to handle the authentication part. First and foremost, we would handle the authentication part
3:33
We would like to know if the user is authenticated. If user is not authenticated
3:37
we will check the properties here. So this is, I'm giving you an example
3:42
of a single page application, which I had built earlier. This is from the sample tutorial for Microsoft
3:49
So from there I have built this application and these were the steps which I had to take
3:54
when I was trying to build an application. So in this, what I have done is
4:01
first what I need to do is I need to check whether the user is authenticated. If the user is not authenticated
4:06
we would like to authenticate that user first. So that we are going to use here in the navigation bar
4:15
checking whether the user is authenticated. Then once the user is authenticated
4:19
we would need to write a function where we would need to include the Microsoft Graph APIs
4:26
and then write a component to pull the details. At least in the login component
4:33
we see that we would need a display name, we would need mailbox, email address, the sign out button
4:41
So all this information for the logged in user, how we can get that, we would need to call the API
4:51
A me API and then get the display name, mail, mailbox settings and so on and so forth
4:57
So once we get that information, now what we want to do is we want to get
5:01
all the events from the calendar. So to get that all the events
5:05
I would write one more component to get the data from the Microsoft 360 of the logged in user
5:14
So I would get, so the way I would write is I would initiate a call to the API with this
5:20
where I'm getting all my events and I am going to arrange it using the subject organizer
5:27
who has organized it, what is the start time, what is the end time
5:31
and I'll take all my events. So once I get my events
5:35
and this is like the response for that, and I will iterate it through pages
5:40
If the events are more than 50, then I will iterate through the events
5:45
So this is the third component which I'll write to get the calendar view
5:49
Now, consider that to write the writing time for this. Okay, if not weeks
5:57
it will take days to complete the whole application where you have the add, edit, update
6:02
for the Microsoft, for the events. Okay. So I need to pull the data
6:07
I need to create an event. I need to update the event. I need to delete the event
6:12
and also get all the information from Microsoft 365. Okay. So with the authentication functionality
6:21
So considering this, it would take a lot of time for us
6:27
Now, all these problems of these developers where the same thing you would need to do
6:35
you would need to create, you need to define the scope, you need to raise the, you need to call the end points
6:41
and you need to get the data and also have that data created
6:46
and structured in a presentable manner. So these were the things what we need to do
6:52
to help developers to develop these kinds of functionality, Microsoft has introduced a Microsoft Graph Toolkit
7:00
So this Microsoft Graph Toolkit, what it does is it not only pulls the data
7:05
it helps you to not only get the Microsoft 365 data from your application, but it also from
7:13
for the logged in user or for the external users, it not only gets the data from the Office 365
7:21
but also it will help you to show it in a presentable manner these are the so that how evolved You know I talk about the foster development evolution but that with the Microsoft Graph Toolkit
7:36
this is what you can do. So in short, if we can say
7:39
this was developed with the intention to help developers of all experience levels
7:45
If you want to develop a web application, Microsoft Teams tab, or if you want to develop a SharePoint web part
7:51
that connects to Microsoft Graph, Anything you can develop with this Microsoft Graph Toolkit
7:58
with the components which are available. Okay, so in short, to define the Microsoft Graph Toolkit
8:08
I would say it is a collection of reusable and framework agnostic web components
8:13
This is important. This is framework agnostic. That means you can write it into an HTML
8:18
You can write it into a React framework. You can write it into Angular
8:22
You can write it in any modern framework and it is platform framework agnostic
8:28
And that helps users to access and working with Microsoft Graph and get the data from the Office 365
8:36
And not only that, that these components are available and you can get the data
8:41
but also these components are extensible, customizable with a templating and you can apply your custom enterprise branding
8:51
to these templates. Okay, so let's talk about the fast track development
8:59
So, if we see the evolution of Microsoft 365 development, Microsoft Graph API was introduced
9:09
So Microsoft Graph API was introduced to provide a unified programmability model that can be
9:17
used to access tremendous amount of data in Microsoft 365, Windows 10, enterprise mobility, security
9:25
So this was the one endpoint by using which you could access all the Microsoft 365 data
9:36
So this is kind of an endpoint which rules all. But now consider a scenario where you would like to use this Graph API in your application
9:48
and you want to pull the data. You want to interact with the Microsoft 365 data
9:54
So for that, what would you need first? First you would need to finalize what is your Auth flow. Okay
10:01
Are you going to do a code flow? Are you going to, you know, have an implicit flow
10:07
That is the first thing you would need to decide when you are using Microsoft Graph API
10:13
After that, then you would need to write a code to request, to send the request to Microsoft
10:20
Graph endpoint. In this, you will take care of the authentication, the issuing of the tokens, which we just saw
10:26
that the issuing of the tokens and packing up the authentication, sending of the request
10:30
and getting the response back. Also, you would need to implement a sort of response coming back to the Microsoft Graph
10:37
and packaging that object. So once you get the response back, you would also need to package those objects
10:44
and also handle the errors. You would need to write the exception handling
10:47
and you would need to consider multiple scenarios, like connectivity, token expiry, caching, those things
10:56
So considering all these scenarios, what Microsoft did is they have... to help the developers, what Microsoft did is
11:08
they provided the Microsoft Graph SDK. So what this Microsoft Graph SDK does is
11:15
it helps to simplify, build high quality, efficient, resilient applications, accessing the Microsoft Graph
11:23
So you need not have to worry about the token expiry, you need not have to worry about the connectivity
11:29
and you, that low level coding, which you're doing for sending the request and getting the response back
11:35
those are handled by the Microsoft Graph SDK. And then this Graph SDK will help you to
11:48
it provides you the libraries, that control models, request builders, and also it has features for enhancing
11:55
and working with all the Graph API services. you know, either you can call SharePoint
12:00
you can call Outlook and all those. So those you can initiate the request using Graph SDKs
12:06
and you need not have to worry about accessing or the complete flow of it
12:10
That will be taken care by SDK. However, this Microsoft Graph SDKs
12:18
those are language specific. You know, Java has its SDK, the Android has its SDK
12:25
the Node.js has its SDK and so on and so forth. So these SDKs are designed to take care for the general plumbing kind of task
12:36
When you're making the calls to the Graph API, like making authentication requests
12:41
handling the responses, report if anything goes wrong. So all this can be done with few lines of code
12:48
We have seen that in the code snippet as well. We have called the .API and then we have initiated the request and
12:57
everything about sending the request, handling the response is taken care of by the SDK
13:03
Okay. Now, I'm just talking about, so I'm talking about the fast track development
13:12
So we first talked about how we can get the data from Office 365, Graph API was introduced
13:19
So to call multiple, to make the multiple calls and all other request response, SDK was introduced
13:26
But SDK is only taking the, so these are most, moreover, these SDKs are going to give you
13:34
the general plumbing task, right? So then Microsoft Graph Toolkit is introduced
13:42
So this is the newest thing, which is added in the development tool set
13:48
It is developed on top of Microsoft Graph API and Graph SDK
13:55
It not only use this SDKs, the Microsoft Graph SDKs to make the calls, but also inherits the beautiful UI
14:04
and render the components on the browser. So it will not only take care of the making calls part
14:12
the general plumbing task, but it will also help you to render it on your browser with a beautiful
14:20
you know, Microsoft kind of UI with Office UI, Office fabric UI, which is now we call it as fluent UI
14:28
but that kind of UI you get with Microsoft Graph Toolkit. So it connects the Graph API and renders the data
14:40
that looks and feels like Microsoft 365 experience. And you need not have to do any customization
14:46
if you don't have to. Like whatever is available out of the box, it is beautiful
14:53
and you can get the data and it is rendered on the screen where you need not have to do where you need not have to write so many lines of code to have that control on the screen
15:07
So, just to give you the, you know, snippet of it
15:16
what I'll do is, I'll show you the part, okay. So if you are seeing my screen, this is one line
15:26
the MGT login, this is a single line of code where when you write the single line of code
15:32
you will get the whole login component. The signing out of the user, the signing in of the user
15:36
you know, authentication part, it is all taken care by this MGT login
15:40
Or if you want to display the agendas, this is the code, what you can write. Okay
15:48
So as it is said, that lot of things are easier seen than said, right
16:00
So we will jump into our demo. I'll just initiate, I'll start creating the React app
16:07
as well as then I'll talk about the MGT components which are available
16:10
So let me know. I have already created the demo folder, so I will start from here
16:37
So what I'm going to, in this demo, what I'm going to show is it is now the fast track
16:44
development of Office 365, how easily you can do the development of getting the data
16:51
from Microsoft 365, render it on your screen without writing tons of lines of codes
17:07
So first what I'll do is I'll just create the basic React app
17:53
I'll use the template as TypeScript so that it will help us too
18:03
So we executed this command. Now I'm creating the app called Buildemo
18:08
And this will create the React application for us, the vanilla React application
18:12
So until this scaffolding happens, let's go ahead and I'll talk about the MJT components
18:23
So as I said that, you know, Microsoft draft tool tape, this is, these are the reusable
18:38
framework agnostic web components. So these are the all web components that are available
18:45
We have web component called login, which will give you the authentication, which will handle all the authentication part of it
18:52
We have person, agenda, tasks, people picker, person card, channel picker. So these are the different components which are available
19:00
So for example, tasks will give you either your planner task or if you want your to-do tasks
19:06
we can get with a single line of code. We can have the whole people picker functionality with the people picker component
19:16
We can get the person card. like you can see the email address the name of the person the uh the phone number and also
19:23
customize the additional properties uh in the person car uh we can have the channel picker of
19:29
the teams like if you have created a teams and you have multiple channels in the team you you can
19:35
have you can see that with the channel picker okay and then if you see i have highlighted mgt get
19:43
in Red Bold. The reason is it is very important and really useful component
19:51
because with MGT-GET, these are the standalone components where you can get
19:57
person, people, agenda. These are fixed for they have their own use. But with
20:03
MGT-GET, you can make a call to any end point to Microsoft 365, get the data
20:09
and display it as per the requirement, like you can customize the data
20:15
Once you get back the data, you can use the templates and customize the data from that
20:22
You can customize the, once you get the data, the template with the template
20:27
you can, as per your needs, you can modify the look and feel of it
20:31
And it can be rendered on the screen. So if you want data from Office
20:36
like if you want the data from SharePoint, you want the data from OneDrive
20:40
you can just use this mgt component and make a call and get the data back okay
20:49
let's go back to our uh scaffolding and we'll see okay it's it's still in progress so we'll
20:55
by the time we'll talk about uh i'll talk about the providers
21:00
so there are four types of providers okay the mcel provider okay so mcel provider uses the mcel
21:17
js in the background and with mcel js so it is microsoft authentication library the dot js so
21:26
So that JS is used to make the calls and get the data. We also have a SharePoint provider
21:31
Teams provider, proxy provider, and we can also have, so Teams provider is used, let's go one by one
21:39
So MSL provider, you can use it in your single page applications or in your HTML and maker
21:44
use the client ID and initiate the calls and get the data and render the data in your components
21:53
In SharePoint provider, you would not need the client ID because the user is already authenticated
22:00
You know, you are in the context of SharePoint and your components will be rendered in the context of
22:06
will already have the user context. So then you would need, then SharePoint provider is different than Mcell provider
22:15
And you can use this provider to make calls to Graph API and get the data
22:20
If you're writing any Teams tab, you know, or an extension in the Teams you can use Teams provider where you can make the call and you can create your own tab or you can create your own app into Teams using this provider
22:35
So proxy provider is used where you have your own set of authentication
22:41
and proxy provider will get authenticated and it will send you back the authentication tokens
22:49
So then in that case, the proxy provider is used or you can write your own custom provider
22:54
So you can write your own custom provider. You can decide when the user logs in
22:59
If you want to put some logic behind, then custom provider is the best option to go with
23:04
Then when the user is authenticated, you can also add your additional logic
23:09
and then send back whether the user is authenticated. And all those additional business logics
23:15
can be written for the custom provider. And say your legacy application
23:24
if it already has an authentication you can in that scenario also you can use the
23:29
custom provider because it will the system your your system will authenticate and finally provide
23:35
the tokens to this custom provider and it can then pass it pass on the the authentication information
23:49
okay so let me see whether i have this scaffolding ready Okay, I am into build demo now
24:25
So let me open this application from build demo. So we have this vanilla React application created
24:44
Now we will start writing the code using our Microsoft Graph Toolkit
24:50
Okay. first what we need to do here is, so we have this app.tsx and we have this index.tsx, right
24:59
So, here, the first step will be to add the provider. Okay
25:08
So the provider will give us the, you know, to acquire the tokens, the authentication part of it
25:16
as I was explaining, The providers will help you to sign in the users
25:21
and get the authentication token. So we will do that part first
25:40
So the first step for that is we need to install the NPM package
25:48
There's one more package. Let me add that package first and then we'll start
26:00
This is Microsoft MTT. This is the package which will give us the
26:05
when using this, we can add this provider. So we'll go ahead and add the provider
26:28
Meanwhile, I'll just go ahead and I'll start writing the code
26:49
It will throw an error, but once it is resolved, I think it should be good
26:58
I'll add the providers and then in this case I'm going to use mcel provider
27:23
Go ahead and instantiate it
27:39
So global provider. So here, what we are going to do is
28:06
we are going to have this, we would need to have the config entry for this, okay
28:13
So let me go ahead and add the config entry. So the config entry is for client ID
28:20
and I have already created the Azure Active Directory application and assign the permissions. So
28:32
I will share the details of that. At the end of the references, I have the link for where you can see how you would like to
28:45
if you want to create, or if you're not aware of how to create the Azure Active Directory
28:50
application, you can refer to that. So now I have defined my provider
28:59
So let me go back to the app.tsx, okay. Here, I'll remove all the unwanted code
29:13
Let me import the... Yeah, first we'll go ahead and import the..
29:29
let's start with the login component okay so we we are going to get here we'll get the login
29:39
component first so we'll go with this
29:59
Thank you. so we'll have the login component first okay so we'll have this login component and uh this creating
31:18
Yes, I'm expecting a localhost file here and it's already opened. Okay
31:33
So, I'll start from the beginning. So, let me start it from here
32:02
And because this is the first time we have created the application and running, it will
32:19
take time in the first loading. but I think after that it should be faster
32:35
So here we have our little sign in button. So what we have done so far, let's recap, okay
32:42
just for our understanding. What we have done here is we have created
32:51
We went here and we have added a provider, a global provider with the client ID
32:55
which has this information. And then we have provider and MSL provider added
32:59
So MSL provider, because we are using it in a single page application
33:03
And once that is done, we came here and then we have in the application
33:07
we have just added one tag. The only tag with what we have added here is
33:11
this is MGT login. This is a simple tag, what we have added. And also if you see, there is a few code added here
33:19
So what is code? The TypeScript will not understand the custom elements
33:25
You know, when we have created, it will not understand. So for that, so when you're creating an application
33:40
whenever you're creating a React application, React implements its own synthetic event system
33:45
It cannot listen to the DOM events coming from custom elements. So without using the workaround
33:52
So this is our workaround. So if you see here, you will need to use a ref to reference the toolkit components and manually attach the event listeners
34:02
So if you want to attach the event listeners, you can add event listener and then you can add this
34:11
So this is using this. You can add MGT login once you add it as any then you can use the component So once you add this your login component is ready And now I go ahead and sign in
34:26
Okay. So because I have not specified any client scope, I have not given the
34:34
I have just given the client ID and we have the complete authentication
34:38
mechanism ready. Okay. So you are here. And now I'm able to log in. Okay
34:49
So not only this, like the functionality which I have shown in my first slide
34:55
where I have shown where I had, I need to write four to six lines of code
34:59
to get my display name, my email address and the sign out functionality
35:04
So all this is, can be done using the single line of code
35:09
And that's what I call the fast track development. You write single line of code, you include the packages
35:17
the NPM packages, and write single line of code, and this is available to you
35:21
You can use sign-out, you can use sign-in functionality, and the user is signed out, and you can sign out
35:27
to the user and you can sign in. So you have the sign-in, sign-out functionality
35:32
in a single line of code. We have eight minutes, so I'll just go ahead and log in
35:37
and I'll show you what all things we have. What all things can we do with this
35:42
Okay, let's go ahead and do that. So now, the application which we had implemented
35:53
where we had the four components created just to get the event information
35:59
the calendar events which I have, and I can add the calendar information
36:04
so that I can get with a single line of code, and I'll show you that
36:10
this is my agenda and with one line of code uh you see here that all these four events are popped up okay so these
36:38
are the four events which i have created in my outlook so these are the four events okay for the
36:42
next three days what all events are available all those events are displayed on your screen
36:48
with just one line of code which is this okay you just write mgt agenda and then the display it is displayed on your screen not only that
37:03
you know, if this is so powerful with the attributes, you can also query the data and display it the way you want
37:13
Okay. So let me add this attribute to the MGT agenda. And you will see that the details
37:23
all the events are fetched. And not only that events are fetched
37:28
but the events are ordered using the start time start or date time, you know, the start time of the event
37:36
So using date time, the start, you can order the event using the sequence of, you know, when it is starting
37:46
So you can query the content of the event, you know, for all the events in your application
37:52
which is sending the parameters, the attributes from the stack. Okay. We also have, let me take this off and I'll show you the another component what we have
38:07
and that is MGT people. Let me show you the MGT people peeker because this is one of the control which I have used
38:23
in my applications and it was very difficult for me to do an LDAP query, get data from
38:28
the Active Directory and then map those users and also get the email information of that user and render it on my screen So it would take at least days to have this functionality implemented to pull the users
38:44
from my active directory and show it on the screen. Now I'm writing this line of code and this is how it is implemented
38:51
I go to my screen and the control is ready. I have applied some standard CSS, which is available
39:00
I'll just show you that the standard CSS, which is available. And I see all the users in my active directory
39:06
in my organization for the dev tenant, which I'm using, all the users are available from the
39:12
from my organization. And I can search the users. I can search multiple users in this
39:20
And that is, and this can be done only using one line of code that is a mgt people picker. Okay
39:27
let's go ahead further and say you have a scenario where you would want that in your people picker
39:38
that you want pre-selected users okay the users which are there in your people picker when the
39:45
people picker is loaded you want some users to be pre-selected so i'm using the object ids of
39:50
these users here for the demo and this default selected user ids attribute will directly show you
39:56
the users will be pre-selected. So if you see Adl and Chandler, these are the object IDs
40:07
which I've used in my application. And once I save that, I am seeing that these are pre-selected
40:13
And this is pretty sleek. Everything is available. All the users are available
40:19
and this is the custom CSS for this is also available where Microsoft provides the custom CSS
40:25
and you can use that, customize your CSS rather. So this is the standard CSS which is provided
40:32
I have customized it and I have changed the input border to 200 so that it comes in the center of the screen
40:38
But this is highly extensible. Now going back to my code. you can add so there are different say you want a people like there are five
40:55
the users which you would like to show on the screen you can have that
41:03
let me ask I think I would need to add the parameter here
41:19
and here actually
41:28
You can do a star and get everything, all the components, but you can pick and choose
41:32
as well. You know, you have an option of picking and choosing the components which you would like
41:36
to show and you know, the display those components. I'll take the people picker off
41:43
And it will give me the tasks. Okay, so the tasks which are assigned to me, all these tasks are visible
41:52
This is not, I was talking about not only viewing the data, but also creating the data
42:00
I'll use project estimation
42:10
I can use, I can choose the bucket in which I want to put. I can also have the due date for that
42:17
can also assign it to different users yeah okay i can i can assign the task and if i save this task it will be saved and you know you can have that
42:36
created so this is this is saved Yes I only showing assigned to me
43:01
So I need to show, I need to see all the tasks and because the one which I created just now
43:06
project estimation, it was assigned to Chandler and the second task which I created
43:13
And once the tasks are created, you can also manipulate the data from here and mark the
43:17
tasks as complete. And once you mark the task complete, all the tasks are completed as well
43:21
You can select the to-do task and the task assigned to me
43:26
You can have that. And all this is possible with a single line of code
43:31
Going back to my slide. So I said that to have the providers, you can have client ID here added and you can
43:41
use it for the providers as well. I showed you the demo
43:45
Now just to, because there are a lot of properties, there are a lot of functions and you know
43:49
there are so many things which you can play around. There is an app. There is a playground created by Microsoft
43:57
where you can go in and understand what is the, similar to Microsoft graph explorer
44:03
This is the playground where you can understand what all components are available
44:07
which components you can use. And this is pretty sleek. Yeah, you know, it is, I really love this when I want to
44:13
when I'm developing using Microsoft Graph Toolkit, I go here, I see the component which I'd like to build
44:20
I can also see the documents, you know, around it, that what all properties are available
44:26
All this is rendered like this, the properties for which are available
44:31
You can see the name of the attributes, the different we use to person query
44:37
and, you know, show name, show email, whatever we would like to show that is available here
44:41
And this is really a good playground area. I would suggest you to go ahead and tie your hand on this
44:50
Just my last slide. Now to conclude the advantages of graph toolkit
45:06
and the fast track development. See, you can use Office 365 for fast-track development
45:11
using Graph Toolkit because there are multiple advantages of using Graph Toolkit
45:16
First thing, it is cross-browser compatibility. So you can use it, all browsers
45:22
all modern browsers can use this. It will definitely cut your development time
45:27
We have seen the first page where we had, I'll just show you that
45:32
We have seen this tons of code, what we have written to get just a calendar view and log in the users
45:37
and then we have seen this one line of code where we are using and showing it
45:42
And we are seeing that it is definitely cutting the development time. It provides a familiar programming model
45:47
It is just DOM, CSS, HTML. You can press on the attributes
45:51
you can apply the CSS. It is highly extensible. So it is familiar program
45:56
It provides you a familiar programming model. So it doesn't require library
46:01
It works with all modern framework. You want to develop in Angular
46:05
you want to develop in React, Voo. Whatever framework you choose, you have that
46:10
and you can use these libraries to work with it. And this is tightly integrated with the browser dev tools
46:16
If you go in your developer tools and see what data is being sent and what data is received
46:22
you can also go in your dev tools and get the data and see the data of what is being sent
46:28
So I would highly recommend you to try your hand. I will upload this code in the GitHub and share it with you
46:34
I also have few of the resources. So if you'd like to use the Dev Playground
46:40
I already showed you the MGT Dev. There is a blog series available
46:44
The documentation for this, for all the components and providers are available
46:48
The code which I was running now, I'll upload in the GitHub and share it with you
46:52
And this was my demo. And this was the details which I would like to share
46:59
and my learning and share. If you have any queries, questions, please go ahead and ask