I am a medical doctor who is interested in IT related to medicine. I studied at Mahinda College, Galle, Sri Lanka and Royal College, Colombo 7, Sri Lanka. I got my MBBS in 2002 from Faculty of Medicine, Karapitiya, Galle and worked as a Medical Officer for 6 years. Now I am reading for MSc(Biomedical Informatics) at Postgraduate Institute of Medicine, Colombo 7. I have developed several medical applications like electronic medical records, laboratory management software and pharmacy management software. Now my main interest is Bioinformatics and its applications like personalized medicine, finding drug targets, gene therapy and preventive medicine. Buddhika has posted 2 posts at DZone. View Full User Profile

A simple, yet powerful design model to manage records

  • submit to reddit
All most all of the software and web applications need to add new records, view already entered records and change them or delete them as needed. The existing user interfaces and associated program flow used in record management are not user friendly. Record management involves migrating to several different page views or windows with a different set of controls. A new model is developed to achieve all the functions related to record management in the same view and same set of controls. The model ensures higher level of user friendliness with more efficient resource management. The model can be expanded easily to accommodate specific requirements in different situation.

I have been using different software systems from 1994 and I have been developing them from 2002. One major point of difficulty in both situations was the user interface and the program flow during the management of records.

There are several entities stored in the databases for even very simple software solutions. The users may view records through the user interface, and may edit them or delete them. The users also create new records. This functionality was achieved by different development models and different program flows. I always felt that all the models I have used could have been improved to achieve the same functionality in a simpler and more user friendly manner. I developed a simple, yet powerful model to manage records which had a good user feedback.

Existing Modals for Record Management
When most users manage records, they have to perform actions like adding a new record, viewing an existing record, altering and saving a record or deleting a record. For example, a user has to check the presence of an unwanted item in the inventory and delete it after viewing the details. If searching for an item revealed that it is not there among records, the user may pick a record which is no longer used, to be modified to match the new requirement in some cases or to add a new one straight away.

Most web application provide links like New, Search, Edit, Previous, Next, and so on to achieve the above functionality. To achieve a similar set of functions, which are clustered most of the time, the users are directed to different views or windows. The links usually appear in one view is different from another; hence the users have to adapt to different situations depending on the action he is undertaking. Even very high end and other vice used friendly applications have this imperfection, which users are used to adapt in long run without any complaint. Examples of above situation are given using my favorite open source web application OpenMRS and very useful Net Beans auto generated JSF pages from Entity Classes.

Figure 1: View during viewing records (Example for the old model)

Figure 2: View during Editing Records (Example for the old model)

Figure 3: View during creating a new record (Example for the old model)

Figure 4: View during creating a new item (Example for the old model)

Figure 5: Soon after saving the newly created item (Example for the old model)

Figure 6: Listing all Items (Example for the old model)

Figure 7: View after Preparing to Edit a record (Example for the old model)

Figure 8: View soon after saving changes to an existing record (Example for the old model)

The modal I developed have following characters.
• Same User Interface for all record management functions.
• Ability to directly navigate to all possible sequence of actions that involves record management.
• Minimizing accidental mismanagement of records
• Simple, user friendly arrangement of the user interface
• Ability to extend the functionality depending on specific requirements.

I have attached two demonstrations of the modal, one using Visual Basic 6, which I used for 8 years now and the other using Java Server Faces, which I finished few days back. There is a list of the records on the left side of the page. On top of that list, there is a text box to search the records. Immediately below the list, there are three buttons, named here as Add, Edit and Delete. On the right side of the page, the details of the selected record are displayed. Immediately below the details, there are two buttons, namely Save and Cancel. In windows MDI forms, I include a Close button on the right lower most corner as well. There is two states in my modal, select mode and modify mode. During the select mode the search text box, list box and buttons on the left side are active. The details and buttons on the right are visible, but not active in this select mode. In the modify mode, the details and buttons on the right are active while the others are inactive.
When the window opened or web page requested, the select mode is active. In this state, a text can be entered in the search text box. The list can be clicked and immediately the details of the selected record will be displayed on the right side. If Add button is clicked, all the details are cleared on the right side and page is shifted to modify mode. In this modify mode, no search text can be entered to search box and the list is inactive. After adding the details for a new record, the user has two choices, either to Save the changes or to discard them clicking Save button or the Cancel button respectively. This will bring back the Select mode. In select mode, after selecting a record, Edit button can be clicked and the controls already displaying the details of the record will become editable. After making changes, Save button or Cancel button can be selected as needed.
The Delete button is active only during the Select mode. After selecting the record, which will also display the details of the record immediately, user can click the Delete button to delete it.
Every functionality involved in record management can be achieved in the very same window or the page. The buttons in all situations remain the same place, and the user is not needed to adjust to different views of different states.
This basic functionality can be adjusted to meet different requirements without major modifications. The search box here searches one field of the records, and several search boxes in a tabbed pane can be added to search multiple fields. The list box may contain only one field, like for example, name of grocery items, but can use a table with the name and the price, instead of a list box. At the onset, the listbox can be populated with all the items or it can be populated depending on the search text. If all the items are listed, as the user continue to enter letters to the search box, the most suitable selection can bring to the top of the list or can just remove all the non matching ones from the list. As the search text is expanded, the best possible list may be selected from the list below and its details are displayed on the right side. When that is not suitable in some situations, the selection of a record in the list can be delayed until the exact match is achieved, so the details are not displayed until then. The user can stop entering the remaining search text and directly click on the list below to select and display the record.
The Add, Edit and Delete buttons can be remained active throughout the select mode or it they can be selectively make active or inactive depending on the requirement. Add button can be made inactive if a record is already selected in the list. Edit and Delete buttons can be inactive till an exact selection is made in the list.
If there is need to Edit multiple records simultaneously, select many type of a list box can be used. When multiple selections are made, only the common values of all the selected records will be displayed. Depending on the requirements, the values of all the records can be updated with a single click on Save button.
If users request even lesser clicking of buttons, Edit buttons, Save button and Cancel button can be omitted. In that case, when ever selection is made, the controls displayed on the right will be editable and whatever the changes made will be save when selecting another one or closing the page or the window.

