Microsoft 365 Community Community Demos, 23 May 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - Using Material UI Components in SharePoint Framework solutions

Description

This community call demo is taken from the SharePoint Framework community call recording on 23rd of May 2019. In this video, Ramin Ahmadi (Content and Code) demonstrates how to build a SharePoint Framework solution which is using Material UI.

Presenter - Ramin Ahmadi (Content and Code) - @raminahmadi1986

Source code for the sample is available from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-material-ui

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-23rd-of-may-2019/

You can find more details around the PnPjs library mentioned in the video from http://aka.ms/pnpjs.

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

Hello: everyone, I'm Romina, modeun senior, sharpen developer at continent cold and today, I'm going to show you how you can use react, mat or your components in SharePoint framework.

A

As you know, before SharePoint framework 2.8, it was impossible to use react. Metal UI because is: it's requires minimum version of type, a script 2.8 and now in favor of shape or framework 1.8, we can use type escape, 2.8 and evolve and also it supports note 10 that is really cool, that we can have more features to use as a developer and for using Metro UI.

A

First, we need to update the human generator to use your program, work, 1.8 and also installed hyper script compiler that should be 2.8 and involved and if you are using SharePoint framework 1.8 point you don't need to be worried about that, because it's set to you type, a script 0.9 as default, and after that you need to install matter your your components that you need and also the types for the type a screen, and then you can import and use their components. So, let's jump to the web part.

A

So here's really basic basic web part to show you how you can use the material components. I use some of the components like text field icon and the table component that has pagination functionality. That I really wish that I, we could have it in fabric UI, and also the dialer component that you can see here and also I use. One of the rxjs operator called the balanced time where, basically, this operator is popular in scenarios such as type-ahead, where their rate of user import must be controlled.

A

For example, if I start typing it, it weighs for three milliseconds before it send a query to the server to get the data, as you can see here, and if I want to show you the code.

A

So here are the packages that are used for this webpart, so I added material component, libraries from like, like here and also PM PJs, for getting the data from SharePoint and also installed rxjs to use debounce time operator. For those who don't know about the rxjs is for reactive programming. That's if you are interested in reactive programming, you can basically I recommend you reading this article. That is really cool about reactive programming and how you can use it in your code and also about the components.

A

I have details, the other component pagination and also at the table component that is coming from here, as you can see, I have to take a component with all the headers and also the content, and also I used p.m. PJs to get the data from SharePoint, and here I set up the rxjs the balance time so I give it three millisecond.

A

So when you start typing, it just waits for some amount of time, so to make sure that you done with typing and send it query to the server to get the data and I think yeah. Here's it's just a simple sample to show you how you can use material. You are components and, as is you've seen that ages also use some of the components matter EUI in his demo previously. So that's it for me. Thank you very much awesome, but another great demo. So thank you very very much for that.