Making Required Fields More Visible for SalesLogix 7.2 Web

If you’ve implemented the new SalesLogix 7.2 Web Client, chances are that you’ve heard complaints from your end-users about the way that required field validation appears when attempting to save a record. You’ve probably heard, “I click Save and nothing happens” – they don’t even notice the little red asterisks next to the required fields that did not validate, such as the screenshot shown below:

Huh?! Did you catch those 5 little red asterisks? You have to really look hard for them to catch them. The problem is that these little red asterisks are too hard to see. Most end-users don’t notice them. So they either think the record saved and navigate elsewhere, or they don’t understand why the Save button isn’t doing anything. They are easy to overlook. Fortunately, the SalesLogix controls for SmartParts use standard ASP.NET validation controls, such as the RequiredFieldValidator, so while you can’t access the validation controls directly, you can work with them, to a degree, if you understand how the standard ASP.NET validation controls work.

We’ll take a look at two things to improve these validation controls and make them more obvious to end users. First we’ll change the asterisks to something that not only looks nicer, but is easier to see. We’ll use this icon from the FamFamFam Silk collection for each required field that does not validate. For this example, we’ll focus on the SalesLogix:PickList and the SalesLogix:Lookup controls. If we look at the rendered HTML for the SmartPart, we’ll see that the PickList control renders like this:

You’ll notice that, while we don’t have a style class for the validation text, we can pretty easily get to it by using the following class/element hierarchy:

picklist -> div -> span

For a Lookup, we have a similar hierarchy as well. So, go to the support files for the client portal. Right-click on the images folder and add your image (mine is named “stop-req.gif”). Now, go to the CSS folder and open the “quickform.css” stylesheet. Add the following:

.picklist div span, .lookup span span
{
    background-image: url(../images/stop-req.gif);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 10px;
}

/* make sure this is _after_ the change
   to ".lookup span span" above or you'll
   end up with the icon on the actual lookup
   windows too */
div .bd span
{
    background-image: none;
}

That will add our nice icon to the fields when they do not validate. Let’s also give the user an alert as well to make sure they really see that there are required fields that need to be completed. To do this, we can simply add a ValidationSummary control to the page. We’ll make use of ASP.NET doing all the work for us. Since we want this to be consistent throughout the site, we’ll add the ValidationSummary to the base.master file. Then it will automagically be a part of every page (without us needing to add it to every page). In the Support Files, go to the masters folder and open base.master.

Look for the following line:

<form id="mainform" runat="server" action="javascript:void(0);">

Immediately after that line, add the following:

<asp:ValidationSummary
    id="ValidationSummary1"
    runat="server"
    DisplayMode="BulletList"
    HeaderText="Please complete the missing required fields to continue"
    ShowMessageBox="True"
    ShowSummary="False"
    EnableClientScript="True">
</asp:ValidationSummary>

That is it! Now, the changes we made above will produce the following effect when required fields are missing and fail the validation:

That is much nicer. You certainly won’t be hearing those complaints from uers any more.

I should point out that normally, we could get the list of missing fields that didn’t validate to appear right in the messagr box as well, however, Sage isn’t populating the ErrorMessage value for the RequiredFieldValidator controls, so you won’t be able to get the list of missing controls to display in the message until they fix that.

ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

1 Comment

  1. Hi Chris,

    The only way to get rid of the red asterisk (last time I checked) was to modify the control template itself in the VFS to use a less noticable char or to use the image itself in place of the char.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) news and product updates!

You have Successfully Subscribed!