{{announcement.body}}
{{announcement.title}}

A Simple, Yet Powerful Design Model to Manage Records

DZone 's Guide to

A Simple, Yet Powerful Design Model to Manage Records

This article proposes a simpler, lighter, and more user-friendly interface for users to perform CRUD functionalities.

· Java Zone ·
Free Resource

Abstract

A user interface to create, read, update or delete records (CRUD) is an essential component of any computer system. The existing user interfaces and activities in record management can be further optimized. Some existing CRUD interfaces involve migrating to a few different pages with a different set of controls and different functionalities. This proposed model is developed to achieve all the functions related to record management on the same page with the same set of controls. This model can achieve all the CRUD functionality in a single page with the same set of controls using minimal interactions. This model ensures a higher level of user-friendliness with more efficient resource management. The proposed model can be extended easily to accommodate specific requirements in different situations.

Introduction

Several entities need to have CRUD functionality even in a simple software solution. The users may view records through the user interface. They may update the viewed record or delete that. The users also need to create new records. This functionality is currently achieved by different systems using a combination of pages. Each page involved has different components with different actions on each page. These systems could have been improved to achieve the same functionality in a simpler and more user-friendly manner. This article discusses a simple, yet powerful model to manage records and have a more user-friendly UI and fewer interactions to achieve the same CRUD operations. This proposed model can achieve all CRUD functions in a single page with the same set of control with minimal interactions.

Existing Methods for CRUD Operations

When users manage records, they have to perform actions like adding a new record, viewing an existing record, altering and updating a selected record, or deleting one. In order to achieve that functionality, some systems are needed to navigate to a few different pages with a different set of controls on each page.

Some systems provide links like Add New, Search, Edit, Previous and Next, to achieve CRUD functionality. The users have to navigate to different page views at different stages of activities of CRUD functions. The controls that appear on one page may be different from another; therefore, the users have to adapt to different situations depending on the action he is undertaking. Even very popular applications have suboptimal CRUD interfaces. The first examples given here is CRUD functionality is OpenMRS, which is a popular Open Source Electronic Medical Record System. The other example is an automatically generated JSF page Cby NetBeans for CRUD operations for Entity Classes.

Open MRS has one page to view a Record, Figure 1. It has several links like "Previous," "Edit," "Next," "New" and "Search". The page to Edit a Record, Figure 2, is different from the page to view a Record. It has links like "Save" and "Delete" at the bottom of the page. There is another page to create a Record, Figure 3, which is different from previous pages. It has a link "Save," but some links in other pages like "Search" are missing. This example is clear evidence that there are several different pages involved in CRUD operations. Each different page has a different combination of controls. The placement of controls also differs among the pages.
Figure 1: OpenMRS interface for viewing a record.
Figure 1: OpenMRS interface for viewing a record
Figure 2: OpenMRS interface for Updating a record.
Figure 2: OpenMRS interface for Updating a record


Figure 3: OpenMRS interface for Creating a record
Figure 3: OpenMRS interface for Creating a record
When a JSF and JPA application is developed with Netbeans IDE, it provides easy creation of CRUD pages from Entities easily. The pages created in that way is taken as the second example to demonstrate suboptimal designing of CRUD applications. The page to create a new Entity (Figure 4) is different from the page to Update an existing entity (Figure 5) and the page to view an entity (Figure 6). A separate page is there to list items (Figure 7). These pages have different sets of links at different places. After Clicking the Save button when creating new items directs to a page which is essentially the same as Creating a new Record page. When clicking the save button on Updating leads to the list of items page. Likewise, the activities after each action lead to different destinations.
Figure 4: Netbeans CRUD page to create a new item
Figure 4: Netbeans CRUD page to create a new item

Figure 5: Netbeans CRUD page to edit an item

Figure 5: Netbeans CRUD page to edit an item


Figure 6: Netbeans CRUD page to view a record


  • One single User Interface for all record management functions
  • No navigation to achieve different stages of CRUD lifecycle
  • The same set of Controls in the very same places throughout
  • One single button always achieves one fixed task and lead to one fixed state.
  • One single User Interface for all record management functions.
  • Ability to directly access any CRUD activity
  • Minimizing accidental mismanagement of records
  • Ability to extend the functionality depending on specific requirements.

A new model is demonstrated using a Visual Basic 6 application developed in 2004 and a JSF application developed in 2010.

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 or above the details, there are two buttons, namely Save and Cancel. In Windows applications, a Close button can be placed on the right lowermost corner.

There are two states in the 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 controls on the left are inactive.

When the window is opened or the web page is 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 the Add button is clicked, all the details on the right side are cleared and Modify mode is activated. In the modify mode, no search text can be entered to the search box and the list is inactive. After adding the details for a new record, the user has two choices, either to Save by clicking the Save Button or to discard the changes by clicking Save the Cancel button. This any of them will bring back the Select mode.

In select mode, searching is achieved by typing words in the search box. The list of items will narrow down as the user types. Clicking an item filtered in the search selection list will put its details on the right side. Until the user clicks the Edit button, the details are read-only. The user can click the Edit button so that the controls already displaying the details of the record becomes editable. After making changes, Save button or Cancel button can be selected as needed. Clicking the Save or Cancel button will bring back the select mode.

The Delete button is active only during the Select mode. After selecting the record, which will also display the details of the record immediately, the user can click the Delete button to delete it. A confirmation can be requested depending on the requirement.

Every functionality involved in record management is achieved in the very same window or the page. The buttons in all situations remain in the same place, and the user is not needed to adjust to different views of different states.

The basic functionality of this model can be modified to meet different requirements. The search box here searches one field of the record, like the name of the item. The search box may search multiple attributes of items like category and department with several columns visible in the list box.

The list box may contain only one field, like for example, the 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 input to the search text. If all the items are listed, as the user continues 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 this scenario is not suitable, 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 remain active throughout the select mode or they can be selectively made active or inactive depending on the requirement. The Add button can be made inactive if a record is already selected in the list. The Edit and Delete buttons can be inactive till an exact selection is made in the list.

If there is a need to Edit multiple records simultaneously, the select many 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 the Save button.

If users request even fewer clicking of buttons, the Edit button, Save button and Cancel button can be omitted. In that case, whenever a selection is made, the controls displayed on the right will be editable and whatever the changes made will be saved 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 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 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
Figure 11: VB6 Demo - Modify mode, after selecting one and clicking Edit Button


Figure 12: VB6 Demo - Modify mode, after clicking Add Button
Figure 12: VB6 Demo - Modify mode, after clicking Add Button


Figure 13: JSF Demo - Select mode, before entering any search text
Figure 13: JSF Demo - Select mode, before entering any search text


Figure 14: JSF Demo - Select mode, after entering some search text
Figure 14: JSF Demo - Select mode, after entering some search text


Figure 15: JSF Demo - Modify mode after clicking on Edit button
Figure 15: JSF Demo - Modify mode after clicking on Edit button


Figure 16: JSF Demo - Modify mode after clicking Add button
Figure 16: JSF Demo - Modify mode after clicking Add button


Topics:
CRUD ,add records ,architects ,delete records ,edit records ,java ,manage records ,save records ,tutorial ,user interface

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}