In my ‘spare’ time I’ve been building a new Windows 8 Store App to go alongside my existing kwiQR app.

Like kwiQR, this app is built in .NET and XAML but I think it took me a little more time than kwiQR. Also, like kwiQR it is to an extent based around the idea of people having a Windows 8 device that is fairly mobile and has a camera.

There are lots of devices like that for Windows 8 and you can browse them up on the official website so, hopefully, my app will find a ‘market’ (it’s a free app) over time.

Unlike kwiQR, I thought I’d write up a bit about the app here on my blog as there might be some points of “re-use” that people get out of it.

This app is called Expense MX and is an app that I designed for my own use. Here it is in the Windows Store.

I carry around a bunch of envelopes containing expenses and it drives me nuts. I have a very poor memory so I never really enjoy the idea of trying to remember why I have an expense for £14.83 based purely on a receipt and a date and my expenses are always out of date order and I spend ages trying to sort them into a sensible list before banging the details into a spreadsheet.

There’s probably a lot of apps already like this but I wanted to build an app and I wanted an app that worked the way that I worked so I built one. Whether it’ll appeal to anyone else, only time will tell.

So I made an app. Here’s a quick walkthrough of how the app works and a few Windows 8 features that I built into it along the way.

The Main UI

When the app starts up for the first time, it displays a splash screen;

and then a blank screen;

