Problem with push pull widget

[blindside93]

I use the push-pull widget feature to create submenus. Everything works fine when there are two menus with submenus. However, when I add a" Menu 4" along with its submenu, the push-pull widget does not work correctly. I have attached the original file, please help me fix this issue. Thank youPushpull widget.rp (1.0 MB)

[mbc66]

Your setup and approach here is understandable, and on the surface this seems like it should be pretty straightforward and simple, but unfortunately it is not–at least in Axure RP9 (I don’t know if RP10 has fixed any of this.) Some of the problems here are due to Axure and the way it implements push/pull and animated transitions, and some are due to bugs in your interaction code.

You have some overly complicated interaction code here and each menu item has slightly different code. This is likely causing some of the unintended behavior. For example, I notice the Click or Tap for Menu 1 sets selection states for all the menu items and changes panel states for some but not all "arrow menu" widgets–like, "arrow Menu 4" is not included but should be.

You also have animations for your show/hide behaviors, e.g., “flip up 500ms” and push/pull behaviors, e.g., “push widgets below swing 500ms” which are likely causing some timing bugs. So, while Axure offers these animation options it doesn’t ensure they work properly together. I consider this an Axure bug because you shouldn’t have to worry about it, but alas, when using animations in Axure, you just do. So, it is important to realize, for example, when you hide a widget with a 500ms animation, it is not actually hidden immediately, but only after the animation completes–500ms later. When you combine this with a push/pull option, this means the push/pull is triggered when the widget is truly hidden, 500ms after you otherwise think it would. When multiple widgets/groups/panels are involved, each with their own animations, “timing collisions” can happen and widgets move in weird unexpected ways. I’ll address this later.

First, let’s deal with simplifying your code. Here is an updated .rp file with some recommended changes shown on Page 2 …and some alternate approaches on the other pages–more on those below.
Pushpull widget.rp (1.3 MB)

With lists and menus like this, it is better practice to have each element take care of itself only and not have to know about or try to control the other elements–your Menu items in this case. On Page 2 of the updated file, I duplicated Page 1 and made these changes:

• I removed all the animations for show/hide and panel state changes to avoid those potential issues.

• Assigned a Selection Group to each of the “Level 1” menu items (Menu 1, Menu 2, etc.) which I named, “menuLevel1”. A selection group makes it so only one member may be selected at a time. This removes the need to set one Menu item as selected and the reset to unselected. More importantly, it means each member does not need to know about all the other members, so later on if you need to add, remove, change anything, you don’t have to change all your code. Learn more about Selection Groups here:
  https://docs.axure.com/axure-rp/reference/selection-groups/

• On each "Level 1" menu item, I removed all the actions affecting other widgets (because they will be responsible for themselves only.)

  • So, on “Menu 1”; because it has no submenu, the only action in Click or Tap is Set Selected/Checked This to "true".
  • Because it is in a Selection Group, when it gets selected, all the other members of this selection group automatically become unselected.
  • "This" is a variable pointer to the same widget itself. It is identical to choosing the "Menu 1" widget group, but it makes it easier to copy & paste the code. It is the first item in the widget choice list, so is easy to assign.
  • I assigned this for "Menu 1", copied this action and pasted to the other Level 1 menu widgets.

• For Level 1 menu items with submenus, I moved the actions to show/hide and change the "arrow menu" states to the Selected and Unselected events of the "menu label" widget.

  • Clicking a Level 1 menu item which has a submenu toggles its selection state, so submenu can be opened and closed.
  • Because submenus should be shown only when the parent menu is selected, and hidden any time the parent is unselected, and each menu item takes care of itself only, it is easier and more reliable to use the selection events rather than click events. For instance, let’s say you click on “Menu 2” so “Menu 2 Sub menu” gets shown and all the other submenus get hidden, all the other menu items get unselected. Then, if you click on “Menu 1” it should hide “Menu 2 Sub menu” --but neither “Menu 2” nor “Menu 2 Sub menu” would not get clicked, it would simply become unselected, and that event–the change of selection state–can be used to take care of itself.
  • It would be nice if Groups and Dynamic Panels had Selected and Unselected events, but for some reason in Axure they don’t. This is odd because you can select and unselect a Group–and that affects the selection states of all widgets in that group–but you can’t access the selection state of the Group itself or use it as a trigger to do anything. So, you have to use an individual widget in that group instead. I chose the labels for this.
  • I could have used one event, Selected or Unselected instead of two separate events, Selected and Unselected but I’ve found that to be less reliable, especially with Groups and with indirect selection, such as with Selection Groups. Also, I find it more clear to understand the code and debug if needed. So, when “Menu 2 label” is Selected, it shows “menu 2 Sub menu” and changes “arrow Menu 2” to State2 (arrow pointing up). When it is Unselected, it does the opposite.

• For all the Level 2 menu items (submenu items, e.g., "Submenu 2-1") I made Selection Groups (e.g., "menu2sub") and simplified the Click or Tap to just Set Selected/Checked This to "true"

• Try clicking around on Page 2… for me, this behaving properly and reliably.

Now let’s get to the animation timing issues… I duplicated Page 2 to Page 3 and added the transition animations back in. If you open Menu 2 then click on Menu 1 or Menu 3 (with no submenus) things work well. However, if you open Menu 2 then click on Menu 4 or 5–basically clicking back and forth on menu items with submenus, it breaks and things move around unexpectedly and unpredictably.

I then duplicated Page 2 to Page 4 and removed the animated transitions only for the “hide” actions, so when a submenu opens it slides down with animation, but when it closes (gets unselected) it hides right away and push/pull widgets below right away. For me, this behaves well and reliably. If you can live with this, I recommend it.

Page 5 is an attempt to get animated transitions for hiding as well as showing submenus.

• I converted everything to dynamic panels, as they tend to be more reliable than groups when moving things around.
• The menu and all submenus are shown in the editor, which makes them easier to lay out, position, access, etc. Each submenu hides itself automatically with a Loaded event, and likewise the whole menu hides itself too.
• Rather than using push/pull widgets, each menu item (dynamic panel) moves the menu item below it with a Resized event (when a submenu is shown the parent menu dynamic panel grows to fit it, thus triggering Resized.)
• Likewise, when a menu item gets moved, it moves the item below it using the “with This” option.
• This method kind of breaks the object-oriented approach of “take care of itself only” because it needs to also take care of positioning the item/object immediately below it. But at least it only needs to know/control that one item. Then that item takes care of itself and positions the item below it, and so forth in a chain reaction.
• This method works, but can look a bit hokey in some of the movements. It does end up moving everything to the right location though.

Finally, on Page 6 I show a solution using a Repeater. This also suffers from only being able to show animated transitions when opening a submenu. Closing/hiding submenus have immediate effects. The advantage of a repeater widget is the flexibility of adding, removing, editing menu items without having to change any of the interaction code. You just have to code one menu item and all the rest behave the same …because they are repeated. Just edit the repeater datasheet in the Style pane to add/remove/rename menu items. If you need more submenu items (there is currently a maximum of 3) then add more columns in the datasheet, copy-paste the Cases in the Item Loaded event, and duplicate the submenu widgets (e.g., ctrl-drag “Sub 3” and name it “Sub 4”).

[blindside93]

omg this is the solution I need. Thank you so much for your very helpful and detailed guidance. Have a good day!

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.