Applies to: All versions of GUI Design Studio (Professional editions also have more advanced methods)
When the user submits my form, I want invalid fields to be indicated with error messages instead of completing form submission.
The Professional edition of GUI Design Studio has a number of different methods for dealing with field validation, especially with its ability to use the values of entered data. The solution presented here is suitable for all versions and editions of GUI Design Studio and is the best solution for Express users.
All versions of GUI Design Studio provide a Condition Box where you can add different scenarios. When your prototype is run and a Condition Box is reached, GUI Design Studio will present you with a list of available scenarios for you to choose the one you want to execute.
There are also a number of runtime options that will help you test your prototype by always selecting the first or second scenario, or choose one at random, instead of making you select from the list. Note that the Professional edition can also make selections automatically based on data conditions.
Steps for adding scenarios
1. Add a Condition Box to your design from the Storyboard panel. Add as many different scenarios as you like. It's best if the first scenario is the normal, success case can rename this to whatever you like.
2. Connect the first, "Normal" case to an action for successful submission of the form. For a Dialog Box, the action would be a "Close and Accept" box (Example #1, below). For a Web form, it would be a link to the next appropriate Web Page design (Example #2, below).
3. Add error message overlays to your design. These can be whatever you want. In the simplest case, a Static Text element containing the error message is all that's required. If it will be replacing existing text in the form, make sure it has a solid background colour that matches the background of the text it is to replace.
4. Add a Window Position Anchor from the Storyboard Panel for each error message to specify where it should appear on your design, then connect each one to the associated error message overlay.
5. Connect each scenario from the Condition Box to its associated error message overlay, using a "Show Window" navigation to make it appear when the scenario is executed.
6. Optionally, use "Hide Window" connections from each scenario to hide the error message overlays that are not associated with the scenario. Otherwise, previous error messages will remain visible until the Normal, success case is executed. This might actually be preferable anyway and does keep the design cleaner and simpler.
The following example demonstrates a simple account creation dialog box. Scenarios have been added for each of the error conditions where the field entries are invalid:
This is the same example but re-designed for use on a web site. In this case, the success action navigates to a new web page:
"DialogValidation1-Express.gui" is the design file for Example #1. "DialogValidation1.gdd" is a distribution version that includes an additional 'test' design to open the dialog. The "WebValidation1" files contain the designs used in Example #2.