Improve Data Validation User Experience

We have an application with a large form that gets filled out by Sales employees.  We have data validation setup as a microflow on the various fields and prevents the users from submitting.  Now we are looking at how we could make the user experience more intuitive when a required field was missed.  Ideally, we could have the groupboxes display with a stop-light of colors right in the header, so the user knows which boxed they missed a field in.  I attached a screen shot of a similar application that we built outside of Mendix a while back.     Two part question: How could we accomplish a visual indicator such as a green, yellow, or red circle in the groupbox header based on the microflow validation? Is there a way to auto-expand a groupbox if validation failed, and focus the browser to that part of the form?  I seen some widgets out there might potentially work, but looking for any recommendations.
1 answers

Hi Zack,

You might be able to use the javascript snippet widget to accomplish the stop signs that you want to do. You would have to write a script that insert that icon or changes the color of the group box. You would start with the snippet hidden with conditional visibility. Then when you run your validation, if anything was missed, you could use conditional visibility to show the javascript snippet to apply the script.


Another option would be the scroll to anchor widget, which will make it easier to see fields that are showing  a validation feedback.


And the last option I could think of is to just show a simple pop up message that says they need make corrections. Maybe even add in the message which sections they need to visit and the number of fields they missed.


Hope this helps!