Scenarios and solutions to use Office UI Fabric – Part 3

In the final part of this series I like to take a look on scenarios, how to use Office UI Fabric efficiently. As mentioned in part two using pure Office UI Fabric might can be a bit difficult sometimes.
Especially when you don’t like to copy and paste the code from the snippet gallery all the time. Personally, I think it is a bit difficult even if you are experienced in using frameworks. There are many things that need to be learned in addition. A thing such as Suit CSS naming conventions, correct class names, components, text sizes, class names of colors, complete HTML structures.

Common usage scenario

The most appropriate usage scenario is to integrate Office UI Fabric with add-ins for Office Applications. It is a good thing for every enterprise developer that know where to find corporate information like to make a theme available in Office Applications. It allows any more traditional developer to create nice looking interfaces without a problem.
Simon Jaeger wrote a blog post named “Create your very first good-looking Word add-in”. It is a great article and the title stating the main motivation why to use Office UI Fabric. Focus on the application, focus on the business logic and let Office UI Fabric do the rest.

The new SharePoint UI

While the current version of SharePoint doesn’t know anything about Office UI Fabric. It will become probably a part of the new SharePoint Framework. We already saw some glimpse on the new SharePoint Document library. The user interface uses partially the same class names as Office UI Fabric.

New Document Library View in SharePoint

New Document Library View in SharePoint

Yet there are still some inconsistencies where the current user interface doesn’t match the patterns in Office UI Fabric. In addition, many patterns of the new SharePoint haven’t been implemented yet. Naturally, because for now it just focuses on Office applications.

Better ways to use Office UI Fabric

If you like to create add-ins and don’t care that much how Office UI Fabric works I would recommend to take a look into ngOfficeUI fabric. It is a real mature implementation in Angular based on Office UI Fabric.


ngOfficeUiFabric - A abstraction layer for Office UI Fabric built in angular

ngOfficeUiFabric – A abstraction layer for Office UI Fabric built in angular

This project was actually started by Andrew Connell, right after the launch of Office UI Fabric. The current implementation use Angular 1.4 and TypeScript. It is a great community driven project and many great people joined to build directives for Angular Applications. How does it work?

Instead of writing the following code to create just a simple button.


You need to initiate your angular application and defined the buttons just like this.


This makes it really easy to get the Office UI Fabric components right and you don’t need to worry about style sheet classes and naming conventions. ngOfficeUIFabric acts like an abstraction layer of Office UI Fabric and this makes it easy to use. It allows to focus on content and the application.
Currently this project doesn’t have full coverage of Office UI Fabric components, but they work hard to get to that point.
They are always searching for a talented developer that can add more pattern and components to the existing ones.

Other alternatives

The Office UI Fabric web site list two other implementations. One implementation was built with React, a javascript library for building user interfaces, proudly presented by Facebook. (A fact that makes me a little bit nervous.) You will find this implementation on github.
The other option is an implementation of Office UI Fabric in a framework called “Aurielle”.
You can take a look at those projects, but I think ngOfficeUIFabric is by far the best option.

So why not using Office UI Fabric?

I hope this small series of post gave a more in-depth introduction to Office UI Fabric and the ideas around it. It is really great to have these components and styling available.
With the announcement of the new SharePoint Framework, we will see how Office UI Fabric evolves or what the SharePoint Framework has to offer. Really curious if the pattern will be release of SharePoint excluded or if they integrate into Office UI Fabric.
Overall, it has a huge potentials to be added to our development tool belt. Honestly, Office UI Fabric is a bit moving target now. First it supported LESS then it switched to SASS. In previous versions jQuery was required and there is an ongoing migration to Vanilla JavaScript / TypeScript. The last thing I heard was that the pattern will be transformed to Handlebars. Well and there are currently some bugs you might recognize.
I think you can currently use it, but be aware that things might change in future. A fact that happens to every framework. Again the abstraction layer provided by ngOfficeUIFabric solves this issue.
I encourage you to use it, test it, provide feedback and make yourself an opinion. The Office UI Fabric team is really interested to get your feedback.
Well, I am too. Would be great if you can provide your feedback in the comments below and what you think of Office UI Fabric.

In case you missed the other posts in this series: