Over a million developers have joined DZone.

A simple, yet powerful design model to manage records

DZone's Guide to

A simple, yet powerful design model to manage records

· Java Zone
Free Resource

The single app analytics solutions to take your web and mobile apps to the next level.  Try today!  Brought to you in partnership with CA Technologies

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

CA App Experience Analytics, a whole new level of visibility. Learn more. Brought to you in partnership with CA Technologies.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}