Roland Oldengarm - Independent IT Contractor

Living in the coolest little capital Wellington, New Zealand!

Category: ngOfficeUIFabric

How to use the Office UI Fabric directives ngOfficeUIFabric in a Windows 10 Universal App

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

Angular Directives and Transclude: Select works differently

Together with a great team of Office UI Fabric enthusiasts I’m working on building Angular Directives for the Office UI Fabric. Check out the Github repository for more information.

As part of web applications I’ve built, we’ve been using Angular more and more in the last couple of years. Angular allows you to build custom directives, in most cases used to create new HTML elements. In the light of the Office UI Fabric, I have for example built directives for the Textfield, Toggle, and Dropdown control. With the latest one, the Dropdown control, I’ve ran into a very weird issue with transclusion.

Continue reading