Adding Live tiles - Build Windows 8 Apps with HTML5 and JavaScript - page 330

Selecting data to display in tiles
The TodoList application is entirely based on a list of tasks; each task has its own description, due
date, and priority. A Live tile for TodoList will likely display the latest task or perhaps the next task
to be completed. The liveTilesManager.enable function receives the list of current tasks and decides
which information to display.
In this exercise, you will pick up the first task and display its description and due date. For this to
happen, you add the following code to the liveTiles.js file. More precisely, you add this code to the
bottom of the liveTilesManager.enable function.
// Grab application's information for the tile(s) to display
var featuredTask = listOfTasks.getAt(0);
// Add data to the tile(s)
textElementsLarge[0].innerText = "TO DO";
textElementsLarge[1].innerText = featuredTask.description;
textElementsLarge[2].innerText = "";
textElementsLarge[3].innerText = "due by</b>: " + featuredTask.dueDate.
toLocaleDateString();
textElementsSmall[0].innerText = liveTilesManager.getDueDateCompact(featuredTask);
textElementsSmall[1].innerText = featuredTask.description;
You also need to add the code for the liveTilesManager.getDueDateCompact function. This
function is a utility function that simply formats the due date in an mm/dd/yyyy format. The function
goes at the end of the liveTiles.js ile.
liveTilesManager.getDueDateCompact = function (task) {
var date = task.dueDate;
var day = date.getDate();
var month = date.getMonth();
month++;
var year = date.getFullYear();
var x = month + "/" + day + "/" + year;
return x;
}
Combining small and large template together
Although it is not strictly required, any Windows Store application should consider supporting both
small and large tiles. So far, you configured both tiles independently; however, this is not enough.
Windows 8 requires that large and small tile templates are combined together in a single template.
This must be done programmatically. Here's the code you need to append to the liveTilesManager.
enable function: