Windows 8 Live Tiles using JavaScript

Nov 09 2012

So I was working on this new Windows 8 app using JavaScript and had to spend some time going through a lot of documentation to figure out the best way to create live tiles for the app. Live tiles are basically icons (tiles) for your app on the start screen. The difference between live and normal tiles is that live tiles can dynamically change their content; so say a news app can show the latest news on the tiles itself without the user opening the application.

Sounds cool? Here is how to implement live tiles using JavaScript:

(1) Create five XML files with content which looks like this:

Name the files tile1.xml, tile2.xml, ….., tile5.xml

The main difference between these files will be the change in the image URL. Use different image URLs in these five files. These files will act as our tile templates.

(2) Create the image files we specified in the XMLs. All the five image files you are going to create should be of 310px  * 150px dimensions.

(3) Paste the following code in the default.js file of your JavaScript application:

To be precise, the code should be pasted in the location indicated below:

Note that we have given URL of the XML files in the above code.

(4) Make sure that XML files from the first step are available in the URLs specified in the code above. If you cannot host those files in the given location, host them wherever you can and change the URLs in the above code.

(5) Similarly, make sure that the image files specified in the XML files are available in the respective locations. If not, provide the correct locations in the XML files.

(6) Run your app in the local machine (not in simulator). Now if you go to your start screen you can (hopefully) see that the tiles have started appearing and they are rotating in fixed intervals.

If you want to change the layout or any other parameter in your live tiles, go look at the documentation and figure it out. Here are some links:

7 responses so far

  • JMP says:

    Hi,

    Great idea, but how do u make this work with both square and wide live tiles ?

    I’ve been trying to instanciate a new array of URL and to call a new
    startPeriodicUpdateBatch(urls2, recurrence); instance but this doesn’t work.

    Regards,

  • JMP says:

    Neither do the creation of a second Windows.UI.Notifications… => can’t make my wide/square tiles content getting uploaded without having to launch the app again.

  • Aagust kk says:

    Hi there,
    I tried your above example, tiles are not changing in time interval. Would you please shed some lights on frequently changing tiles.

    Thanks.

  • Christian Versloot says:

    hi all,

    You make this work for other sorts of tiles by simply making a new XML file with the other template scheme; then you add its URL into the “url” part of this script.

    By doing that you will be able to set various sorts of live tiles; big AND small at once.

    Chris

  • Christian Versloot says:

    hi Aagust,

    If you wish to change its time interval; it worked when I changed ‘hour’ to ‘second’.

    Chris

  • rain says:

    please show your demo

  • outlr says:

    This article is also quite good to go trough it.

Leave a Reply