SharePoint Framework Tutorial – Using Office UI Fabric React Components

SharePoint Framework Tutorial – Using Office UI Fabric React Components



I'm welcome to this getting started with SharePoint framework tutorial series and in this tutorial we're looking into how to use office you have fabric react components in your SharePoint client side web part so point default SharePoint Online does use of a CIO fabric react components the render the UIs and out-of-the-box experience is an out-of-the-box web parts and you can take advantage of these components which are open source available for you from the internet so we are providing this as a NPM packages and they have their own version in logic and everything else now because obviously I've ever create components are also used by the out-of-the-box web part and those are the Box web parts have their own versioning logic rather than matching on your versions which you have any third-party web part a third-party components there are certain things which we need to understand when we are using the office to our fabric react components and the main thing to understand and related on using these components is that you cannot dynamically reference the office you have our office UI fabric react components with the SharePoint is providing by default for first party web parts and that's mainly because your custom web part might actually be developed let's say a month ago or two months ago or three months ago and it might actually have a dependency on a different version of the office you have appropriate components then the first part of a web part and if we were whenever the office where appropriate components will evolve your components or your web part assuming a might be assuming that there's a property and method which has been changed or the signature have been signed and that would then cause a runtime exception that's why when we used office during appropriate components we actually want to bundle that version inside of your web part or inside of your extension so that we make sure that your components and solution is working a regardless of what versions of office we have appropriate components SharePoint will natively use in first-party webparts now a long tutorial intro but just to make sure that we also cover that one so this is September 28 in addition we keep on evolving these tutorials as we move along with in the journey of introducing you and newer versions of SharePoint framework now in this case like mentioned we can use office to our fabric react components a long intro on why do we need to reference that in a certain way but let's see what it means in practice so first of all let's go to again to our tutorial folder and let's create us let's create a tutorial or a folder for our solution so we're not going to actually add this webpart any of the existing solution which might have we're going to create a new solution for this one just for the clarity clarity perspective obviously you can have multiple web parts and extensions in a single solution that's absolutely by default the model which quite often actually will happen in the in the production use case now let's follow up on the tutorial guidance so let's actually accept OOP let me scroll slightly up if you're wondering I'm personally using the commander – it doesn't really matter what command line tool you are using to actually execute the yeoman templates no we want to use the default name for that one we want to use the SharePoint Online as the target we want to use the current folder in this case we're not gonna actually deploy this to SharePoint Online so it doesn't really matter are we going to use the tenon scope option or not so let's actually say no but we never actually go as far as deployment so that doesn't really matter what we answer on that question now in this case we want to actually create a web part so let's choose that one let's give it a name of document court example and this is document card example description is fine for now and in this case we want to actually use react so once again technically I could actually select no JavaScript framework and then I could associate react and the react components by running NPN install to that particular solution so pointy for even though we have no JavaScript framework react and knockout here we do support them whatever framework what you want to be used and SharePoint framework by default in a template perspective out-of-the-box we only create Korea or provide reactant knockout templates and the no JavaScript framework option so let me actually start a scope holding that will then start pulling down to NPM dependencies from the NPM gallery and at this point and we're gonna speed up the video and continue whenever the scaffolding is fully completed and here we go now the scaffolding is completed so let's actually start visitors to their code so we're able to see how the solution is structured so even though we select that the react as the default or the starting point obviously the basic structure is exactly the same so key difference is now is the fact that in the packets Chasen we apply default referencing create components we are also referencing office we have a procore here by default so all of this stuff is happening automatically based on the selection but basically as solution instructions the cone effects structure and everything else is exactly the same like we would be selecting the note JavaScript framework option now one thing what is slightly different actually the rendering is exactly the same but the structure is slightly different because we're using a react is the default web part implementation so in react implementation we are web part it's kind of a shell or container where we actually then call actual react component which is here a document called example so this document card example is coming from the components and document card example is the file name and we'll be providing the description property from a web part to that component to render so if we now extend the components we can actually say that we can find the sex file here that is actually the one react component with system responsible of rendering to welcome to SharePoint text and the basic default rendering experience what we have what is exactly the same between the no JavaScript framework selected or the react selected so react changes slightly the structure of the components in a similar way as if you are using angular or view or handlebars they have a slightly different way of required rendering the basic structure for any framework is still pretty much the same so the web part works as a shell or a container from the web part properties or all of these properties everything else is still in the web part level but then you initiate and actual external components in case of react by using this react react element called or react create element call and that's the component name and with bypass and the description entry from the web part properties then as a property for that weird components again if you're using any other framework and that the set up slightly look slightly different but again it's it's framework specific the basics are still the same web part as a shell or a container and then the properties are in this level and then there PI passed to the actual JavaScript framework specific implementation of the functionality now okay so let's actually start using the office to I fabric react so what we actually want to modify here is the rendering of this this web part so that's going to happen in this document card example the SX file and what we want to use is a document card or from my office to our favorite react so we're gonna actually add document card document called preview car title activity and document car prop property preview props interface from the office to our fabric clip and document card and this is basically then giving us these components and vailable for render and then we're what we're going to do is that we want to actually replace the existing render so let's get rid of that and replace that one with a new render option turn here what we can see what we're doing here we are setting document car preview props so we have a preview image which is set to be as a document preview PNG we have an icon source which is said to be icon PPD and PNG we are setting a white and height and accent color and then this component is returning is structure in here and which is based on a document car it has a preview section it has a target all section which has the title a name of a imaginary component it has some activity imaginary activity for a certain time period so kind of a high-level static data for now just as well we could actually get this data direct sharepoint from a document library and then update at these values based on the information what is coming from the from the document library level now let's save the changes so control X in my case and then what we want to do is that we actually want to do a small modification in and the coop J's files and and the reason why I want to do this is that we wanna actually reference these PNG files in the case in the scenario example case so what we're gonna do here so let me rephrase that so what we want to do is that we want to mimic the situation where these images would be coming from a sharepoint online but in this case we're not in connected on sharepoint online also we're just testing how to use office UI fabric react components so for that purpose we can actually modify slightly out oracle and a file as json file which is in the root here so we can actually modify this one slightly and we can add this additional configuration which will then get additional components available to be rendered from the distribution on this path so this basic idea is that we're able to then render the web part and provide those images which were referencing these components using a static URL so that's what we're doing here now the next step what is being asked is that we would get those a few static images copied to this particular folder so from the server to the source webparts and document car example and components folders so let's actually go in here so I have those three images following up on the tutorial available in here so these are actually stored in SPF Doc's github repository so I'm gonna copy them I'm gonna paste them in I'm gonna paste them inside of that library in the file explorer and that means obviously that and the visual studio code is is seeing them as well and now it makes more sense that we are referencing a document preview PNG with is actually located over there and that fire less than a imaginary preview of that document so no be a kind of a mimicking situation which and the information which we would be able to get from SharePoint Online document library level good that's what we're going to do this time so we referenced and we're using document court we are then rendering the document card data at with the static data we could just as well use again SharePoint a REST API to get dynamic information from SharePoint and we can move back on the command line and let's actually do call up serve and that's going to again pop up and the preview and the local workbench in the previous session of my default browser so let me actually go to the right pros a window in here and let me actually in my case it's actually open up that in a different process I'm going to request the URL manually localhost four three two one and adding that web part available to document card web part available from there and there we go we have a nice web part available we didn't modify the properties of the web part we didn't modify or add any actual functionality but you can see that pretty easily by using the components from the office you have fabric react we were able to create a really nice-looking layout and just as well we would be able to render multiple other layouts here as well so the office UI fabric react components will give you a consistent look and feel which is matching on the first party web part so basically whatever Microsoft is building and Microsoft is releasing inside of SharePoint Online and actually on the other services as well so the office you have a pre create components will give you consistency it will increase your productivity because you don't actually need to build this kind of rendering by yourself it's just a matter of reusing these existing components which are available for you by default good but that's everything what we're going to do in this tutorial so we were able to reuse obviously evaporated components and in this case we reference them directly like we do in the in the production case from the office of our fabric react NPM packages which were instant or added there because we added by default and the real where we choose to react framework as to as to select that framework to be used but really is a way to have a consistent look and feel and nice look and feel and reusable components which will increase your productivity as a developer so please have a look on more on officer fabric we add components from our documentation thank you

Leave a Reply

Your email address will not be published. Required fields are marked *