A while back we assisted the Canadian Abilities Foundation on one of the conferences they participated in, where they wanted to conduct surveys with the conference goers using a tablet (iPad, Android pad, or Windows tablets). Not being able to find an out-of-box solution that supports all the question types and branding requirements, we decided to implement a custom Windows 8 app.
The requirements for the app we built were quite simple, it needed:
- A form to hold the questions of the survey
- The ability to save form data locally on the device
- A screen that displays all the survey results
- The capability to export the results to Excel
Diving right into the technical details we first create a Navigation App in Visual Studio 2012. The Navigation App is used as opposed to a Blank App because it supplies the navigator.js by default and handles going from one screen to the next.
There are certain conventions that Microsoft enforces you to follow when developing a Windows 8 app (duh!). If you are new to Windows 8 development, it might be a good idea to go through a few tutorials, though not necessary for what’s demonstrated here.
So here we’ve added a few files to the project and setup the structure.
This file defines the custom survey form in HTML. One thing worth noting is that the App Bar is defined here specifically for this page in that it will be different from the other screen. Here the App Bar contains 3 buttons – Save, Clear, and View All.
This file uses a WinJS.UI.ListView to show all the survey records being saved. The ListView essentially allows you to define an HTML template for each data record and lists all the data records.
IndexedDB allows you to store data inside a user’s browser. It is also natively supported by Windows 8 apps, so that’s what we will use here to store the survey data. This eliminates any the Internet connection dependency. The database is initialized when form.html is first loaded – survey.initialize(). The initialization defines all the columns, each representing one field in the survey form.
We are not going into all the details of IndexedDB implementation here. The Mozilla Developer Network site provides a pretty good reference on properly using IndexedDB: https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
Lastly, using the Windows JS library functions we can save a tab-delimited CSV file to the Documents folder of the system.
This survey app, although simple, served it’s purpose perfectly. Being able to run a native app on tablet for surveys greatly enhanced the user experience and allowed for greater collection from the people at Abilities. In terms of time spent putting the app together, total time start to finish was around one full day. Windows 8’s native support of HTML5 really makes it easy for web developers to start building native apps on the Windows platform. This blog post only provides a quick overview of what was built into the app; the source code of the app can be downloaded here for the interested.
All questions and comments are welcome and feel free to comment or email me directly if you’d like more info at: Bryan.firstname.lastname@example.org. Whether you like it or think it’s stupid, drop me a tweet: @_bryanxu.
By Bryan Xu