Roadmap to the Future of SharePoint

(cross-posted to the BlueMetal Blog)

This week Microsoft mapped out a bold new plan for SharePoint. Microsoft is investing heavily to modernize the product to make it work as well in the Device and Cloud era as it once did in when the Web was still shiny and new. This article will explain how these changes could affect your organization’s SharePoint plans and how you can start preparing.

FOSP-4Pillars

If you missed the announcement, this is a good place to start. Here are some of the highlights:

Continue Reading

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!

Widget Wrangler Webcast and New Release

(Cross-posted to Julie Turner’s blog, SharePoint Customization Veni, Vidi, Vici)

Here’s a quick update on the Widget Wrangler – the light-weight JavaScript framework that helps you build flexible widgets that can be used in SharePoint content editor web parts, add-in parts, or really pretty much everywhere.

WW-PnP-WebcastThe Widget Wrangler was featured in a webcast on Channel 9 today. The Office team’s Vesa Juvonen interviewed WW creators Julie Turner and Bob German, who explained the framework and demonstrated how to use it with AngularJS, jQuery, and plain old JavaScript. Please check it out!

Also today we’re pleased to announce the release of Widget Wrangler version 1.0.1. This new version is backward compatible with the old one; the new release includes:

  • CSS Support – Allows packaging CSS references from within your widget; the Widget Wrangler will efficiently load each CSS file once on each page, even if it’s referenced by multiple widgets
  • Multi-module support – Allows bootstrapping multiple AngularJS modules within a widget (thanks to Peter Wasonga for the feature suggestion; Peter writes widgets in Kenya)
  • A new TypeScript sample; the Widget Wrangler works the same with TypeScript or JavaScript; this is mainly useful to show how to develop an AnuglarJS widget in TypeScript
  • Improved/reorganized documentation

You can get the new release on our Github repo at https://github.com/Widget-Wrangler/ww. The Widget Wrangler is also a part of the Microsoft OfficeDev Patterns and Practices library, and will be updated there in the next PnP release.

Thanks to everyone for your interest and support, and happy widget writing!

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!

SharePoint As a Service

NOTE: For more on this topic, please check out this episode of the Office 365 Developer Podcast where I discuss these topics with Microsoft’s Jeremy Take; it was a great discussion!

For many years, Microsoft and others in the SharePoint community promoted SharePoint as a Platform. The idea was to develop business applications within SharePoint sites, and thus to gain access to all the rich services SharePoint brings to the table such as document management, search, user profiles, enterprise content management, and more. Another promise of this approach was that IT could support one big application (SharePoint) and deliver may smaller applications to business users, and thus deliver on the “long tail” of application needs.

The Long Tail of SharePoint
The Long Tail of SharePoint – Circa 2007

Microsoft invested in features like Business Connectivity Services and the Secure Store (identity mapping) service to make SharePoint a capable platform for building business solutions that integrate with other Line of Business applications. Yet this approach wasn’t all we had hoped it would be.
Continue Reading

Microsoft’s New Approach to Collaboration and Portals

At the Ignite conference last week, Microsoft laid out a new vision for collaboration and portals that is a major departure from the site-based approach that has been the core of SharePoint for more than a decade. Microsoft still fully supports SharePoint in its current form and will continue to do so, both on premises and in Office 365, even as it introduces Office 365 Groups and a new suite of Office 365 “NextGen” portals that could replace SharePoint sites for enterprises that want a more modern, cloud based approach to collaboration. SharePoint sites will continue to work, but it’s unlikely Microsoft will invest in enhancing them beyond where they are in SharePoint 2013.

Continue Reading

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

Stretching the (HTML 5) Canvas: Fixing Aspect Ratio Problems

The Problem

I’m working in a web part that uses the HTML 5 <canvas> element, and I ran into a little problem. The web part is a “microsurvey” that asks a single question and, when the user clicks an answer, displays the results of the survey so far. For the results, I wanted to show a bar chart, and I thought it would be a fun opportunity to use the new HTML 5 canvas. The problem is that my chart was distorted; as you can see the text is too wide and looks like it came off an old dot matrix printer. Somebody stretched the canvas!

3-9-2015 6-28-46 PM

Continue Reading