Using the Office UI Fabric with Angular JS to Create an Office Add-In

Scot Hillier

by Scot Hillier on 9/11/2015

Share this:
Print

Article Details

Date Revised:
9/11/2015

Applies to:
Angular, bootstrap, Development, Office add-in, Office UI Fabric, SharePoint Add-in


Angular is such a popular JavaScript framework because it provides an elegant structure for creating enterprise applications using a programming language that was never designed for such a thing. When developers build applications with Angular, they often couple it with the Bootstrap framework to easily take advantage of pre-canned styles and components. The Angular team has also created several directives that combine Angular and Bootstrap into UI Bootstrap components. Together, these frameworks give you the ability to create beautiful and functional applications using HTML5, CSS3, and JavaScript. As proof, figure 1 shows an application theme that I used recently. Pause and enjoy the beauty.

Angular and Bootstrap let you create beautiful and functional applications using HTML5, CSS3, and JavaScript

Figure 1, Angular and Bootstrap make beautiful and functional applications

When developing add-ins for Office and SharePoint, I typically use the Bootstrap styles and components. While this approach gives me all the benefits stated previously, it does present some challenges matching the standard look and feel of the Office suite. The problem for developers is that the UI components that are part of the Bootstrap world were not created with Office and SharePoint in mind. Consequently, your add-in may look good, but it may also give the user that vague feeling that it doesn’t quite fit. What we really need are styles and components that offer the beauty and ease of Bootstrap, work well with Angular, and fit nicely into Office and SharePoint. Fortunately, Microsoft has answered our needs with the Office UI Fabric.

Introducing the Office UI Fabric

Last month the Office team announced the release of the Office UI Fabric for general availability. The Office UI Fabric is a responsive, mobile-first, front-end framework for developers creating solutions for Office and SharePoint. The framework consists of styles and components that give your applications the same look and feel as Office and SharePoint. In short, it’s Bootstrap for Office and SharePoint.

The Office UI Fabric defines 10 base font classes that represent the typography used throughout Office and SharePoint. Each base class uses the Segoe UI font and varies by size. There are also several helper font classes that alter the text weight.

9 different themes are defined, making it easy to create a consistent feel in your application. Along with custom icons and animations, look and feel is easy. The Office UI Fabric also provides localization support with right-to-left (RTL) styles and language-optimized fonts.

Just like Bootstrap, the Office UI Fabric also defines a 12-column, responsive grid structure. The grid defines row and column styles just like Bootstrap. The grid is also responsive so you can use classes to define how it should change as the device size changes. Again, this is exactly like the Bootstrap grid, but made for Office and SharePoint.

The Office UI Fabric includes 26 components like menus, breadcrumbs, buttons, tables, and cards. Each component consists of some template HTML and a style sheet. Generally, you can use the components by simply copying the HTML into your project. You can review the complete Office Add-In Design Guidelines online to ensure consistency. Figure 2 shows a sample dialog box with a clean, consistent look. My only disappointment is that I wish the components came packaged as Angular directives. Looks like that is a good opportunity for a community project.

Office UI Fabric dialog box

Figure 2, A sample Office UI Fabric dialog box

Using the Office UI Fabric

Using the Office UI Fabric in your Office and SharePoint development is straightforward. As an example, I created an Outlook add-in that allows a user to pick from a list of “quick responses” when answering an e-mail. The add-in is built using the Angular framework with the set of quick responses maintained in a SharePoint online list. Figure 3 shows the responses surfaced when the user responds to an e-mail. Notice how the look and feel fits right in with Outlook.

Outlook add-in created using the Office UI Fabric

Figure 3, An Outlook add-in utilizing the Office UI Fabric

After creating the initial Outlook add-in project in Visual Studio 2015, I reworked the structure a bit to introduce the Angular framework along with the Active Directory Authentication Library for JavaScript (adal.js). This allowed me to assign my Outlook add-in permissions in Azure Active Directory for accessing the SharePoint online list where the quick responses are maintained. This article is not intended to be a primer on adal.js, but you can get up to speed by reading my previous article on the subject. Additionally, the complete source code for this article is available in the IT Unity repository.

Once the basic add-in structure was complete, I added the references to the Office UI Fabric. The styles are available from a content delivery network (CDN) link. The components, however, must be copied from the raw HTML in the OfficeDev repository.

<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">

I used the styles, responsive grid, and button component in my Outlook add-in. The experience was similar to using Bootstrap, except the documentation on GitHub for the Office UI Fabric is not nearly as complete as for Bootstrap. Nonetheless, I was able to create the simple interface shown in Figure 3 without too much difficulty. The code in listing 1 shows the HTML for the user interface.

Listing 1, A simple Office UI Fabric interface

<div class="ms-fontColor-themeDarker" style="margin:5px;">
    <div class="ms-font-s-plus">{{message}}</div>
    <div class="ms-font-s-plus" style="padding-bottom:5px;">
        Select a quick response from the choices below:
    </div>
    <div data-ng-hide="!workingOnIt">Retrieving quick responses...</div>
    <div class="ms-Grid">
        <div class="ms-Grid-row" data-ng-repeat="response in responses" style="padding-bottom:5px;">
            <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
                <div class="ms-font-m ms-fontWeight-semibold">
                    {{response.Title}}
                </div>
            </div>
            <div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
                <button class="ms-Button ms-Button--primary"
                        data-ng-click="insertResponse(response.Title)">
                    <span class="ms-Button-label">Respond!</span>
                </button>
            </div>
        </div>
    </div>
</div>

Conclusions

My first experience with the Office UI Fabric was a good one. I found the styles and components easy to use and would recommend them to Office and SharePoint developers. The framework would benefit from some additional documentation and samples as well as the development of Angular directives. For a first release, however, the framework seems solid. Developers should begin to use it immediately for Office and SharePoint development.


Topic: Development

Sign in with

Or register