Home
Contribute Contact Us Browse all meetings
Home Contribute Contact Us Browse all meetings
Microsoft 365 Community / SharePoint Framework Tutorials / 7 Feb 2020
Microsoft 365 Community / SharePoint Framework Tutorials / 7 Feb 2020
Previous Meeting Next Meeting
⏯
Add meeting Rate page Subscribe
youtube image
►
From YouTube: SharePoint Framework Tutorial - Using Office UI Fabric React Components

Description

This tutorial will guide you in building a simple web part that uses one of the Office UI Fabric components, DocumentCard.

You can find the written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

A

Welcome to this getting started, SharePoint framework tutorial series and in this tutorial we'll have a look on how we can use the office. Ui factory create components in our shape on client, side, web port or technically. The process is exactly the same if we would be using Lotus, you have fabric react components in any shape and frame web solution.

A

This is January 2020 edition and I'm using SharePoint framework, 1.10 version on this exercise, and please note, if you're watching this video later on and it might be in small changes in the newer versions of SharePoint framework. So please always double check the documentation which always came being kept up most up to date from a finance perspective. Now, let's actually jump into it. So let me go to our Windows 10 machine and where we're gonna, which we're going to use for arm development exercise, is our development environment.

A

Let me go to my C code folder, where I already have some example, solutions which are graded in other tutorials as well. Then here I'm gonna do document court example a web part solution and I'm gonna actually go there, and in here we can execute the yeoman generator for SharePoint framework. So we get our basic structure created based on the default settings and we can use the default solution.

A

Name we kind of target SharePoint Online and we can use the current folder because already the specific folder we can use the tenant one deployment- we're not gonna actually do that. But for the exercise perspective it doesn't really matter. What are the answer on those, but the web port is the target solution. What we're going to create and we're gonna go on with our s a document card example. So we're going to build a document card with a static assets but using the office.

A

You have appropriate controls, and this is document core two example description which was the default. What are you so now? I actually changed it slightly with a small typo, but that's fine and we kind of choose a react as the target environment in here. So, let's click enter from there and that's going to be the scuffle our solution, and this is going to take again few minutes. So, let's actually gonna speed up.

A

Let's speed up the video and continue after a few seconds dudes, the solution structure has been now scuffled it and let's actually clean up the window slightly and open up the way hook: I open up the window in the visual studio, coach dot and that's gonna open up that in abysus. Today, okay, let's close up the welcome as well what we're interested in here. First of all, let's have a look on the web part structure slightly more details at this time.

A

We actually have this components folder here and if we open up the actual web part file, the manifest file looks exactly the same, but the web part file actually has slightly different structures, so we're actually referencing the the actual component from the components folder and in our render, we aren't actually using react and rendering in that components. Our document choreographer part example component from the component side and that's where the actual rendering of the rendering logic is actually being defined. We do my pass the description over there.

A

Oh it's it's then, being actually rendered in this props and description, so we're using the react way of handling and creating these components, rendering things now it's actually modifying the slightly. So, let's, let's modify the imports and interest interest in here, so I'm can actually add few additional imports. On top we're going to use the default office, you have fabric react version which is scaffold it by default available in the react based structures.

A

Also, let's actually modify the render method within this component, so we can more easily render the file I would quickly actually render slightly different layout out from the from the web part. So let's say that the changes on that as well now, the next thing. What we can actually see here is that we do have a few different images referenced and we actually need to get those reference and the same. It is download it from a centralized location. So let's actually make that happen.

A

So there's one image of there there's another one over there and another one over there, and this actually are available in in our kit application. So let me actually copy the location and let's go in prouder, so let's actually start downloading these assets.

A

So let's actually download that set and save em, it's nice and based on the documentation and the guidance. We should be saving that one in the components folder, which is completely fine so and that is a good location of all of those things. So they'd actually open up that in an explorer I'm just going to go and copy the path in the source, web birds. There are components and there we go so complete that one and to be available. Now, where do we save stuff?

A

We can save stuff in that folder and that's an avatar and cat as the name good, and that was the one question or one asset. Let's actually request the other asset as well. I can be BT and so on that one over there. So let's actually download it as well and save image as and save it to the same folder and also, let's actually copy the final URL, which was the documents preview, which is an imaginary review of the document.

A

And let's download that one as well and save that to the same folder now opens the document preview would work with the document preview coming from the file assets, but in this case we're just testing out the controls, so we're not actually going to operate against the craf API or the files rest API in SharePoint, but just gonna test out that thing's not working properly. Now, let's get back on there on the solution and a few things, maybe the notice here.

A

Let me clear out that one, because we aren't actually using the require entry here and we are requiring these images from the components folder. We actually are getting them, bundled inside a forest solution as well, so the only we don't need to do any extra settings and extra things to make all of those images being bundled or packaged inside of the of the solution as well.

A

So now, when we go back in the pier and we do observe, we can actually see that those images aren't being properly rendered from the right location as well, because they're being required to be available. So let's look up surf and the workbench should be loading there. We go. Let me close up the download and here and let's actually open up the document example and there we go.

A

We can actually say this to one image, just another image, and there is another image and the same by the way applies that the required will make the images available also as part of the the solution package. If you are using the package assets option, so do all of those images of being packaged inside of this baby acacia file properly, so they will actually work properly when you're referencing them out in the production as well. In this case, we just wanted to test out the office.

A

You have ever create components using an imaginary images which were static images, not dynamic images coming from SharePoint Online, but using the office. You have appropriate components, absolutely preferred option a recommended option because you get the same look and feel as what we use in the in the natively in SharePoint or in office and office online in general. So please, please, please take about the advantage of this controls. There's also a separate set of controls, which are the BMPs VFX controls.

A

It's a super useful which are even decorating more on top of the office, your fabric, we add controls, so we recommend using those as well which, because they will increase your productivity as a developer, but anyway, that's all what we're going to do in this tutorial. So we basically started using the office or a fabric react controls. We use the document core control.

A

We reference some of the static images, not dynamic limiters from an existing files in SharePoint, and then we tested out the rendering of these components in the local variants, and it looks pretty ok, critical rendering for this set. But, like said, that's all for this tutorial have a look on if you're looking into more advanced scenarios related on using office to our fabric, please please have a look on our documentation which is available and if something is missing, please let us know and we'll get the documentation improve. Thank you.