Set state - on Click outside widget?


#1

I have a custom dropdown widget, and have created various states for it. Functionality-wise (just like a standard dropdown) upon expansion I would like the user to be able to dismiss it (collapse it) upon subsequently clicking anywhere outside the widget.

I have researched this, but no solution works for me. “Treat as lightbox” isn’t available for me for my expanded state. Using OnLostFocus doesn’t work (apparrently only works on text fields).

I don’t want to have to create 4 hotspots surrounding the widget to capture the click, as this is a hack, and in any event the height of the dropdown will be dynamic (once I get to that part…) so this won’t be practical.

Seems the most useful mouse event in the world is just not available in Axure. OnClickOut would be wonderful.

Is there a solution? Where am I going wrong?


#2

How are you creating the various open/close states? Are you using dynamic panels?

It would be helpful if you could post an example file, as the lightbox option should work (and you can set it to not use an opaque background).


#3

I’m using dynamic panels to create the states.

I’ve attached an rp demo file which uses a repeater for the option list.

custom_dropdown_test_002.rp (84.1 KB)


#4

Not perfect, but you could do it this way:

custom_dropdown_test_002.rp (81.7 KB)

I split the ‘Open’ state away from the dynamic panel, made it into a group, then added a lightbox interaction to it. Note I haven’t recreated your logic for pushing the selected value back to the ‘selected’ panel state.


#5

Thanks - however I’m unable to see any information at all in your Axure 9 version. I use Axure 8, and 9 is an unusable mystery to me, sadly. For example all i see in Axure 9 is a yellow group. I cannot interogate the object to see what settings it has (I cannot see what you did, I cannot see where the lightbox option is, it was missing for me before and is still missing!).

The intention was to backwork your example - see what you did, what setting you put where etc, where it was entered etc - but I cannot see this information in Axure 9. Even if I ungroup the object I still cannot see the interactions (under Interations it just says “5 shape, selected, disabled” and these are not clickable and they do not open like in Axure 8 with all the information about the interaction.

I cannot see how anyone can create anything interactive in Axure 9 - there is no information about any of the objects! It quite literally is unintuitive, unusable.

Do you have Axure 8? Would you be very kind and show me how you did this in Axure 8 with a rp 8 file?

(Why is Axure 9 so unusable? It makes me so frustrated! Where is the information about basic interaction, like in Axure 8!!! How can anyone see it? It’s just impossible.) Sorry for the rant.


#6

Apologies, I didn’t realise the interactions wouldn’t be visible in Axure 8. I’m afraid I no longer have a license for it.

To be clear, I can see the interactions in Axure 9 fine, I presume they are essentially made read-only when you open an Axure 9 file in Axure 8.

Here’s what I did:

  • Split the ‘Open’ state away from the Dynamic panel (right click on your dynamic panel and select ‘break away first state’ - I think this works in both versions)
  • Group everything in the Open state together
  • Click on the eye icon in your toolbar to hide this by default (this is the yellow overlay, indicating a widget is hidden). You can double click a hidden widget to make it visible for editing. This should work in Axure 8 and Axure 9
  • Set your click hotspots over the menu to Show the ‘Open’ group, treated as a lightbox, with a transparent background.

#7

Thank you very much, it is much appreciated - I shall look into that further. At least I have successfully created a dynamic height repeater for the dropdown options - now I just need to take the selected option’s value and display it in the dropdown’s other (selected) state (lots of variable reading and no doubt I’ll be asking questions on that in another post!).

Many thanks.