Roland Oldengarm - Independent IT Contractor

Living in the coolest little capital Wellington, New Zealand!

Tag: Angular

A new era in SharePoint development: The SharePoint Framework (spfx)

Announced at the “Future of SharePoint” event, was the SharePoint Framework. And it is in public beta since this week! I was one of the lucky persons who had access to the internal repository, so I already had a play with it before. Unfortunately I could not blog about it, as it was under NDA. I will talk about how it will fit into the existing SharePoint development infrastructure, and start with some history 🙂

Continue reading

How to automatically test your non-Angular Cordova or Ionic App

Part of building any application is testing. I am focusing only on tests executed by the developer, so the first stage in any development cycle. The first option is to do this manually. While this works for most usecases, it has some major disadvantages:

  • It is time consuming.
  • You can’t run all the manual tests after each change.

When a developer does a manual test, he only confirms that the change did what it had to do. To assure it did not break anything else, in most cases he will do a quick regression test, but that won’t cover all possible regression issues.

We are building a Cordova / Ionicapp, with some complicated, time consuming use cases like logging in, logging out, adding items to a list, etc. Any change we make may cause a regression. We do have some unit tests to cover certain services and controllers, but that does not cover everything.
So, we have decided to use end-to-end automated tests to be sure that before each release, the major part of the app is still working as expected. Any bugs detected with these tests can be fixed by a developer straightaway. If it would be detected by our testers, or even worse by the client in UAT, this would make it much more expensive to fix.

I have spent some time to figure out what the best way of doing this is. I couldn’t find a lot of working documentation and examples to set up automated user testing with a Cordova / Ionic mobile application.

Continue reading

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 ADAL JS + SharePoint REST API in non-root site collections

I’ve been struggling with the following. I’m building a SPA Office Add-in, which communicates with Office 365, using the (awesome) ADAL JS libraries. My app queries the SharePoint Search and downloads files.

As a starting point, I’ve been using this example: https://github.com/OfficeDev/O365-WebApp-MultiTenant

To access the REST API endpoints I was using Angular $http, so I don’t have to worry about adding access tokens to the requests. It was all working fine, until I wanted to access files in non-root site collections. I saw a HTTP/401 in Fiddler, but the access token was attached, so that seemed weird. The response was:

{“error”:”invalid_client”,”error_description”:”Invalid audience Uri ‘{azure_app_id’.”}

… where azure_app_id is my Azure Application ID.

Continue reading