"The way Visual WebGui handles the Ajax plumbing behind the scenes produces great performance results… The familiarity of the controls combined with the performance of lightweight Ajax calls make Visual WebGui truly great!" --Stephen Anders

Overview
Culpepper and Associates, Inc. is a leading provider of compensation data and human capital benchmarks. Over 1,500 organizations use Culpepper survey market data to benchmark their global total rewards programs. The company provides job descriptions for a wide range of positions and reports compensation/benefits data for those positions. Culpepper Job Descriptions is an online subscription service with comprehensive descriptions and level cutter guides for a wide range of jobs in IT, technology, and life science organizations.

Culpepper and Associates was in need of an easy way to update the job descriptions and job-level hierarchy for all of our jobs. Visual WebGui made building this application very easy, and the project has gotten high praises for the speed of development, speed of application execution, and ease of use by the management and end users.

Business needs
Culpepper needed an internal maintenance application to update job titles, descriptions, etc. that would also allow to maintain the hierarchy of those jobs. Prior to developing this application, users had an MS Access file which had a link to the SQL Server db.  This of course, allowed direct table access to the db, and was very difficult for users to navigate where they needed to update job info.

In addition to users having direct access to the tables, they also each had their own copy of this Access file. This lead to a complete disorder and incompatibility since each copy was a little different than the other. As a result, the company decided to create a central location for users to go to maintain job details.

The new application must be responsive while the user interface (UI) should be intuitive and easy to use because it was important that users who were used to the former solution would not have to go through training and the adoption process would be as quick as possible. Users of the new job maintenance application need the ability to add/update/remove items from the jobs db in a manner that is transparent and intuitive.

The logical presentation of the data is much different than the physical storage in the db, and the UI must present the data in a manner that makes sense based on the logical presentation that users can understand and are familiar with. There was also a need to limit users' access to only the tables of the db that are needed, and only in the methods prescribed in the application.

The Solution
By choosing Visual WebGui the development of this application was made much easier. "With many third-party controls/frameworks there is a steep learning curve in figuring out how to program them. It is obvious to me that great care was taken to try to make Visual WebGui controls look, behave, and program very similar to their Windows Forms counterparts. This makes a big difference when starting with a new toolset. The familiarity of the controls combined with the performance of lightweight Ajax calls make Visual WebGui truly great!" said Stephen Anders.

Culpepper's jobs database is logically grouped by survey (Tech/Sales/Execs...), then by job function, sub-function, job family, and then the job.  To represent this hierarchy and give users the logical grouping they know, the team implemented a tree view. Each click on the tree view loads up those items details in the main window. The main menu allows users to navigate between different surveys, add new items, or search for items based on different criteria.  Since there were many places that each item's details could be viewed, a user controls were created for each item, and then added placeholders to the forms and dynamically loaded the correct user control when the user made their selection.  This design makes it easy to maintain, easy to scale, and for the users easy to operate. "Visual WebGui made the development for this application much easier than it would have otherwise been," stated Stephen Anders.

Benefits
As a result of the visual Form designer incorporated in Visual WebGui the team greatly reduced the time it took to design the front end. Visual WebGui allowed to creating the “pages” for this web application with simple drag/drop/resize patterns onto a form. In addition, Visual WebGui presents a familiar coding of familiar controls which further contributes to quicker development process since "Not only do the VWG controls look and behave like Windows Forms controls, but they are programmed very similar as well.  Most of the controls have the same properties/methods as their Windows Forms counterparts, and that means I didn’t have to spend time scrolling the intellisense prompt looking for the right one" said Stephen Anders and added that "Designing Windows Forms applications is for me always quicker and easier than designing web applications,"

Another great benefit of using Visual WebGui as the platform for this application is the great performance through light-weight Ajax calls it produces. In some cases, thousands of nodes can be found in the tree control and each click of the tree control loads that node’s information in the main screen, while some of those items being loaded can have tab controls with 6-8 tabs of information for each.  However, says Stephen Anders "with Visual WebGui there is never a noticeable delay when displaying any of our data, or on saving any of it back to the server.  The way Visual WebGui handles the Ajax plumbing behind the scenes produces great performance results."

Visual WebGui presents a central code location that runs on the server instead of on the client. This allows to build any application as if it were a desktop application, and it gets served up as a web application without the need to install any plug-ins on the clients.  On top of the accessibility advantages there are maintenance benefits since it is only needed to update the code on the server instead of each station. This also eliminates the chance of running different versions of the application on different stations.

The initial release took about 2 weeks to develop rather than the 4-6 weeks that was scheduled as stated by Anders. "I have done some Ajax coding for other applications I have worked on, and no matter how automated the Ajax tools claim to be, you always end up getting involved in manual Javascript coding.  I am a VB.NET programmer by choice (I can program in C# and JavaScript, but prefer VB for its readability), and always have a little harder time getting through the JavaScript required for Ajax.  The idea that your framework handles ALL of the Ajax plumbing behind the scenes where I don’t even have to see it is amazing. This alone saved me at least 1-2 weeks of JavaScript coding."

Screen shots
Main window is split into 2 panels: tree control with the Job hierarchy on the left and the details placeholder on the right.  Above I have clicked on a Job Family in the tree and the family user control is displayed in the details panel.  I used a tab control to logically group many of the details about each family.

This shows the Job level information in the details panel.  Each level in the hierarchy has a different view b/c there is different information relating to each item.  Each of the user controls I created has event handlers to monitor when any information is updated so that if the user clicks another item in the tree, or clicks the cancel button, they get prompted to save their changes.

Clicking the Find item on the top menu displays the Find Job dialog where you can search for any job/family/function…  once your results are displayed, you select one and click View Detail to popup the details for that item.  As you can see using user controls this way provides the exact same set of information that you get from the main window.