On some forms, it may be helpful to provide visual cues and clues to the end user about how the form will be validated. To accomplish this in the past, I've used methods such as exiting the form, performing validation in an evaluation model, marking any validation issues with error flags and setting error responses, and returning to the form with flags and messages in tow. While much of this will likely still be necessary, using javascript to show users (as they fill out the form) which fields are required, or which fields have changed, may make for an easier time on the end-user for completing your workflow form.
On to the fun stuff:
I've attached a demo package if you'd rather look at that than at the picture-book explanation below.
For this proof-of-concept project, all we need is to initialize some variables, use a form component, provide some means of reloading the form (I've looped back into the form with a demo component) and close the workflow with an end component.
For the form components, we'll use a drop-down component, a text box, and a subdialog component in order to accomplish a page postback (and a regular button).
Now the effect we want to see is that when a value is pre-loaded into a drop-down or text box, that we can highlight that directly when the value is changed.
To control these style changes, some javascript is placed into the behavior panels of the components we want to control.
Dropdown Component:
Custom Events Overview. Ensure Control IDs are set for the components you want to control.
onmousedown: (this ensures that the selection array doesn't stay highlighted until the blur event)
onblur: (upon leaving (blur) this component, the check is made vs the preserved variable to check for changes.)
Text Box:
Custom Events Overview. Ensure Control IDs are set for the components you want to control.
onfocus: (this sets the text box back to white so you aren't typing in a yellow or red box)
onblur: (upon leaving (blur) this component, the check is made vs the preserved variable to check for changes.)
Then set up the form body. Right-click on any blank space on the form, and "Edit Form".
This action is taken so if a page postback occurs (leaving the page, loading a subdialog with refresh, embedded action, etc), we check the intended state of highlighting on the components on page load.
On the Behavior tab, add a Body Custom Event.
Add this entry as an onload event:
So the result is that the original values load with the page:
But if we change these values and continue with the form, we'll see indicators that the values have been edited:
Or, that the values are invalid:
Because we also created a javascript evaluation on the form body "onload" event, if we enter and return from the subdialog, or click the button component (that wraps right back into the form), the evaluations should take place and mark the fields accordingly.
Epilogue:
I'm not proficient with javascript as a tool apart from using it to extend the capabilities of Workflow. I'm sure there are better ways to write the javascript than the way I've done it here - feel free to clean it up or change it, make use of functions, etc. Hopefully this at least shows another way to use javascript and the form builder together to make for a better end-user experience.