Add a Live Tile to a Project Siena App

 

Microsoft Project Siena is a really cool tool. Basically, it’s a Modern App that allows you to BUILD Modern Apps almost ready for uploading to the Windows Store. A small amount of customization work can be done in Visual Studio 2013 to tweak settings, but MS Project Siena is really a visually driven tool that builds complex JavaScript and HTML apps.

One of the few things it (currently) does not do (in Beta 2) is provide a Live Tile experience. There’s an active Project Siena TechNet forum and Ronan Monaghan came up with some code using buildmypinnedsite.com that, when inserted into the proper file, provides a Live Tile. As it turns out, you don’t need to visit buildmypinnedsite.com unless you have a web site and want a pinned live tile function for site visitors.

All you need is a properly formed RSS feed which you insert into the “template” below, replacing text in red with your own feed for your app. In fact, you can use a different RSS feed in each of the five slots if you have multiple feeds for your app.

var notifications = Windows.UI.Notifications;
var recurrence = notifications.PeriodicUpdateRecurrence.HalfHour;
var urls = [
new Windows.Foundation.Uri("http://notifications.buildmypinnedsite.com/?feed=http://www.flickr.com/services/feeds/photos_public.gne?id=44494372@N05&format=rss_200&id=1"),
new Windows.Foundation.Uri("http://notifications.buildmypinnedsite.com/?feed=http://www.flickr.com/services/feeds/photos_public.gne?id=44494372@N05&format=rss_200&id=2"),
new Windows.Foundation.Uri("http://notifications.buildmypinnedsite.com/?feed=http://www.flickr.com/services/feeds/photos_public.gne?id=44494372@N05&format=rss_200&id=3"),
new Windows.Foundation.Uri("http://notifications.buildmypinnedsite.com/?feed=http://www.flickr.com/services/feeds/photos_public.gne?id=44494372@N05&format=rss_200&id=4"),
new Windows.Foundation.Uri("http://notifications.buildmypinnedsite.com/?feed=http://www.flickr.com/services/feeds/photos_public.gne?id=44494372@N05&format=rss_200&id=5")
];
notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);
notifications.TileUpdateManager.createTileUpdaterForApplication().startPeriodicUpdateBatch(urls, recurrence);

 

Once you have personalized the template, open init.js in the JS folder inside Visual Studio and insert the code above any existing var statements as shown in the screen shot below.

Once you’ve finished any other customization work inside Visual Studio, if you pin your app to your Start Screen, you’ll see the Live Tile functioning. Below is a screen shot of two of my apps showing Live Tiles in action.

That’s all there is to it. While there isn’t any additional customization available for the Live Tile (as there would be if you built from scratch using Visual Studio), this quick and dirty work around will give your app a little something extra to offer.

No guarantees that this will work for every RSS feed and all the usual disclaimers apply – edit the project’s init.js file at your own risk and create a backup first.

Enjoy!