Freigeben über

Using Office UI Fabric in SharePoint

  • Artikel

This post is a contribution from Suresh Meenakshisundaram, an engineer with the SharePoint Developer Support team

Disclaimer:   This blog post is to give more information on the subject and not an official documentation about component or licensing or recommendation from Microsoft.

Office UI fabric is a front-end framework to build UI for application’s extensions, add-ins (MS office applications like word, excel…and O365) based on Office Design Language (ODL). What is ODL? Office Suite products follow set of design standards which is called Office Design Language. Those are nothing but using proprietary

  • Fonts
  • CSS
  • JS
  • Icons
  • Animations

Office UI fabric gives those list of components, so the UI will be more appealing to end user and will not be rendered odd among other office UI screens. In nutshell, Office UI Fabric is a bootstrap for Office & O365.

 

Office UI fabric is split in to couple of projects. Most important one is Fabric Core. As the name implies this is core project of other projects. This project gives the core pieces like CSS, Fonts, Icons, Responsive Grid, Animations.

https://github.com/OfficeDev/office-ui-fabric-core

 

The next fabric project is Office-UI-Fabric-JS. This gives basic functionality components like DatePicker, ColorPicker, PersonaCard..etc. All the codes are written in pure JavaScript.

https://github.com/OfficeDev/office-ui-fabric-js

 

The newest addition to the Office UI Fabric is Office-UI-Fabric-React which is getting lot of attention these days. The components are built using react framework.

https://github.com/OfficeDev/office-ui-fabric-react

 

In addition to above, OfficeDev/Office-UI-fabric-ios is available for iOS components.

The last one is ngOfficeUIFabric/ng-officeuifabric which is Angular version. This is a community project and not driven by Microsoft.

 

There is a chorme extension is available for Fabric which is called “Fabric explorer” used for development purpose. You can search on chrome developer tools extensions  and video is available in https://www.youtube.com/watch?time_continue=17&v=e8v-Zw1iRZs

 

All Fabric assets distributed via GitHub are licensed under the MIT license which means you can use them on any projects provided you follow the MIT license. Specifically, for the fonts, as stated by their license, you can use them only on Office Add-Ins. In this context Office Add-Ins include any web applications that extend the Office User Experience including: Office Add-Ins (previously known as Apps for Office), SharePoint Add-Ins (previously known ad Apps for SharePoint) and Office 365 Apps (those launched from within the Office launcher).

Office UI Fabric for SharePoint 

Fabric is official front-end framework for O365 and SharePoint Online. All the new modern team sites, modern pages and modern lists are built using Office-UI-Fabric.  SPO uses Office-UI-Fabric core & React in SharePoint and pushes update to SharePoint online periodically. Because of this, SPFx generator installs right version Office UI Fabric React as well. So when you build the SPFx components, use the fabric which comes with installation and don’t update it separately. The update will conflict with version in SharePoint and as a result your component may fail.

You can go through examples from /en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components

And you can play around with it through https://codepen.io/andrewconnell/pen/NGRvxW