Best way to create modernly behaving forms with changing styles and appearing messages on errors

page-and-widget-styles

#1

Hi,

I have troubles in creating a wireframe for forms with error messages, hints etc.

What is the best way to create modern forms, with changing colors for labels or borders and appearing error messages.

  • I have been looking into dynamic panels, but then I have to recreate the same form multiple times, with some little changes. This is not effective.
  • If I use events, I have to do a lot of hiding and showing, and styling in the event, which is very error prone.

What is the best way to approach this?

Sara


#2

I think many people would agree that the “best” way is whatever works best for you and the situation. But, in an effort to actually be useful… :grin:

To my knowledge, you’re pretty much spot on when it comes to the only options available and their pros-and-cons particularly when it comes to Axure 8. Version 9 makes it a little easier because it gives you more control over the styling of input fields like setting the visibility of individual sides and allowing style effects like a Selected state.

Personally, I lean towards keeping my projects’ total widget counts as low as possible, so I avoid using dynamic panels with multiple widgets that all serve pretty much the same purpose. There are some things that can help reduce the chance of errors when using events:

  • Keep as much of the logic as you can on a single widget. Debugging issues is a lot easier when you don’t have to keep going back-and-forth among a bunch of things.

  • Reuse logic whenever you can. A simple example might be to think of a confirmation dialog with a “Cancel” button and a “Save” button. Regardless of which button is clicked the window will close, so set the “Cancel” button to hide the window OnClick. Then set the “Save” button to perform whatever change is needed and just fire the Cancel button’s OnClick event to hide the window.

  • Use widget styles (Axure Docs - Widget Styles).

  • Using icon fonts allows you to take advantage of the “Set rich text” option to change colors and images without relying on dynamic panels, like switching between a green check or a red “X”. Particularly useful when setting icons in repeaters.

  • Take advantage of “This” and “Target” in your logic. This can save you a lot of time when you don’t have to go back and reconfigure individual variables.

  • Do all of the hard work once. After you’ve got all the bugs worked out, save it as a master or add it to a custom widget library. That way you don’t have to remember how you pulled it off the last time you needed it.

I apologize for the somewhat long-winded response. I hope at least some of it is helpful. This is an example of how I go about it: Advanced_Field_Interactions.rp (63.0 KB)


Form Input Error States
#3

Thank you very much,
I have upgraded to rp9, and I am trying things out.
Will need to create some custom widgets though, as it still looks a lot of work per field.


#4

Thanks so much Sara. I was able to figure it out using some of the interactions in : Advanced_Field_Interactions.rp


#5

Happy I could help,
Sara