Hover, and select dynamic panel row

#1

Hi there

I’m fairly new to the world of Axure and I’m currently putting together an admin wireframe which has a list of users and I want to be to hover over a user row with a highlight appearing and then being able to select it by clicking on that row.

At the moment I have created the row as a dynamic panel with 3 different states

  1. Normal state
  2. Hover state (Highlight and a checkbox appears)
  3. Is the selected state with checkbox ticked

I’ve added interactions the main dynamic panel
Mouse Enter Show Panel State 2
Mouse Exit Show Panel State 1
OnClick Show Panel State 3

The problem is when I move the mouse away it goes back to State 1. I am missing something glaringly obvious? Any help would be appreciated!

#2

You say that you added a “Mouse Exit Show Panel State 1” interaction. Doesn’t that do exactly what you are describing?

#3

Hi!

I assume you mean that after clicking to change to state 3, it goes back to state 1 on mouseExit.

You can solve this by adding a condition to the OnMouseExit interaction:

OnMouseExit
  If state of (this widget) is not equal to State 3
    set state of panel (this widget) to state 1

If you’ve not played with adding conditions before, I’d check out this documentation from the Axure folks.

#4

Also, you don’t usually need to accomplish various states with dynamic panels - hover and selected states can be handled with Widget Style Effects usually and you can group widgets together and have them all fire their various styles at the same time using Trigger Mouse Interaction Styles. This saves a lot of time and headaches.

#5

Thank you everyone for your quick reponses! So the idea is basically to create a hover state for a user row which will be their name, email, role etc which highlights when you hover over it, moving away would return the row to it’s normal state, however when the user clicks on it they activate it into a selected state and can deactivate it when they click on it again, like a toggle.

It shouldn’t go back to it’s original state if the user has selected it and moves away from it. Hope that makes sense! I can attached a picture if that helps

@davegoodman that actually makes a lot of sense and would save hours (almost two for me yesterday!) of time of headaches! Thank you, I’ll give this a go! :slight_smile: