In 2015 Microsoft released the Office UI Fabric, which allows developers to create web applications and SharePoint / Office add-ins that look and feel like Office. Microsoft was / is using this internally as well, they open-sourced it so the community could benefit from it. Essentially, the Office UI Fabric is a set of CSS style sheets.

They also released a set of components like a textbox, dropdown, date picker, table, etc. but they’re not part of the Office UI Fabric. They are a set of HTML files you’d have to copy / paste to your application, include the example JavaScripts, and you would have your textbox or date picker. This is not very straightforward. Luckily there is a solution. The popular JavaScript framework Angular allows you to create custom directives, which makes it possible to create new HTML tags with code that attaches behaviors. The open source ngOfficeUIFabric, started by Andrew Connell, has the goal to transform all Office UI Fabric Components to Angular Directives. I am part of this team as well, and I’ve built the Choicefield, Dropdown, Textfield, and Toggle.

In this blog post I am going to show you how you can leverage ngOfficeUIFabric in a Windows 10 Universal App! Windows 10 apps are available in 2 options: XAML based and HTML based. The latter allows us to build our app like a website, and deploy as a native app!

Prerequisites

You will need to set up your machine to be able to build and deploy Universal Windows 10 Apps. I assume you are using Visual Studio 2015. If you haven’t done so, install the required SDK’s. Go to Control Panel -> Programs and Features -> Visual Studio 2015 -> Modify

Go to Windows and Web Development and select Universal Windows App Development Tools:

You don’t need the emulators if you have Windows 10 installed. If you are still on Windows 8 / 8.1, you will still be able to build the apps, but you won’t be able to test them. In that case, install the Mobile emulators. This requires HyperV to be enabled, which is not available in Windows 10 Home, only in Pro!

Click Update and wait. This may take a while. Grab a cup of coffee, or two.

Create a project

Open Visual Studio, go to File -> New Project, and select JavaScript->Windows->Universal->Blank App (Universal Windows) as the template:

Take the name I’ve chosen, or pick a different one.

Add the required resources to the HTML

We will need to add the following JavaScript / CSS resources to the HEAD section of our default.html, in the following order:

  • Angular
  • Office UI Fabric CSS
  • ngOfficeUIFabric

There are multiple ways to do this, e.g. I could install them via bower or via CDN, but I’ve chosen to add them via NPM. I’ve tried including them from a CDN, but that does not work, as this is probably blocked in UWP HTML apps.

Open a command prompt and navigate to your project folder. Run: npm install ng-office-ui-fabric –save

Then, add the following code to the default.html, just after WinJS/js/ui.js:

<link rel="stylesheet" href="/node_modules/office-ui-fabric/dist/css/fabric.min.css">
<link rel="stylesheet" href="/node_modules/office-ui-fabric/dist/css/fabric.components.css">
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/ng-office-ui-fabric/ngOfficeUiFabric.js"></script>

Create your Angular App

The next thing is to create the basic structure of your Angular app. Open js/default.js, and append the following at the bottom:

angular.module('YourApp', [
 'officeuifabric.core',
 'officeuifabric.components'
]).controller('BaseController', function ($scope) {
// controller code goes here. See source code
});

I have not included the entire source code of the Controller, please check out the attached zip file for the entire project.

In the HTML, I’ve included some directives, like the Toggle (which switches between the light and dark UWP theme, very cool), the Textbox to change the title, and a Table with some sample files. E.g. the Toggle works like this:

<uif-toggle ng-model="lightTheme" uif-label-on="Dark theme" uif-label-off="Light theme"></uif-toggle>

The result looks like this on my laptop:

And the best thing about UWP apps is that they run on Windows 10 Mobile without a problem too! I’ve deployed it to an emulator, and it looks like this:

For the full source code, download the project: ngOfficeUIFabric – Demo