New Release of Widget Wrangler

When you’re writing a widget in Angular 1.x, it’s possible to pass configuration information into the widget using the ng-init directive, as shown in this example. (Angular 2 isn’t ready for widgets yet since there’s no way to put multiple copies on the page; Microsoft is working with Google on a fix. Here’s a sample.)

That works fine in Angular, but what if you’re using some other framework? The Widget Wrangler has a feature, the ww-appBind attribute, that allows you to bootstrap your own widget; this allows pretty much any JavaScript framework. But then how can you pass in configuration information?

The answer came from colleague Brian McCullough, who contributed a new feature to the Widget Wrangler. I have to admit I’ve been kind of swamped at work lately; he submitted the pull request more than a month ago! Well today Brian’s new attribute, ww-appConfig, is released in version 1.02 of the Widget Wrangler.

Here’s an example:

<div>
<h1>Knockout Widget 1</h1>
<span data-bind="text: textboxLabel"></span>:
  <input data-bind="textInput: message, event: {keyup: messageChanged}" />
  <i>
    <span data-bind="text:messageLabel"></span>:
    <span class="secret" data-bind="text: message"></span>
  </i>

  <script type="text/javascript"
          src="pnp-ww.js"
          ww-appName="MyWidget"
          ww-appBind="myWidget.Load"
          ww-appConfig='{"textboxLabel":"Enter a secret message",
                         "messageLabel":"The secret message is"}'
          ww-appCss='[{"src": "style.css"}]'
          ww-appScripts='[{"src": "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js", priority":0},
                          {"src": "script.js", "priority":1}  ]'>
  </script></div>

In this example, two labels are passed into ww-appConfig in JSON format.The Widget Wrangler passes the appConfig value to the appBind function, myWidget.Load(), which parses the JSON and makes it available to the Knockout application.

var myWidget = myWidget || {};

myWidget.Load = function (element, config) {
  myWidget.Config = JSON.parse(config);
  ko.applyBindings(new myWidget.vm(), element);
}

You can see the whole thing in action in this Plunk.

Thanks Brian, this is a great addition and your contribution was clean and ready-to-go!

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

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