If you’ve seen Windows 8 yet, you know it’s got a tile-based start menu. One of the cool things (or annoying things) you can do is post values on your app’s tile. This is called a “live tile” in Windows 8 world. Your app users can turn them on or off with a right click on the tile.

Here’s how I built one with JavaScript.

Figure out what you want to display on your live tiles

This is what my tile looks like before it’s “live” as both a smaller (square) and a larger (wide) tile:

The plan is to show the users current altitude as a number on the top, larger font line, then show the units (feet or meters) under that in the smaller font.

There are several rules about what you can and can’t show on your tiles, so check the guidelines carefully to be sure your idea will not get rejected by the Windows Store during the certification process.

Tests for the correct live tile XML

Since the live tile notification is all about sending the right XML, let’s start with a test of the XML we want at the end. Here I’m using QUnit to check the XML.

These tests fail since we haven’t written the functions yet, but we’ll do that next. Ignore the “branding” attribute for now. We’ll come back to that.

Build up the live tile XML

Here’s the code to get the correct XML and get those tests passing. See those calls the Windows.UI.Notifications.TileTemplateType? That’s where you plug in the name of the square and wide template you picked from the catalog.

I’m building up an array of values for the different lines of text. Use any XML or string manipulation technique you like. I got this one from the Windows 8 SDK samples.

Combine the square and wide XML

Since users of your tile can toggle the smaller (square) or larger (wide) version of your tile, you want to combine the square and wide XML and send down both. Here’s how to do that. Again, this is just XML manipulation, use any technique you like.

The last two lines are doing the real work here, by using the Windows 8 notifications API. The rest is calling the other helper functions.

Calling the notification code

So who notifies the notifier code that we’ve got some new stuff to show on the line tile? You do! Figure out when something interesting happens in your app, and send a notification to the live tile then. In this case, that looks like:

tile.sendTileUpdate(altitude, altitudeUnits);

Putting it all together

Here’s the result for the square and wide tiles:

Here’s the combined JavaScript. I put it all in a file named it tile.js and used the WinJS namespacing function. This is pretty much the same as the revealing module pattern, and it means I can call tile.<whatever> from the tests and other JavaScript files.

Branding

In the bottom left corner of the tile, I am showing the name of the app, in this case “Altitude”, on the live tile.

If you like, you can show your logo here instead. This comes from the 30x30 logo in your package.appxmanifest on the Application UI tab, under Tile > Small Logo.

Change these lines:

binding[0].setAttribute("branding", "name");

to:

binding[0].setAttribute("branding", "logo");

And you’ll get this instead:

In fact, you can take out all the code around branding if you like the logo there, since that’s the default behavior. If you want neither your app name nor your logo there, you can set the branding attribute to “none”.

Hey, my Live Tile doesn’t work!

I had this experience the first couple times I ran my code, too. The most common mistake I’ve seen is invalid XML, so be sure you add those test first to avoid that.

The other snag was using the Simulator in Visual Studio 2012 that simulates a tablet with touch and rotating. I don’t know what the issue was, but my live tile didn’t update when I ran it through the Simulator. Other live tiles could be turned on and off, but not the one for my app. When I ran on Local Machine instead, the live tile worked fine. So if you’re not seeing your live tile work in the Simulator, switch to Local Machine and see if that fixes it for you.