Learning TypeScript: A Code Camp Adventure

Last weekend I had the pleasure of presenting a couple sessions on TypeScript at Boston Code Camp 25, one on my own and one with my good friend and colleague, Bob Goodearl. We’ve just posted the materials, which may be useful beyond the presentation.

TypeScript 101

This session covers the basics of the language. I tried to distill the whole thing into a set of code samples, inspired by the old “Got Dot Net” site from days of yore. You can find the Github repo here, including project folders for both Visual Studio Code and Visual Studio 2013.

TypeScript 102

This session delves into creating AngularJS 1.x applications in TypeScript. I started off with the simple example of a weather “widget”. A widget is a small application that runs independently on a page; in this case I used the Widget Wrangler library to place the widget on the page. Because it’s small and simple, you can easily see how to set up an Angular controller and service in TypeScript, and how to handle Angular promises.

After that, Bob Goodearl picked it up with a more advanced example that shows a hybrid Angular/ASP.NET MVC application with a WebAPI back-end service. Pointers to his code and the other session materials are here on his web site.

Please check it out and send feedback in the comments; thanks!

Flexible SharePoint Development with Widget Wrangler

(Cross posted at Julie Turner’s blog, SharePoint Customization: Vedi, Vini, Vici)

What’s a widget, and why should I care?

In economics, a widget is a name for a generic gadget or manufactured good; on the web, a widget is a generic piece of web functionality running on a page. What makes widgets special is that, unlike controls in ASP.NET or directives in AngularJS, widgets are generally released separately from the web page that hosts them, and are often deployed by end users.

If you’re reading this blog, you probably know something about Microsoft SharePoint, and this might sound familiar. A widget is a lot like a web part, only much lighter weight. In fact, widgets can easily be hosted in content editor web parts, on a list form, in a SharePoint add-in, or outside of SharePoint. If you’re careful, you can reuse the same widget in all those contexts!

Continue Reading

How to read information in a SharePoint Person field via the REST API

A colleague of mine recently had a challenge reading data out of a SharePoint person field via REST and then rendering it in AngularJS. As it turns out, I had the same challenge recently and found the solution … so here it is!

If you simply read the person field, you’ll end up with the user ID, which isn’t too helpful. The key is to use the OData $expand option to join the user ID to the user information (stored in a hidden list in every site collection). Here’s a sample.

$http.get("https://<servername>/sites/doccenter/" +
            "_api/web/lists/GetByTitle('Documents')/items?" +
           "$select=Title,Customer,FileLeafRef,FileRef,UniqueId,Modified," +
                "Author/Name,Author/Title" +
            "&$expand=Author/Id" +
           "&$filter=Customer eq '" + item.CustomerName + "'" +
           "&$orderby=Title")
.then(function (response) {
    // Add the response data to the ViewModel
    vm.items = response.data.value;
})
.catch(function (response) {
   vm.message = "The list of documents could not be retrieved";
    console.log("error");
});

Now here’s the view that renders the author’s name. Notice that the person’s attributes are properties within the person object (Author in this case…)

<div class="row site-grid-row" 
         ng-repeat="item in vm.items">
    <div class="col-xs-12 col-sm-7 col-md-6 col-lg-6">
        {{item.Title}}
    </div>
    <div class="hidden-xs hidden-sm col-md-3 col-lg-3">
       {{item.Author.Title}}
    </div>
    <div class="hidden-xs col-sm-5 col-md-3 col-lg-3">
       {{item.Modified | date : 'medium' : '-0500'}}
   </div>
</div>

I hope someone else finds this helpful!

The Well-Tempered AngularJS Web Part

Listen while reading …

Manuscript for Bach's Fugue in Ab Major
Manuscript for Bach’s Fugue in Ab Major

The mathematics of music isn’t as simple as you might think, and early musical instruments often didn’t get it right. Keyboard instruments were especially susceptible to this. On a particular organ, for example, the fifth interval in the key of C might sound harmonious, but the fifth above Ab might be sour and grating to the ear. These so-called “wolf” notes could spoil a whole composition. It wasn’t until the late 17th century that “well-tempered” instruments came along, a fact that was celebrated by J.S. Bach in his solo keyboard composition, “The Well-Tempered Clavier,” which includes harmonious preludes and fugues in every possible key.

Like notes on a piano, web parts (or any kind of web widgets) are combined in new and unexpected ways on a page. Yet sometimes they don’t play well together. This article will show you how to write “well-tempered” web parts that always behave appropriately, even if other versions of Angular are used on the page.

Continue Reading

Understanding Javascript Promises

I have to admit I found the concept of Promises difficult to grasp at first; once I understood, I’ve been looking for a good way to explain it to others. This article is my attempt to make Promises easy to understand through a simple metaphor.


Imagine you’ve entered a crowded restaurant. You force your way to the maître d’ and request a table, and are told there is a wait. “We’ll call your name when the table is ready,” she says. This is the equivalent of a “callback” function – the server (a restaurant server in this case) will call you (the client) back when your request is complete. Inevitably half the people in the room are named “Bob” and a crowded confusion ensues.

Continue Reading