Maintaining menu selection when loading a new page

Hello,
I’ve been following the tutorials and training files but I’ve fallen short on the last task.

I’ve created a custom Drop List which works as planned. The issue is when a menu item is selected and a NEW page is loaded the menu defaults back to its original state. I’d like that selected menu option to remain selected when the new page is loaded.

Any advice or guidance would be excellent.

Menu-file.rp (83.4 KB)

@september,

Couple ways you could approach this… Simplest would be to just set the text with each page’s OnPageLoad event. You could also have the OnPageLoad event trigger the code you already have for each menu item. Or, you could encapsulate everything inside your Master so that it takes care of itself and each page doesn’t have to do anything. That’s a little more complex, but not too much, and it makes your Menu Master more object-oriented, flexible and re-usable.

Here is an updated file with each of these approaches demonstrated. Which one you choose is up to you (but I recommend picking one and using it consistently for all your menu items.)
Menu-file-v2.rp (90.1 KB)

  • Page 1 uses the OnPageLoad event to directly set the text on your “Main Menu” rectangle. It uses the built-in Axure variable, PageName which is a pointer to the name of the current page (obviously.) In Axure code, variables are designated by wrapping them in “double square brackets”, as in, [[PageName]]. Now, I could have also just used plain text, typing in “New Page 1”, but by using the PageName variable, I can later change the name of the page and it will still work, reflecting the new name of the page.

  • Page 2 uses OnPageLoad to set the “Page 2” item to selected. Take a look at the interaction code on your Menu items. I added a Selected Style (using something from your style sheet) and moved the “set text” action to the item’s OnSelected event. Isolating this action means the page won’t keep reloading automatically in a loop. Notice also that all the items are assigned to a Selection Group (named “menu item”) --This means that only one item may be selected at a time, so you don’t have to worry about unselecting the other items when one is selected.

  • Page 3 has nothing in its OnPageLoad event. In the Menu Master, the “Page 3” widget has interaction code in its OnLoad event. It has a condition that tests “If [[PageName]] contains text on This” and if so it sets itself to selected, thus triggering its OnSelected event which in turn sets the text on the “Main Menu” widget. Fun little chain of actions, eh?

@september

I think the most efficient way to handle this situation is making use of global variables.
Axure has built this feature for in between page interactions.

I have modified the file u shared and used default global variable onLoadVariable
2 simple steps.

  1. On selection of an option, i set the variable value to the text on selected widget
  2. On page load, I set text of the main menu label to the value of the variable

I hope this is what you needed.
Menu-file.rp (87.1 KB)

You can do a lot more using global variable and combining it with conditions.
Check his out to learn about how to use global variables.
https://www.axure.com/support/reference/variables

Thank you very much mbc66 and AC! I hope other can use this as well.

1 Like