Using CS HelpToolTip Control for Input Error Messages

Another Jobs Management Application lesson for us tonight to demonstrate new and exciting ways to use the Community Server HelpToolTip Popup Control.  In this session we will be using the HelpToolTip Popup Control to provide information to users when input errors occur.

Below is a Jobs Management function that records Reimburseable Expenses made by foremen on the job.  Those expenses are transferred at the end of the week to the payroll system for reimbursement.  There are two data input requirements, 1) the expense date must be in the current work week and 2) both amount and description are required.  Since this page contains many, many Chameleon forms, standard ASP.NET Validation didn’t seem feasible.  Besides, the HelpToolTip Popup Control is a slick little widget.  When an error occurs, the STOP icon appears (where normally the lightning bolt of success would appear), with a detailed error message on mouseover.

 

How this works in the Chameleon Form is that OnSubmit() the data check is performed and on failure the SubmitErrorsActions action is triggered.

On the Community Server ASPX page, the SubmitErrorAction hides the custom Image control and displays the CS HelpToolTip control.

 

 

The final piece is the placement of the controls on the form in the right-hand column of the grid.  The control IDs referenced by SetVisibilityAction are circled.  The HelpToolTip HTML is highlighted.  One last final detail that may be of interest, the red STOP image and darkened mouseover version shown above that replace the standard HelpToolTip Question Mark images were set in CSS.

Article written by

A long time developer, I was an early adopter of Linux in the mid-90's for a few years until I entered corporate environments and worked with Microsoft technologies like ASP, then .NET. In 2008 I released Sueetie, an Online Community Platform built in .NET. In late 2012 I returned to my Linux roots and locked in on Java development. Much of my work is available on GitHub.