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!

Continue reading