Marvel Internet Group blog

Recently I started creating the mock-ups for the JustRosters application. Part of this application is a calendar table that needed fixed headers and columns, with scrollable content area to fit in a restricted space. This concept can be seen in programs like in Microsoft Excel or similar spreadsheet programs, how the row and column numbers remain along the top and side at all times. After a bit of research, we found out that this hasn’t been done in HTML / CSS before, only full JavaScript applications with big budgets (like Google Spreadsheet). Since this wasn’t our case, we were after an open source solution, but this wasn’t easy to find or achieve.

After what felt like a million Google searches, we finally came across a script that would have done exactly what we wanted it to do, only to find out that it was incomplete. It had some of the features we needed, fixed header, fixed columns and scrolling of the inner data cells while remaining lined up. It just wasn’t cross browser compatible, did not support fluid width columns or row heights. I installed the script and after fixing it up for a few days, I got it to work….. sort of.

What we needed was to have the data table take up maximum width and height of the browser content area, but doing this broke the script or the cells didn’t line up. After a lot of trial and error, tweaking the JavaScript and the css, I was finally able to create a fixed header and column table with dynamic resizing based on browser window size, row count and column count. The resulting table can be viewed here for now, and will be integrated into the finished JustRosters staff scheduling application. When I get a chance I will post code snippets.

At this stage of development, all the designs we had on paper were rough sketches and ideas in our heads. So it was now time for me to step in and create digital mock-ups that turned these ideas into a functional interface.

The first step was to create a simple template for JustRosters to make user interaction as easy as possible. I created the design using Photoshop, and then converted to a HTML template using my favourite scripting program, Notepad++. We kept the template very minimalist to maximise screen real estate for the major functionality, including the main roster interface.

We also decided to have all user ‘action’ forms displayed in a toolbar on the right side, which is shown at all times. The forms are added to the toolbar using the javascript library jQuery. We used the side action bar for a number reasons:

1. The user never has to navigate away from the page they are currently on to perform related actions.
2. The roster interface is never covered by a pop-up when a action needs to be made.

jQuery was used a lot throughout the interface for a number of different functions and effects, from adding the input forms to the toolbar, to styling the tables and forms. I use it because it is very easy to use and lightweight, and it achieved its functionality automagically without adding extra markup to the HTML.

The next step was to turn each of the sketches into functional pages, this is where we ran into our first major hurdle. The main page of the roster interface needs to display a calendar that shows the dates of the roster period along the top row, and the staff members of the roster listed down the left column. It sounds simple until you start testing with a 2 week roster featuring 50 staff…. in a small screen. We needed the grid to scroll but it was important to keep the top row (dates) and left row (staff) in view at all time. After about 4hours of Google searches we found no real solutions (but hundreds of people looking for one). After a lot of playing around with this, we got it working!!! When we get some time we will release the code snippeits.

From here on it was all smooth sailing. The rough sketches were transformed into an easy to use interface.

After 96hours working on the mock-ups (40hours spent on the roster view alone), they are finally complete. Now it is time for Paul to step in and code the guts of the application, turning it from a puppet to the real thing. I will have bigger rant about the roster view shortly