In this installment of Windows 8: What I’ve learned, I’ll discuss a bug in my app that came from a poor understanding of the underlying template I’d built on.

Getting Started with a Template

To jump start the development of my Windows Store app, Community Megaphone, I used the Grid App JavaScript template, shown below:

The big advantage of this template is that it includes pre-configured databinding to sample data created in JavaScript in a file called data.js. By simply swapping out the sample data for some JSON data downloaded from the Community Megaphone OData feed, and making a few additional tweaks, I had my data in place, and was able to focus more on the things I cared about, namely adding value by supporting Search, Share, and other great features of Windows Store apps (BTW – If you’re building Windows Store apps, you should definitely sign up for Generation App…lots of great learning resources, plus other benefits, all for free).

A Small Gotcha

Last night, while I was handing out candy to the neighborhood kiddies, I was playing on my new Surface, sharing info on a few events from Community Megaphone using my app, and discovered that there was a problem…for one particular category of events, if I clicked any of the events, I would only ever get the event details for the first event in that category.

My first reaction…WHA?

My second reaction was to run upstairs and grab my dev laptop (Surface RT is great for a lot of tasks, but you can’t run Visual Studio on it), crack open the project, and set a couple of breakpoints, in itemDetail.js and groupedItems.js, and ran the projects. It didn’t take long to discover that the function used in the Grid App template to retrieve an item selected on the home page and pass it to the details page, relies on the combination of group key and title being unique.

That works fine…as long as you don’t have more than one item in the same group with the same title. Well, as it happens, one of the groups (categories) of events I had was Hackathons. And in a little over a week, Microsoft is running a series of hackathon events called GenAppathon. So there are currently a whole bunch of events in the same category with the same title, thus the bug I observed. The code in question, which lives in data.js, looks like this:

   1:  // Get a reference for an item, using the group key and item title as a

   2:  // unique reference to the item that can be easily serialized.

   3:  function getItemReference(item) {

   4:      return [item.group.key, item.title];

   5:  }

Now at first when I encountered this, I thought that this was a bug in the template. But really, it was just a choice made by the authors of the template, and one that I managed to miss in the process of building on top of the template. The code above is pretty simple, and just returns the group key and item title for the item that’s passed in to the function, and this can later be resolved back to the item by calling resolveItemReference and passing in the array returned by getItemReference. This allows the GroupedItems page to pass an item to the ItemDetails page without passing the entire item object, which could, depending on your data schema, be quite large.

For my purposes, the fix was pretty simple, in groupedItems.js, when a given item is invoked, I simply return the item itself, since I know my items won’t be terribly heavy, rather than calling the getItemReference function.

What Did We Learn?

There are a couple of lessons to take away from all this:

1. Take some time to walk through and understand the templates you can use to create your projects. A little thing like this would have been easy to discover if my original data had duplicate titles, but I could also have figured it out if I’d spent a little more time stepping through the code while running it. There is a TON of information available about the built-in templates for building Windows Store apps in JavaScript here:
   http://msdn.microsoft.com/en-us/library/windows/apps/hh758331.aspx
   • You really need to know your data, and when testing you should use test data that is truly representative of the data your app will see over its lifetime. Granted, this isn’t always possible, but the closer you can get to real data, the better in terms of catching bugs early.

Do you have a great idea, and want help turning it into a great app? Then you should register for [Generation App][3]. The Generation App program includes a 4-week process to get you from idea to app, including links to all the right documentation, tips, videos, and more. You can also access 1:1 phone support to talk with a Microsoft engineer about technical or design questions you may have. So [sign up today][3]!