Figure 9: VB6 Demo - Select Mode, before selecting any item (Example for the new model)

Figure 10: VB6 Demo - Select Mode, after selecting item(Example for the new model)

Figure 11: VB6 Demo - Modify mode, after selecting one and clicking Edit Button(Example for the new model)

Figure 12: VB6 Demo - Modify mode, after clicking Add Button(Example for the new model)

Figure 13: JSF Demo - Select mode, before entering any search text(Example for the new model)

Figure 14: JSF Demo - Select mode, after entering some search text(Example for the new model)

Figure 15: JSF Demo - Modify mode after clicking on Edit button(Example for the new model)

Figure 16: JSF Demo - Modify mode after clicking Add button(Example for the new model)

First demo, which was developed using VB6, can be downloaded from the link as an installation shield setup in a zip folder. If any one want the VB6 source code, please contact me and I can give the VB6 source code.
The JSF demo, is available in my local computer with a 512mbits/sec ADSL connection with a dynamic IP, is configured to be accessed through dynamic to static IP site, pagekite.me. In that demo, I have used Ajax and whole process is asynchronous. I have also used JPA as well. If any one interested, I can write an article on Java Server Faces for Ajax and Java Persistence API.
Implementation of the modal is very simple, and if anyone is interested, I can help or give the source code for the demos.
Email : buddhika.ari@gmail.com, buddhika_ari@yahoo.com
VB6 Demo Setup
JSF Demo on my personal computer
Published at DZone with permission of its author, Buddhika Ariyaratne.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


Peter Ufak replied on Sat, 2011/12/10 - 3:13pm

  <p>Do you describe a standard way how to manage records used last 40 years.</p><p> 
Dzone is a specialized server and you use it for poor (by quality meaning) advertising to show inexperienced chiefs you are an expert. </p>  <p>Sorry but I hate this way to make visible itself </p>  

Dragan Sahpaski replied on Sat, 2011/12/10 - 6:24pm

Come on dzone. Don't you have some entrance rules for guys like this. This is just awful.

Buddhika Ariyaratne replied on Sun, 2011/12/11 - 12:51am in response to: Peter Ufak

Thanks for the comments. The modal I described here is different from those were existing for 40 years in following ways in following ways mainly.
Old Models New Model
When achieving a Different function, may be more than single page or window has to be followed. For example, to search a record, one page, then click on to view it in another page, and finally a delete button in the view page. All functions are achieved in a single page or a window. No navigation out of that page foe one entity.
Different arrangement of controls in different stages of record keeping. For example, Searching a record page is different from saving a selected record page. Same arrangement of controls for every different stage of record management.

I have given some links of high end online demo versions, and all of them have to existing modal. Can you please give me a link where my model is been used? I have done market search for a better method for 6 years, and yet I could not find anything similar.
I would love to host the jsf application in other server than my local computer, but Java hosting is very expensive and I can not afford. I can not show the JSF application like a web page. That is why I had to put in my local computer, and now I have to turn it on 24 hours a day.
(I have never said I am an expert in any field. I have just described what I think is a new model. It is not necessary to be an expert to give my opinion and the readers are free to make there own decisions.) Thanks again for comments. Hoping a replay.

Buddhika Ariyaratne replied on Sun, 2011/12/11 - 1:06pm in response to: Dragan Sahpaski

Thanks for the comments. Hope you will get the message of a new model I developed which is different from the existing models.

Peter Ufak replied on Mon, 2011/12/12 - 2:08pm

I did not want to offend anyone. I wrote my opinion. I admire everyone who spends his time to write an article.  I spend my time to collect my thought:

But you collected modes used for long times. List and detail view on one screen is possible now when we have big graphical screens. It is used in IDEs too, sources, directories tree in the files/project view and the detail right - source code or a form working over the source. Entities and details.

In any application you have list with search conditions and detail. Both under search, list, view, insert, edit, delete mode (enabling fields and buttons).

Sorry - I didn't find any new concept.

P.S.: Your demo Helpdesk application is great, intuitive, beautiful and friendly. You keep the user in the mind.

P.S.2: Is it possible some paragraph described you was disappeared?

Buddhika Ariyaratne replied on Tue, 2011/12/13 - 8:39am in response to: Peter Ufak

Thank you very much taking your valuable time to reply. I did not remove any paragraph, only few links to my website and the blog as you thought they were some sort of advertising. I searched the web for similar model, but could not find any. I hope you can give any example for any thing similar that existed. There are several, like the above links, which still use several screens to manage records with different arrangement of several buttons, and they will benefit from this concept. Thanks again.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.