Tuesday, August 7, 2012

When validation fails, give 'em some space

In my current project I was tidying up validation message controls and decided to us Ye Olde facesContext to help me out.

The issue is that in this application every single custom control that displays data is dynamically bound to its data source.  In addition, there are editing, print-to-pdf, print-base, print-final and, at last, print-to-diff versions of each of these controls.

Well...the only time I really need to display the error controls was in the editing-versions of these controls but the UI complication is that sometimes, not always, these controls are in table cells or otherwise surrounded by other dynamically generated content whenever they are included on an XPage.

Bottom line:  I wanted to add two returns after each Display Error control but ONLY if there was an actual error.  Otherwise I would have two extra returns on screen multiplied by n number of times in a repeat control.

In my typical brute force fashion, I remembered this XSnippet and created a custom control that contains two returns that display when only there is a server-side validation error.

I drop this control right next to the Display Error controls where I need it and it works like a champ.

If there is a server-side validation error, I get the error message plus a couple of extra returns below it which really improves the UI by adding more white space.






Don't know if that is the best way to do it but it works.  Custom Control code is below.



<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:span>
<xp:this.rendered><![CDATA[#{javascript:if(facesContext.getMessages().hasNext()){
return true;
}else{
return false;
}}]]></xp:this.rendered>
<xp:br></xp:br>
<xp:br></xp:br>
</xp:span>
</xp:view>