I have a tree navigation in my prototype. I want to select a tree item and have it remain selected while on a given page. I have this almost working, but the item will not “stay” selected. Instead, it remains highlighted in the color I have chosen while the page briefly loads. I am observing this through the axure preview where it is displaying an HTML page(s). I am currently using the Axure Enterprise RP 8.0.1 trial while my company purchases the licensed version.
Yes, I am using the out of the box Tree Control found by searching in the Axure library of widgets.
Steps to reproduce the behavior:
F5 to run the preview.
In the browser window, I click on the item in the tree. When I end my click on the mouse (mouse button up) the item is briefly highlighted in the blue background color that I want it to remain selected with. Instead, what happens is that the Blue background appears only briefly, while the page loads.
Am I use the wrong “Interaction”? I am setting this in the masterpage. Wrong place…?
If I’ve understood what you’re going for, you should be able to do this by creating a “Selected” interaction style for the tree node you’d like to be selected and then having that node’s “OnClick” event set itself to its selected state:
This way the node’s specified selected style will be applied (and stay applied) whenever it’s clicked. If you’re not yet familiar with interaction styles, this tutorial might help:
If I delete the Onclick Open (other page) event that I have on the same tree node, the selection appears correctly. When the two appear together the selection does not appear. (I suspect it is wiped out by the fact a new page is loading, just a guess.) I thin this may have more to do with maintaining state across pages. I’m having the same problem with an image that I “turn off” reappearing when the next page loads.
I managed to get this figured out using a global variable and a condition to maintain the state for a given tree node. This is going to get a bit sloppy for 20+ tree nodes, but it will work.
Is there a better approach?
(I should mention that beside each tree node I now have an icon that indicates if the form for that corresponding node has been completed (checkmark image appears) or not (checkmark disappears).
It doesn’t sound like there’d be a way around using global variables and setting a node’s selected state based on the variable value. I agree that this approach can be difficult to maintain, but it may be the most straightforward.
For what it’s worth, what can apply for this use case is to use a repeater widget to create a custom tree (which is a big leap into advanced prototyping). Since the OnItemLoad event is evaluated for each repeated item, you could create an OnItemLoad conditional case that evaluates whether a set variable equals a matching row value and then dynamically set the selected state where the values match.
What can get tricky with a repeater tree is determining how to expand and collapse certain nodes, since that isn’t built in in the repeater. Here’s a sample provided by a forum user in case it’s something you wanted to look into:
