Reduce Data-entry Form Development Time by 60%

Creating data-entry forms can be very time consuming and tedious, and maintaining them can be a nightmare. However, with ComponentOne InputPanelT for WinForms creating and maintaining data-entry forms is no problem at all. The control removes all redundant tasks such as control alignment, spacing, data-binding, labeling, accelerator key generation, and tab ordering. This article demonstrates a two-part comparison of creating and maintaining the exact same data-entry form using standard toolbox controls versus using ComponentOne InputPanel. To best illustrate the development experiences, the actual demonstrating will be shown in a series of four videos.

Part 1: Creating the Data-Entry Form

Creating data-entry forms is perhaps one of the easiest tasks a .NET developer ever takes on in his career. The task primarily involves dragging and positioning many label and text box controls on the form. The interactive design surface in Microsoft Visual Studio makes this task easy enough for anyone who can click and move a mouse. It does not typically involve any coding. Even a data bound form, depending on how you set up your data source, can be completely created without writing much code. But when creating a data bound entry form that has many fields, the task becomes a bit more complex. It doesn't get any faster or easier the more forms you have to create. Additional tasks you will most likely complete for each form include:

• Bind each individual input control to its data source
• Add a separate Label control for each input control or field
• Strategically assign accelerator keys to each field's label so that none repeat
• Configure the TabIndex property for each control so that they go in order (unless fields are initially added to the form in the final, desired order)
• Position and align all label and input controls perfectly so that the form looks organized and professional

Each task above is performed for each field on your form. So a form with 20 fields will take 10 times longer to create than one with 2 fields. Visual Studio can help you accomplish these tasks to a certain degree. You can setup data binding through the Properties grid and it can be as easy as setting a single property, no code; however, you still have to do this for every single field on your form. As you add controls onto your form, the TabIndex property for each auto-increments itself for you. So the TabIndex property will be 0 for the first control added, 9 for the tenth control added, and so on. But in most cases the order in which you add the controls will not be the final desired order. You will eventually be reconfiguring your tab indexes. (Note: more on this in part two.) Visual Studio also provides an assortment of alignment and spacing buttons on the Layout toolbar. When using the C1InputPanel control these tasks are all handled automatically for you. You simply set one data source property at the top level of the control and all labels and appropriate input controls are created and aligned for you. C1InputPanel also has built-in tab ordering and an intelligent keyboard accelerator editor that generates unique keys for each field (accelerator keys are what allow users to jump to a specific field by pressing ALT key). Watch the two videos below to see how we can create the same data-entry form with and without C1InputPanel.

Video 1: Creating a data-entry form with C1InputPanel

Watch this video to learn how to create a navigational data-entry form using the C1InputPanel control. This demo is a bit more advanced than any of the samples that ship with the control because it uses a master-detail relationship and works with the C1TrueDBGrid control. The development time spent in this video is roughly 3:30 minutes.

Video 2: Creating a data-entry form without C1InputPanel

In this video, see how to create the exact same data-entry form as the previous video using only the standard toolbox controls that come with Visual Studio. This can be a great educational video for anyone who has never created navigational, data bound windows forms. The video skips setting up the data source, as this would be identical with or without C1InputPanel. The development time spent in this video is roughly 8 minutes when we eliminate the chit-chat.

Note that the time saved using the C1InputPanel control in this example is relatively small, about 4:30 minutes, but this is more than half of the total time spent without C1InputPanel. Imagine the time savings across many forms with reducing the development time more than 50%. We also cut several corners in the 2nd video, such as not naming labels and input controls, and the controls were never aligned perfectly. The accelerator keys were just copied from the first video so we let C1InputPanel do all the work for this task. The time spent on these shortcuts should also be considered.

Part 2: Maintaining the Data-Entry Form

The developer doesn't necessarily get the final say in the order and layout of a form. End-users may later request that some fields be moved higher in the order due to frequency of updates, or lower in the order, or they may even later request that certain fields be moved together. All of these requests would require maintenance to the forms you've already created. A typical data-entry form could go through many layout tweaks before the end users are finally satisfied. When using standard toolbox controls the maintenance procedure is very manual. If you need to rearrange the fields then to do this you will literally be picking them up and moving them piece by piece. Once you rearrange controls you then have to reconfigure tab ordering, layout spacing, sizing and sometimes you may want to reconfigure accelerator keys. When using C1InputPanel, maintenance is almost non-existent. When you first create the data-entry form with C1InputPanel you will inevitably make a few tweaks here and there, such as breaking the fields into multiple columns, or moving a field or two. These tweaks are easily handled in the Item Collection editor (see Video #1). Further maintenance to your data-entry form is no more difficult as you just open up the Item Collection editor to move fields and set column breaks to match the new desired layout. The difference between this approach and the manual approach is that here you are just setting a few properties and clicking a few buttons, which is a lot quicker than dragging controls around while trying to keep them perfectly aligned. C1InputPanel will also automatically update the tab order when you rearrange controls, so you never have to worry about updating the TabIndex property for every input control on the form. Watch the two videos below to see the benefits of using C1InputPanel to make modifications to the data-entry forms created in the previous videos. We will assume that these changes below have been requested and we'll apply the same changes to both forms.

Video 3: Making changes to a data-entry form created with C1InputPanel

In this video we make the suggested changes shown on the sticky note to the app we just created in Video 1 using C1InputPanel. The development time spent in this video is approximately 45 seconds.

Video 4: Making changes to a data-entry form created without C1InputPanel

In this video we make the same changes from the sticky note to the app created in Video 2, using only standard toolbox controls. The development time spent in this video is approximately 4:15 minutes.

Conclusion

When we combine the time saved between the two sets of videos we see about 60% less development time when using C1InputPanel to create and maintain the same data-entry form. Of course, the alleviated work using C1InputPanel is tedious and time consuming; nothing overly difficult in the spectrum of developer tasks. Also keep in mind in this example we had to hold C1InputPanel back in terms of features and functionality so that it somewhat matched the competing sample. There are more features that you get with C1InputPanel that you wouldn't otherwise have out-of-the-box. Consider these the icing on the cake:

• 3 Microsoft Office Visual Styles that apply to the control itself and all embedded input controls
• Validation and Error handling: flag invalid input with a red box around the editor and optionally display error tooltips
• 19 native controls including split buttons and rich labels
• Rich tooltips for all embedded controls
• Check out the InputPanel product page for more features