I occasionally have people ask me about user interface design from an end user’s point of view and mostly this is when a developer is tasked with capturing a very large amount of data, needing lots of controls, in one logical place.
Often, it is possible to break up the required data into bite sized chunks, or to categorise it somehow and then present their data controls as a smaller subset on two or more forms. Sometimes, probably more often than not, it makes sense to break up the form using the tab control and display these subsets of data controls over multiple pages. This is something that I have done a lot in my demo applications.
However, I am told that this is not always possible and I have seen data entry forms with hundreds of controls, split over countless tabs. I recently heard of one OpenInsight based system where a control limit had been reached, forcing a rethink of how the data was to be presented to the end users.
Now, I am currently working on a ‘real world’ application that also demands that, on several of the data entry forms, I need to be able to display and capture hundreds of data fields. For the form that I am currently working on, this means nearly 400 hundred data items and this translates to well over double that number of controls to be maintained on the form. AND, I can find no logical way to split these controls over multiple forms 😦
A form with this number of controls means that I had a massive tab control and a form running over 20 or more pages. From a developer’s point of view, this results in a very cumbersome form to manage and maintain at design time. For example, how would I easily add in new data prompts without having to spend a large amount of time moving controls around to make the new items fit my already crowded forms? Worse still, it resulted in a very difficult to navigate form for my users. Yes, they could probably learn where everything is over time, but in the interests of providing my users with an intuitive display from day one and a far easier to navigate user interface, I had to find another method.
So, following a quick prompt from Carl, I took a look at the brand new Property Grid control in OpenInsight 10. This is not yet data aware (and I’m not sure of any plans to make it data aware), so there is a code to be written behind the scenes for my use of the control, but it was definitely the perfect solution.
So what did I build to get over this large number of controls issue?
As you will see in the data entry form above, I have managed to reduce the tab count to just 12 tabs. Although this is still quite a lot, they make sense because most of these will be displaying related data from other data tables. For example, a list of actions to be undertaken or that have been completed with dates, status and notes, or viewing details. These will be largely edit tables, one on each tab.
The main tab reduction was achieved through the use of the Property Grid, displayed on the right of the form. When the user is on the Summary tab (shortly to be renamed), the property grid maintains a few hundred property details that were originally split over numerous tabs. This data is now displayed in a easily navigable, collapsible, categorised list, enabling the user to show and hide data as required.
When designing the Property Grid, the OpenInsight developer is presented with 29 pre-defined control options that are embedded in the new control. Things like Dialog, Static and colour pickers, right through to combo boxes, file pickers and more. The user’s choice is then displayed in the grid and it is pretty easy to them pick up those values and save them to the database. It is also super quick and easy to add in new data items and to have them display under the correct category.
The Property Grid control is fully documented in the ‘OpenInsight 10 Presentation Server Reference Manual’, but writing data to a cell in the grid is just one line of code. In the example below, valPropertyStatus contains the data to be written and “Property Status” is simply the name that you have defined in the Property Grid row when you built out the various rows. It really is that easy, no messing around trying to work out in code which cell or row you are in, you simply use an ‘English’ name.
Call Set_Property_Only ( CtrlEntID, "VALUE", valPropertyStatus, "Property Status" )
Now, as I might have mentioned earlier, the Property Grid is not yet data aware, so you will need to get these data changes and write them to the data record yourself.
However, I have taken a slightly different approach. I am not a professional OpenInsight application developer, so I in no way suggest that this method is right and proper but it works for me.
As shown in the image below, I wanted to have collector windows for ‘each’ of the data items in the grid. This enables me to provide my users with a consistent and easy to navigate solution. It enables me to present my users with all manner of data controls in easily built and maintained collector (dialog) windows. In the example below, when the user clicks on the Vendor cell (a button displays), the user is presented with a collector window with, not only the vendor’s name, but also their contact information. This includes the email address and if the user clicks the blue text, OpenInsight will open up the user’s default email client and drop in the vendor’s email address.
You will notice that the orange Record ID box displays the Record ID. This will be made invisible for the beta, but it is displayed for development purposes at the moment. This Record ID is passed to the collector window from the calling window and the record is automatically read and displayed for editing. When the user has made their changes, the data is immediately written to the record.
When the data is saved and the collector window is closed, the Property Grid is updated to display the new value, or values. In the case of a collector window with multiple data items, I have chosen the best piece of data to display. In the example above, this is the Vendor’s name. In some other instances, I have used three dots (. . .) to indicate that there is data to be viewed. This solution is used when no single data value works.
A nice, easy and good looking solution.
Now, those of you that are professional developers and observant, will have noticed a flaw in my design. If I am passing in a record ID, what is to stop the user from saving a value from the Property Grid without a valid Property Record? This could quickly result in useless data – property characteristic details without a property address and other meaningful data to readily identify the property,
This issue is addressed by simply checking for a valid record on file when the Property Grid is accessed. If there is no record yet saved to file or it does not meet my requirements of having a valid address, access to the Property Grid is blocked, a message is displayed and the message and collector window closes when the user clicks the message’s OK button. i.e. the user cannot add data to the grid without a valid record being already saved to disk.
Yes, the method that I am using is a little more complicated than just allowing the user to change the data in the Property Grid and have that data saved when the main save button is pressed. And, I’ll probably allow that as an option further down the line. However, I’m pretty pleased with this solution and it is definitely making it easier to develop and use my application.
Oh, and for those of you that think creating and maintaining many collector windows is long winded and time consuming, this is actually pretty quick and easy. I simply:
- Use a template window – So, Open and Save As.
- Use a template Commuter Module which prompts me for certain bits of information which are dropped into the code automatically and then this is compiled and saved.
- Test run the window and add any additional event code that might be needed.
I am not saying that this is the right, recommended or perfect solution but if you would like to see this in more detail please comment below and I’ll look to put a video together with a look at the Property Grid working and the code used behind the forms.