It’s worth saying that the “icons” for this app come from the Noun Project (http://www.thenounproject.com) and I hope that I have correctly attributed them in the Settings panel of my app as I find them really useful.

That backdrop was stolen from PowerPoint (yep!) and I hope I’ve used that correctly because it said it was royalty free. I daresay I can change it easily enough if they come after me over it.

I don’t have any real settings for this app yet so this is just a place for attributions where I attribute other people’s great work and list my privacy policy for the app.

In order to build that settings flyout I used the Callisto library by Tim Heuer which is really useful.

From here, the app works on the idea that you have expense ‘envelopes’ and that they have one of three status values;

• Current
• Submitted
• Paid

and that big button (and the app bar) let you get started and created your current envelope which gives a UI like this;

For storage of these items, I simply use the LocalFolder that’s given to each application on a per-user basis. I did toy with the idea of putting expenses on SkyDrive and I think that’d be a cool thing to do but;

1. I wanted the app to work offline.
2. If I allow offline, I’d have to allow additional complexity of sync’ing data.

I may do this in a future version. I could have just used the RoamingFolder and had Windows 8 automatically roam the data for me except that I have images of expense items to deal with and I’d probably very quickly overflow the 100KB that I’m allowed to roam.

So, for now, the data is stored in the file system in a simple folder structure containing JSON files.

I also made an “interesting” choice to try and keep my app pretty stateless. Each page in the app hits storage separately and does its own reads/writes (through a common persistence service) rather than keeping files open and sharing them.

While this isn’t clever from a performance point of view, it does make implementation of Windows 8’s Suspend/Terminate a lot easier as I don’t have to keep a lot of infrastructure code around to try and figure out which files are open and which are closed – I can jump back into a particular page based on a tiny number of parameters and load the right data from the disk.

Expenses are categorised (hard-coded) against one of six categories;

• Food/Drink
• Taxi
• Hotel
• Train
• Plane
• Other

and so if my categories don’t line up with the user then they’ll be using a lot of “other”. The current envelope attempts to track the totals by category, the grand total, the number of items in the envelope and the total age of the envelope (e.g. where I work you have to be careful to not hang on to expenses too long so I find this useful).

There’s not a lot that you can do with this blank envelope other than tap on it to drill into it;

and then from there you can add your first expense using a “form”;

This allows for you to choose the amount of the expense;

Now, I spent a little time on this “input of currency” as there’s nothing out of the box that does it for you so I built a little user control to do it. I haven’t made that as 100% re-usable as I’d like but if I get around to that I’ll put it on my blog here for someone else to use as there’s little point in reinventing the wheel.

You can then choose the date of the expense. I limit this to 120 days in the past and don’t allow future dates and for that input I used one of Telerik’s RadControls for Windows 8 which meant that I had it done in, say, 30 minutes rather than the 6 hours or so it took me to write the input control for the currency.

You can then input a description and a location (or attempt to look it up via GPS) – my location never quite comes back correctly here and you can set a category;

A word about that “location lookup service”. To achieve this, I use the WinRT APIs to attempt to get geo-location (i.e. Geolocator) but that will only give you lat/lon and so I also use the Bing API to reverse geocode that back into an address. I’ll perhaps share that class on the blog here too because there’s nothing much to it and it’s a useful thing to have. The API is detailed here.

You can then choose to take a picture of the receipt with the camera;

or grab one from the file picker. I went this route because you may well prefer to take your receipt photos on your phone and then stick them onto SkyDrive and this makes it easy to reach out to SkyDrive and grab a picture that way;

Either way, you get an image ( if you want one – all this data is optional ) and I very deliberately do not have a ‘save’ button;

but you can then navigate out of that “form” to the previous screen;

where more items can be added or existing items can be removed;

and back to the main screen where envelopes can be removed;

Once an envelope has at least 1 expense in it, it can be ‘submitted’. This is really just a note to remind you that you’ve sent it off for payment.

and I display submitted envelopes differently and submitting the current envelope makes a new current envelope;

and they are displayed “read-only” in the detail/item views;

Similarly, when you get paid for a set of submitted expenses you can mark that by marking a submitted envelope ‘paid’;

and the UI changes again;

One more note on this UI – it’s a GridView and it’s using a technique I wrote about in a previous blog post in case you were wondering around this proportional, variable size layout.

I’ll return to that idea when I talk about screen sizes because I’m not sure it was a ‘brilliant’ idea

Exporting – Loose Integration with Other Desktop/Store Apps

Ultimately, my expenses need to end up in Excel so I wanted to make sure that was easy to do. When I have populated expense envelopes like these 2;

then I can make a selection and hit “Export”;

and what that effectively does is to write a CSV file for each envelope and then launch whatever application is associated with that file ( via Launcher.LaunchFileAsync ) which launches Excel twice for me here;

and that makes it very easy for me to get this across into my expense system ( and hopefully other companies work in a similar way ).

I also offer this “export” option for a single envelope from inside the envelope view;

Sharing

It seemed natural to me to allow for sharing and, in fact, one of the things that I share (in text form) is the CSV for an envelope (or for the individual expenses) if someone decides to share an envelope. I also share a basic HTML format of the same data.

For example, if I have these 2 envelopes selected;

then sharing from here into Mail (e.g.) results in;

and, while not visible on screen the “Current Envelope” expenses are just below the fold in that HTML in the mail view. I can also share if I’m looking at a specific envelope;

In terms of sharing HTML, I used a technique that I wrote about in a previous blog post – the basics are very easy but I had to learn a little in order to try and share images properly.

Printing

I keep a printout of my expense submissions. I think you’re meant to in case the tax people come looking for you in the future but it’s a habit I’ve fallen into whether it’s necessary or not.

Because of that, I wanted to make sure that my application could print even though, strictly, it’s pretty easy to export the items into (e.g.) Excel and then print from there.

I spent a little time on printing and I wrote up a little of that in this blog post. In terms of my app, when you have a number of envelopes selected (or expenses if you’re using that view) you can move across to the devices charm and get your printers list because the app has registered with the print contract at that point;

You can then print preview what’s about to be printed;

and I added a custom print option to print 1/4/9/16 expenses per page – here’s 4 and you’d notice that there’s still 2 pages here because I chose to always keep 1 page per envelope even if I’m printing multiple expenses per page within that envelope;

Tiles and Background Tasks

I have both a wide and a square tile for this app. I kept the tile itself very simple.

but I did want the tile to be alive and I figured that I’d display 3 basic pieces of information here ( using tile notification queuing to cycle through them  );

1. Details on your current envelope
2. Summary of all your submitted envelopes
3. Summary of all your paid envelopes

One thing that I’m a bit disappointed about in my kwiQR implementation is that you have to run the app in order to kick the live tile into life. So, if you reboot the system (e.g.) then the kwiQR tile will lay dormant until you run the app again and it’ll update its tile.

I wanted to avoid that in this app but, equally, I didn’t want to be constantly reworking the live tile every time you made changes in the data in the app.

As always, there’s a trade-off to be made and the trade-off that I currently make is;

1. Whenever you run the app I clear the live tile of its information on the assumption that you’ve run the app to make some changes.
2. I run a background task ( on a maintenance trigger ) every 15 minutes or so which ( when you are on AC power ) will quickly build the summary information and display it on the tile. Maintenance triggers are written up here.

That leaves me with slightly-out-of-date UI but it gets there in the end and I doubt most people update their expenses every 5 seconds and that what they really need is a timely reminder to make a claim or chase one up;

Snapped View

One of the mistakes I’ve made in building these applications is that I leave snapped view until late in the process and then I find I’m paying for it by breaking my code and my UI. My advice would be to have it in your XAML and working from the start. I struggled a little with snapped view for this app but I wanted to include it to make sure that the “export” functionality was available because I like the idea of having Expense MX snapped and (e.g.) Excel displaying the exported data as below;

or below;

Screen Sizes

I created a little bit of a monster for myself with the “UI” that I created here. This main screen;

looks ok (to me) on my 1366×768 slate device and it’ll look the same on other similar device sizes regardless of their resolution (due to the way in which Windows scales UI for higher pixel densities).

However, when I run it on the simulator at 2560 by 1440 on a 27” monitor I do start to question whether I should have done something different as it’s going to be “enormous”

I decided to stick with it and I do a similar thing with my view of expenses inside an envelope;

but where I struggled quite a lot was with the idea of scaling up my “form” and I don’t feel I’ve done a very good job of that to date;

this “scalable” UI stuff is hard to get right and I find there’s a lot of tweaking for grid row/column sizes and margins and stretch modes and so on.

I struggled with portrait for what I’d built to the extent that I decided I’d turn portrait “off”. I implemented it for kwiQR but, here, it felt that the natural orientation for this app is landscape so I stuck with that.

Missing Features

There’s a bunch of things that I could do with this app. Off the top of my head;

1. Semantic zoom would be useful on 2 of my pages.
2. Storing to cloud storage (SkyDrive or Azure) would be a useful thing to have.
3. Allowing the user to select the location of the expense on a map would be nice.
4. Supporting portrait would be good.
5. Allowing for configurable categories (both for envelopes and expenses) would make the app more useful.
6. There’s a bunch of international testing that I haven’t done here. I’d really like for the Store to have the notion of a ‘beta’ so that I could push the app out there and get feedback from international users as I’ve tried to do the right thing but, realistically, it’s quite a lot of testing to do in your spare time late in the evenings. I feel a little guilty on this one.
7. Do a nicer job on the scalable UI front for screens with more pixels.
8. Add handwriting annotation for those expense receipts – might be a useful thing to have as I sometime end up scribbling on my real paper receipts to point out what I did or didn’t buy on a particular receipt.

Follow Up

I had a lot of ‘fun’ putting this app together. I use quotes because, of course, as anyone who writes software knows there were some painful parts of sitting up in the small hours of the morning asking the eternal “Why? Why doesn’t that work?” questions but that taught me a few tricks along the way.

I’ll try and follow up with blog posts about using the Bing location service (although it’s pretty easy) and that half-control that I wrote for input of currency as/when time permits.

Have a try of the app – see what you think and feel free to provide feedback and I’ll improve it from there.

Here it is in the Store.