live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
In this session, we will learn about some of the useful react libraries that can be used in SharePoint Framework Solutions. We will see some cool demos on how to accelerate your development by using these libraries.
Conference Website: https://globaltechconferences.com/event/react-virtual-conference-2021/
C# Corner - Community of Software and Data Developers: https://www.c-sharpcorner.com
C# Live - Dev Streaming Destination: https://csharp.live
#react #webdevelopment #NPM #libraries
Show More Show Less View Video Transcript
0:00
Hey, welcome everyone to React virtual conference. The last session was very, very informative
0:09
I was really into, you know, like, rather than preparing myself, I was getting into
0:12
seeing details of what the, how the program was been written. So thanks for that. And
0:19
thanks for joining us again. Yeah, a little bit of introduction myself. I think I already
0:27
I mean, Simon has already played the video, so you already know, but just to conclude
0:32
these are some of my social handles through which if you want to connect with me
0:38
Okay, so today's session is about useful, useful MPM React libraries in SPFx, right
0:43
So let's start with MPM, okay? I'll just take maybe a quick couple of minutes
0:48
to see what MPM is about. So most of us would already know
0:52
it is basically what's largest software registry. It's an open source and most of the packages
0:58
which are available in the MPM are free. When I say most of this, I mean, there are many which are free
1:04
There are some paid also, but still many of the free ones
1:08
are the ones which are very much useful. It is a library to share and borrow packages
1:14
And the MPM consists of basically three components like the website, the command line interface
1:19
and the registry. So the website is the one from where we can basically go
1:24
and search for the packages which are available. And then there is a command line interface
1:28
which works as a part of our node.js installation through which we can install the NPM packages
1:33
using NPM install. And then there is the registry which is basically the database
1:37
where all the packages which are being available freely are hosted somewhere at a particular server
1:44
and somewhere it gets downloaded to a local machine. So that's about NPM
1:52
And now the second thing is we are here for React, right? So what is React basically
1:57
It is in JavaScript library as we all know. It is kind of, it is a front-end framework, okay
2:04
And it is programmably very simple and it performs very better. The reason being the architecture behind the library
2:14
which has been created. What it does is basically, it creates a virtual dome
2:21
in our actual dome. And what it does is any changes which we want to make
2:25
it first makes to the virtual DOM, okay? And doesn't reload the whole actual DOM, HTML DOM
2:32
and this makes it very faster than the regular DOM object. So there were still, there would be people
2:37
who would be using jqueries and everything. And we know that to change something on the UI
2:41
what we do is we basically find that particular DOM element using jquery and using IDs or maybe CSS class name
2:49
And then we basically change the DOM way we wanted to do it okay and react make it organized it's structured and it also you know
2:59
kind of it's a one-way reactive data flow it means that once we create states along with the classes
3:05
which we create and once we change the state it automatically would re-render the DOM and it will
3:10
send the updated html content to the user right and we can consider react as a v in our mbc so if
3:20
anybody who follows MVC pattern like model view controller so we can consider we can use V as a
3:27
react as a view in that particular design pattern right moving ahead SharePoint framework okay
3:35
this might be new to some of the people who are not from the SharePoint background but just to give an background on you know what this framework is about this is how we basically do the modern
3:45
client-side development on or customization on the sharepoint right and it is very lightweight
3:51
and it is backward compatible it means it the web part which we develop works with the classic
3:58
experience also and it is again open source and it supports all the basic javascript frameworks
4:05
which we have right and on top of it we can use graph apis lob system cloud services like for
4:11
For example, if you have your own APIs, which you can call and which you can create a web part
4:17
and which you can deploy it into a SharePoint page. These are just the open source tooling
4:24
in the SharePoint framework. Okay, I wanted to just quickly highlight this because it supports all the modern open source tooling
4:31
right, for the build process, it supports Yome and Gulp, Node.js and MPM
4:36
So which is why we are here for today. system.js, webpacks, and typescript
4:42
In the web framework, it supports React, which again, would be the focus of our session today
4:50
Angular, Knockout, jQuery, and any other frontend frameworks which you can have that you can use into SharePoint framework
4:58
And these are some of the code editors, like Visual Studio code at home, through which you can develop your SharePoint framework
5:04
I won't be going much detail into this. But considering though the session title says
5:11
using MPM library in SPFX, it not necessarily means that you can only use
5:17
this libraries in SPFX. Okay. Oh, because this is open source and this is on the MPM package manager
5:25
all the libraries can be used in any React based application where you are using it as a front end. Okay
5:31
And what I have focused is I have focused on mostly the libraries which are kind of, you know
5:40
allow us to build an user interface so that, for example, we don't have to create that particular, you know
5:46
component from this scratch and we can reuse it, what is available from in the MPM package
5:53
Okay. This is just a server tool side comparison for SPFX. Like in SP, previously we were developing using IIS
6:03
and .NET. Now we have Node.js, we were having NuGet. Now we have MPM
6:08
Previously we was having MSBuild. Now we are using Gulp and we were coding in C Sharp
6:13
Now we can code in TypeScript and there were Visual Studio project templates
6:17
Now we can use Visual Studio code and Yomen generator to create different types of solutions
6:22
Okay, now why this topic, right? Okay, so the idea behind this topic
6:27
is to get to know the useful packages which are available readily as an part of open source
6:33
okay, and which we can use in our react based application, right, which will save time, you
6:39
know, like developing everything from the scratch, okay, why do we want to reinvent
6:43
the wheel if something is already available, okay, so we can focus on our business logic
6:48
okay, and also, you know, kind of support the community by using it, and if you have
6:52
any feedback, you can share with the developer, and they might be able to, you know, kind
6:56
of fix it also, and if something you think might be, you know, a component which you
7:03
might have developed as a part of your projects and which you think can be added to MPM package
7:10
certainly you can do this so you can be part of that community also right so moving ahead
7:16
general usage of you know any MPF package right I just wanted to quick highlight it so for the
7:22
people who might be new to you know this topic or anything what happens is any package which we have we install it Then we import it in the component file Then we add that component to the render method
7:36
so that we can use that component in the UX. And we set the properties for the configuration
7:45
So there might be different configurations properties which would be available as a part of that particular package
7:50
which we can use and which we can basically customize it the way the developer has intended us to do
8:00
Moving ahead, let's start with the components. First of all, I would like to explain React tab
8:07
OK, this any application which we have, OK, one way or another, there would
8:13
be a business case where we might have to create tabs. Right. OK
8:18
And what if you want to create it? and in a react based application so this is one of the library which i have found which is very
8:28
you know useful and easy implementation right uh there are certain features like it is mobile
8:34
friendly so you don't need to worry about creating you know uh running that particular tab into
8:39
mobile it is automatically it will automatically uh basically um it will automatically uh render
8:47
based on the what the you the screens screens look like and there are four different components
8:55
within the react tab one would be tabs tab list tab and tab panel okay i'll explain this once i'll
9:02
walk through the code and the other feature is there is custom styling so it doesn't mean that
9:06
what you see on the right hand side the screenshot is there that that's what you have to use right
9:10
you can always you always have an option to basically customize the look and feel of the
9:15
the tab which is looking, you can change the colors, you can change the background colors
9:20
hover colors and everything and everything is possible. And another important feature which I would like to highlight
9:26
is the onSelect event handler. Why I think this is very useful
9:32
For example, if we are creating a dashboard wherein we wanted to, we are displaying, for example
9:38
different different views like my request and all requests request and my pending task for example
9:51
Why do we want to load all the data at once when the page loads
9:55
What we wanted to do is we wanted to load only when the user clicks on it
9:59
In this case, what we can do is basically we can use this own select event handler and
10:05
on click of the tab, we can actually get the data and then bind it rather than binding
10:10
it on the page load. So this is the first component which I would like to highlight
10:16
And what I would like to do is basically show you how this component can be used in a SPFx
10:24
web part. But as I said, because SPFx is again supporting all the open source tooling. Okay
10:30
It is merely like using the same thing in the react application also. Okay
10:37
So going ahead, going to the code. let me show you how the tabs looks like okay so if you see this is a SharePoint Framework local
10:46
workbench from where we can add the web part and this is the web part which i have created which is
10:51
specifically tabbed part and these are the tabs which we have created like i just wanted to
10:57
highlight that we can you know have sub tab within a tab like for example the simon's the simpson is
11:03
one tab and within that there are you know different tabs sub tabs which we have created
11:07
and which works pretty much the way we have added the data to
11:13
Then there is a second tab and the second tab also can have a subtab
11:18
So this is pretty easy to implement in a way wherein as a part of my web part what I will get
11:27
I will get a component. So anybody who is familiar with React would know that this is basically a
11:35
react uh component itself okay and where we have rendered method right and any react component
11:40
which you do always would have a render method that is where we would be writing our html to
11:45
build the ui sorry to interrupt but can you just zoom it sure
11:51
yeah this will yep yeah okay thanks no problem okay so if you see here in the render method the
12:11
first component is tab right and then we have a tab list which we use and wherein we mentioned
12:18
two main tabs which are there on the top like the Simpsons and Faturma and then there are tab panels
12:24
so ideally there is no association as such like wherein we can say that this tab panel content
12:30
goes to this tab so what it does is it basically is based on the index so the zeroth index is the
12:36
Simpsons and wherein there would be two tab panels for each of the tab which we have right so for
12:43
both the tabs we have tab panel and within the first tab panel again we are creating a new
12:48
tab because we wanted to create uh subtabs within each right and these are the tab list uh without
12:55
these subtabs within each okay and then within that tab list we are having the tab panel where
13:00
we are actually putting the content like paragraph and the image and anything so consider your
13:05
content goes here okay within your tab panel it can in my example it is a again i'm creating a tabs
13:13
but it can be any content any react component or any html which you would like to do
13:19
okay so this is about a tab component um and this is the link okay which you can use and basically
13:29
go and see what are the different customization options which you have like for example if i just
13:35
okay so this is the documentation of the react tab okay and if you see what we do is we first
13:48
install it okay using npm install command okay and then the basic example says you import it
13:54
first what are the components you wanted to install you install it first and then
13:59
then what you do is just a moment just a moment simon
14:13
yeah my kids are here okay so uh this is how you basically uh import it okay and then these are the best examples
14:26
on how do you use the tabs right the way i have shown And then these are the different APIs which are available. Okay
14:34
Like example, the different, different customization or the options which you see. So basically this would be the general idea of any MPM package which we will use. Right
14:42
What we do is we follow the documentation. The documentation would have different, different ways of how do we customize and use that particular MPM package
14:52
And then if if there are you know the good thing about an open source technology again is you know again is you know like if you go to the github there would be a issue list where you can actually raise an issue and
15:05
if the developer is you know active in maintaining that particular repo they would be able to solve
15:09
it also okay so moving ahead i'll go to uh second one okay this is very interesting react canvas
15:17
signature right now consider a scenario wherein you are building a form and what you want to get
15:23
is you wanted to get input from the user and then you want them to basically sign it right
15:28
in most of the case this signature works with uh you know documents like there are
15:33
uh commercial products available like docusigns and everything where we can actually uh build a
15:39
solution around uh creating e-signature within our document as a part of our business process right
15:46
but they are paid okay i'm not sure that there are any freely available there might be some but
15:51
but there would be some limitation. But what if your use case is pretty simple, right
15:55
You wanted to just maybe create a travel request system and just as a part of the audit policy
16:02
want them to, once they raise a request, you want to just get the signature, right
16:07
And you can use this kind of, this library as such. And you can get the signature on the web
16:15
And this canvas, it would be an HTML based canvas. will sign it and you can use this and store it somewhere so that you know that the signature has
16:24
been you know been added by the user as a when they have for fill up the form right so about
16:30
features about this particular library uh it is basically wrapper around you know js library
16:35
signature pad okay so this is the actual mpm library but some other developer has created
16:40
a wrapper so that it can be easily used in our react based project it is html5 and canvas based
16:47
There are options to export signature to PNG, JPG and SVG. So once we get the signature, right, what we can do is we can export it and we can save
16:55
it in these three different formats. And there are options to load canvas from base64
17:01
So when I say option to load canvas from base64, why this is important considering an edit
17:05
scenario right and once user has already filled the form but you wanted them to for an approver
17:12
or for themselves to see the edit or view what data they have entered right
17:16
that case the signature is already stored somewhere what you wanted to do is you wanted to get the
17:21
signature as a part of base 64 and provide it to the component and uh the canvas would basically load
17:27
the prefilled signature okay and then uh you also have to change the pen color like for example you
17:33
want black red or anything like there might be requirements wherein you know you ask signature
17:38
particularly in black format or in red format or in blue format blue color for example so that can
17:43
be used right so let's see a quick demo of how this work uh so what i did is uh to show all other
17:51
components right which we are going to see in the session here uh i have created a main web part
17:57
which would be basically a tab web part and then all the components are loaded as a part of tab
18:02
right so just to make sure that you know i wanted to highlight the idea wherein that it's not that
18:08
we can use individual react libraries uh individual only what we can do is we can club
18:14
different different libraries and components which are there and we can build a solution around it so
18:19
that you know each components individually will work on its own plus it can be worked combined
18:25
as a solution right so if you see here i have created tabs which is the tab component which i
18:29
have used and then i have created seven tabs uh sorry six tabs for each of the components which
18:35
which we are going to check next. And each of the component is loaded as a part of the panel. Right
18:42
So let me show you a quick example of, you know, how signature works here. Like for example, if I say, you know
18:48
take the signature, it will be loaded. And once I click on trim, what it does is it will remove
18:54
the, you know, the extra space, which we have, and it will give us a base 64 image
19:00
And what I'm doing, I'm using that base 64 image and just displaying it here. Okay
19:04
can be extended by wherein using this base64 we can save it in the database in a sharepoint list
19:09
in a document library or maybe in a custom database based on your requirement wherever
19:14
you wanted to do right how do we use this so if we see the usage is pretty simple here again
19:22
i'll open the signature component file okay in the render method first thing is we would be
19:29
importing the uh library where we wanted to use it right and then we would be using this particular
19:37
format signature canvas we are specifying the brain color to red we are specifying the background
19:43
color and we are specifying the canvas property to 300 200 and the class name okay now all these
19:50
properties which we are passing right that can be found uh in the um documentation itself so we don't
19:56
need to worry about you know like how do i remember everything what you need to do is you just need to
20:00
go to the documentation of a particular library see what are the options available and something
20:07
might fit your requirement what you wanted to do right and for this particular case what i'm doing
20:12
as i said once we click on trim right okay i'm calling this method trim and there is a method
20:19
which is available as a part of our library which says get trimmed canvas and which says you know
20:25
two dot url it means we specify in which format you want the image to be in this case it is png
20:33
and we are just setting the state you know to the base 64 to this particular state object
20:38
trim data url and then then that trim data url has been rendered as a part of our image stack so
20:44
that's uh just you know rendering it in the ui correct so this is uh pretty much you know uh
20:50
about the signature component okay again as i said there are different options which are available
20:57
which we can go and see into the documentation and see what what all things are possible and
21:03
what all things we can do with this particular library so i find it very interesting and you
21:07
know maybe a free solution for something wherein i have really implemented it for a couple of
21:14
customers where they wanted them to uh you know basically get the signature so that the user who
21:20
is actually requesting would feel that you know actually i'm signing into something rather than
21:24
just submitting the data as a part of my request like travel request or expense respect or something
21:29
which we are doing right okay so moving on the third one custom scroll bar okay so again i i feel
21:39
like why this is important you know like nowadays you know um we know that every website would have
21:46
a landing page right and the landing page would have too many contents uh which we will be using
21:51
like in a single page application there will be too many contents right uh now what would happen
21:56
is you know if you're developing a full web page and you want a particular paragraph or a particular
22:02
content to be as a part of your page but you don't want it to be you know using all the space right
22:08
so what we want to do is we wanted to basically enable scroll within that particular component
22:12
So yeah, definitely there are, you know, by using custom CSS that is possible. Okay
22:19
It's not possible. The only thing is this one gives us a good, pretty good look and feel
22:23
Plus it is you know kind of fully customizable and it also supports mobile device You know sometimes what happens is once you are doing something custom using CSS You might also have to take care of how it will render in the mobile device and everything right
22:38
So this gives them basically an added advantage on by using this particular scroll bar
22:44
Okay Again, it is fully customizable. Okay. We can auto hide it means it will only come when the content grows that particular height of the container of the
22:54
html there is no extra style sheet required and it is well tested okay and well well been used some
23:00
at many places right so let's see a quick demo of this um so if you go to if i click on scroll
23:09
bar if you see uh the second component which i have loaded as a part of tab and this is the uh
23:15
this is how this call bubble looks like, right? So it's pretty good in terms of what
23:21
how the out of the box call bar looks like. Okay. And you consider like, you know
23:24
we creating this particular type of component at different different pages in the part
23:30
and then can be, you know, basically used, the space can be utilized more efficiently, right
23:37
So, yeah, so this is the scroll bar component. Let's quickly see how we can use this
23:42
So again, I have a scroll bar component here. I'll just minimize little bit
23:48
but this is pretty much very easy to use. First thing is you import it, okay
23:53
And whatever content you wanted to, you know, kind of wrap around the scroll bar, you put it inside the scroll bar component, okay
24:01
And you specify the width and the height of the scroll bar. And once you do that, what will happen is any content
24:06
which is within the scroll bar, okay? It can be paragraph, HTML, a form or anything
24:12
it will basically wrap within that particular part of the section of the webpage
24:19
So again, this is pretty much very simple to use, but I think it is very effective
24:23
like considering this kind of library is available and we can easily build it
24:29
I personally like this kind of libraries because I'm not more into CSS
24:35
I've always fear like CSS is something which I cannot do it quickly
24:40
I would need some UI developers help. But if we have this kind of components
24:44
what we can at least do is independently, we as an backend developer also would be able
24:48
to use this front end libraries easily and build solutions effectively. Okay, moving ahead to third one, grid gallery
24:58
Okay, now this again is pretty much, you know, would be a basic requirement
25:04
on displaying your images in the grid, right? And this can be for a website
25:09
which is public facing website where you are, which is content driven website
25:13
or it might be also useful wherein you wanted to display basically different, different images
25:20
which you are capturing as a part of your application. And what if you wanted to display
25:25
this kind of gallery like this site? And this is pretty cool in terms of
25:29
what features it provides. Like for example, it is inspired by Google photos
25:35
So if you can see that look and feel is more like Google photos, And the good thing about is depending on the actual height
25:41
and the width of the image, okay, it actually kind of justifies itself
25:46
Like for example, this one is a vertical image, right? So it justifies and put it somewhere
25:51
And the all other images are long enough. So this is pretty good in terms of again
25:57
utilizing the space effectively within your webpage, right? And then you have
26:04
then with the select images are selectable it means you can you know basically select the image
26:09
so if you see here the blue icon which says these are the selectable images we can have custom
26:15
overlay text it means that once you hover over it you can also display text on the image right
26:19
then you can also give thumbnail captions okay and again it is mobile friendly okay most of the
26:26
libraries which we are seeing would be mobile friendly because that's when you know the added
26:30
advantages right if we don't have to take care of everything from our own right and again if we go
26:37
to the documentation i have mentioned this url here to save us time i will not go through the
26:42
documentation but if you just know that you know this something similar exists you can always go
26:48
and google it and you can see how you can customize it right let's see a quick demo so this is the
26:55
grid gallery okay if you see this is selectable uh i might have made it non-selectable but you can
27:01
see ocean and people it means that you know um these are the overlay text which you can basically
27:07
add as a part of your gallery also right uh in terms of implementation um i might be repetitive
27:15
but again you import the actual component okay and you just create a gallery component okay you see
27:21
how easy this is the only thing which you are giving is the array of the images right so you
27:25
have to make sure that right now what i'm doing i'm just putting three static images by assigning
27:31
src thumbnail and the width and the height and everything right now what you can do is basically
27:37
you can also get the this images from the database create the required object and just pass it to
27:42
the gallery image and it will auto it will take care of rendering it okay uh moving ahead uh next
27:52
react draft what you see what you get editor okay now you might have as a web developer or as a
27:57
business application we might have seen there are two uh there are there would be many requirements
28:03
where we would be needing you know similar kind of html editor as a part of our solution right
28:07
now this again you know uh there are pretty much many available okay why i want to highlight this
28:15
is because this is react based it means it is easily uh for the react developers it is you
28:19
know easily available and also easily customizable customizable and it supports all the typescript
28:25
uh based uh typescript based uh customization which we wanted to do okay so if you see these
28:32
are the features there is a long list of features this is very popular again now if you like for
28:39
example you can you know show and hide different different controls which are available okay and
28:44
you can change the order of the controls like for example if you wanted to keep the bold italic
28:48
underlined at the last because that might not be very much important to the user you can always do
28:53
that and then you can also create custom control to the toolbar so not only the out of the box
28:58
controls which you see like indentation adding hyperlinks the emojis you can also create a custom
29:04
control and then build something on top of it right like for example if you wanted to get
29:09
hyperlink and just add it here then you can create a custom component which would be a pop-up kind of
29:13
thing build it add to the user and then put it in the uh the editor itself right then there are
29:21
choices of 150 emojis there are support for mentions hashtag uh there is support for uploading
29:28
and adding images also so pretty much all of the you know um html editor features are available here
29:36
okay uh let's quickly see the you uh demo again uh so if you see here this is the demo right and
29:46
And what you can do is you can add it. You can also use a certain shortcut
29:51
Like for example, I use control B to bold it, right? And then you can add hyperlink
29:56
You can give the link and the title, sorry, the title and the link and you can also specify whether you want to open it in the new window
30:05
or everything so uh why would you need this like for example you are building a form and
30:10
you want the end user to basically add data in the html right um and being a sharepoint
30:17
developer i would know that this is uh this is uh useful many times because what happens
30:23
is uh there is an column type which is html which is available in sharepoint and where
30:29
we want we are building custom forms but we want user to basically use you know a rich
30:33
text editor so that they can provide the formatted content and then which we can use to display
30:41
it wherever we need it okay so again let's see the usage so this is draft okay again
30:49
very simple usage the only thing is we are importing the actual component and we are
30:55
also importing the css okay some of the libraries would require you to import the css the reason
31:00
being uh you know uh it might be not directly available okay and or it might be directly clashing
31:06
with the other ones if default you are not available if you are not uh specifying it right
31:12
and you just have to say editor and you have to say wrapper class and everything okay now in terms
31:17
of customization how to read the html content and everything if you go to the documentation
31:22
there are options like you know on blur on focus and everything through which we will be able to
31:29
get the content also and which we can use as an html and store it somewhere in the database right
31:34
and also there are options to pre-populate like again the scenario wherein it's not just about
31:39
adding the content like you might want to edit the content edit from you might want to create
31:44
an edit form where you want to pre-load the html which is already there so you just have to give it
31:49
as an input, okay. So, this is the, what you see, what you get editor
31:55
rich editor with the name ReactDraft. And again, you can see, refer it from the
32:01
official documentation of the library. Okay, then accessible accordion, okay. Now I'm pretty sure, you know
32:09
this would be one of the basic requirement of getting accordion done, right
32:14
Okay, and there are lots of accordions available, I would say, okay
32:19
Why, again, I would highlight this, this is based on React. Okay, it means it can be easily used
32:23
on the React-based project. Okay, and the styling is customizable. It means we can customize the styling
32:30
There are options to basically, you know, choose whether we wanted to only allow single accordion
32:37
to be expanded or we wanted multiple to be expanded. Plus there are options to also to choose
32:44
which particular accordion should be, you know, expand collapse by default. Then there is on change event handle
32:49
which is again, very important, as I said, until you have a specific content, which is very less
32:55
and you are, that should be okay. But what if you wanted to, you know, dynamically get data
33:00
once the user clicks on it, right? Then pretty much this would be very much useful
33:05
There is an option to disable particular item also. For example, we can disable that this particular item
33:10
cannot be expanded, for example, right? So I would always consider, you know
33:14
accordion maybe as an vertical tab also, right? Like it's not just about creating FAQs
33:21
or something using accordion. You can also build a form which looks, you know
33:25
vertically, which would look like a tab and on click of every tab on the right side you are specifically you know at loading different components like for example create new form or my request or my pending task et cetera right
33:40
Then it also supports all the desktop and mobile browsers. So let's see implementation again
33:46
I know I'm running fast, but you know, that was the idea
33:51
Okay, just to get used to all this library. And so that you know that this kind of components
33:56
are available, which can be readily used rather than building something from the scratch
34:01
So these are the three accordions, like what is SPFx, what is React
34:06
the header and the actual content. Right? Now, if I go to the implementation
34:13
I'll say go to accordion, right? I will import all the components which would be used. Okay
34:19
So how do you know that you wanted to, you have to create, use a specific format, right
34:24
Like for example, you start with accordion, then within accordion, you need accordion item
34:28
all is available in the documentation. You just have to follow it and you will understand what every component means
34:34
Like for example, here, if you see accordion is the base tag within accordion, there is accordion item
34:41
It means there would be, you know, three accordion items for each of the accordion item
34:45
which we have seen as a part of our demo. And then there is an accordion heading, okay
34:50
Wherein you have to specify accordion item button. Frankly, I'm not sure whether this would be required
34:55
or directly we can put it. but as per the documentation, they were mentioning that this accordion item button is there. Okay
35:03
And then there is accordion item panel, which is basically the content for that particular accordion
35:07
So now within this, again, as I said, you can have HTML
35:11
you can have a different react component, or you can use any other library components
35:14
which is available. So possibilities are endless, right? Moving ahead, next material table. Okay
35:25
Again, a very useful one. Like for example, we have seen in the last session, right
35:32
That Swami was using a tabular kind of format to display the books, right
35:41
And this is pretty much a requirement for every other projects, which if you are developing
35:47
something, which is kind of getting data from the database displaying and performing the
35:52
crude operation exactly. So what happens is this for this kind of implementation, why do I choose this particular one
36:00
Because of the one feature which is available and there are many available like you know
36:04
there is jQuery data table, there is Bootstrap data table, there is a Fabric UI, Fluent UI
36:09
data table, ListView controls, there are many available. But this I wanted to highlight because there are different options here like for example
36:19
you know you can export to CSV in Excel. So by default, you can just click on the download button
36:24
and it gives an option to CS-Finex and you don't need to program it, right
36:28
Then, yeah, definitely again, there might be argument that the query data tables also use this, okay
36:34
But if you are building something on React, right? You wanted to get something which is supported by React, right
36:40
So that is where this particular library will come into picture. Then any data table which would have
36:47
there is a search functionality, the sorting functionality, filtering, grouping, and we can choose detail panel also like for
36:54
example on click of it the detail panel can be open. Then you can have custom rendering
36:58
of columns So it gives us an option wherein you can actually customize the column rendering Like for example if the data which you are getting from the database which would be an array is just the name but you wanted to format it before you actually want to
37:13
render it right that can that is possible that you can do it right and it is editable which we will
37:18
see and then there is event handler for each action it means that on click of edit what you
37:23
wanted to do you can customize it you on click of delete icon what you want to do you can customize
37:28
it you can have write your own code to basically perform the actual crude operations as a part of it
37:33
Okay, so Moving on to see the demo. So this is how you know the data table looks like. Okay, you can see
37:45
Pardon my you know CSS as I said, I did not focus on the action part
37:49
But yeah, you can see that there are two options available like edit delete
37:53
There is an action to edit. So once you click on edit, what happens is a new row gets created here
37:58
You can input the name here right and you can just say you know save and it will add it to the row right it will add it to the last of
38:11
the row because we have pagination right so if you see here it has added right and again as i said
38:17
right now everything has been done locally right nothing has been stored in the database but what
38:22
you can do is once you click on the tick mark which was basically a save icon you can actually
38:26
store in the database and reload the data okay and that you can do then the good thing is it is
38:32
editable right so it means there is an inline editing capability and which i think is mostly
38:38
you know many times it has been asked for by the user like we need a list view but we don't want to
38:44
you know basically have a different form where i go and edit it if this is pretty much you know
38:48
five to six columns which you are displaying in the uh grid right or the table so you can always
38:54
you know basically edit it okay and then you can save it so this is pretty cool okay in terms of
39:01
the editable grid which we have and then there is search functionality you can search it based on
39:07
any columns which you want you can download csv or pdf you can just export the data as a part of csv
39:15
pdf pagination functionality is available so most of the list grid view functionality is available
39:21
and I would suggest if you are exploring to build something custom, right
39:26
And if you wanted to give similar kind of functionality, this can be pretty useful, right
39:31
So let's say the implementation, okay. The implementation again here would be
39:36
that would be little bit more to what we have used other libraries
39:42
First thing is you import it, okay? And as I said, this is based on the material UI, okay
39:48
So as a part of Material UI, we just get the table
39:53
like list view and everything. So this particular developer, what he did is he used the Material UI basic table
39:59
and he added some capabilities like editing and everything which we are seeing
40:03
So this is good thing about community, wherein people would, if something is open source
40:08
people will use it, plus they would get an opportunity to extend it also
40:14
And then again, it can be open sourced it, right? So considering how do you want to use it
40:22
You start with, you know, material table. You specify data, which would be the specific data
40:27
which you wanted to do. In my case, I'm just using static data, like, you know, name, surname, age, gender
40:34
and you specify column. And the column also should be you know kind of an area wherein you tell what should be the title and what should be the field which it should map to the in the data so this would be the header which we are seeing right like name surname age and gender okay
40:48
and this is the field which it says that once i provide the data array okay to this field you need
40:54
to basically uh map it to so the name would map it to the name field the surname would map it to the
41:00
surname field and age wouldn't map it to the age field right right and this and this is pretty
41:05
useful wherein you know there might be case wherein in the database or from where we are
41:10
getting data uh it might be having a different name right but we wanted to display a different
41:15
header title so this gives a flexibility over it right and then uh the icons like you know table
41:24
icons which we wanted to show so it just says that uh when we say table icons it means it say what
41:29
all things you wanted to display right so this is pretty much from the documentation where you
41:34
tell them that you know that you need an add icon you need a checkbox icon you need a clear icon
41:39
delete icon detail pen icon so all of this basically you are passing it saying that all
41:44
these options i mean all these icons i needed as a part of my solution right and this is again as i
41:50
said we can check it from the documentation and use it and in the options we specify whether we
41:56
want to export button okay and if it is true then it will basically uh you know add that export to
42:02
csv and pdf right and this is interesting okay uh in editable property okay what you do is you
42:10
specify three uh event handlers like on row update on row add and row delete okay uh in our case what
42:18
we are doing is once we get a new data it means basically new data is nothing but just uh the data
42:24
about the row what it does is automatically take care of binding all the uh json objects attributes
42:31
the way user has added to the grid and it gives us that particular uh
42:38
particular item right and then that item we can use it right now we are just setting the data in
42:43
the state okay but what we can do is we can always save it in the database we make an api call and
42:47
actually save it right and same happens with row update okay uh what we wanted to do we are getting
42:53
first the actual index which is getting edited and then we are updating the new properties or the
42:59
updated values and setting the state again okay and on raw delete we are using splice to just
43:04
remove it from the array content but in real scenario we might be making an actual api cause
43:10
first displaying maybe for example a pop-up window saying that do you really want to delete this and
43:15
then actually delete it right so yes uh this where the you know few of the components there might be
43:22
n number of you know other components and i would like to hear from the audience you know if you
43:27
think there is something which you already know which i have missed please feel free to add in
43:31
the comment and i would really like to explore it because being an not in front-end developer you
43:38
know i really look forward to use this kind of ui libraries which are available which we can you
43:43
know easily use to build our solution rather than depending on the ui developer to build something
43:50
Okay, so moving ahead references. These are some of the reference links, which, which were from where I have used this. Okay
44:00
This would be pretty SharePoint framework, the NPM JS and the React JS and everything
44:05
And again, thank you