Dynamic Panel Bricks interactions for some states

Hello Axure community,

First let me say I’m new to Axure. I’m having issues with onclick interactions not working within different states of my dynamic panel… I’ve found that depending on where I move each state in the dynamic panel order seems to directly effect if it’s onclick interactions work or not (or even being able to expand/collapse trees bricks). i.e. if I move a non working state to the first position, it magically works and then one of the others bricks out…

!InteractivePanels.rp (593.0 KB)

Please see attachment for example.

When I publish a preview of this code, the following order of events show how the code bricks:

  1. Click the “Filter” button - Notice how the filter page works as expected.
  2. Click the “My Hierarchy” button - Notice how the my hierarchy page still shows clickable buttons and works as expected.
  3. Click any of the following buttons to navigate to a new state that bricks the interactions:
    3.a. Click the “Magnum Breaker Production Line” button - Notice how the new state does not allow interactions. i.e. “My Hierarchy” button, “left bar” button do not work.
    3.b. Click the “>>” button - Notice how the new state does not allow interactions. i.e. “My Hierarchy” button, “left bar” button do not work.

Now notice that if you move the state “1_Nav_Line” to the first state it works as expected and you can click to another state that bricks…

Please help! and Thank you for any suggestions!

As far as I can see, everything in your prototype (for which you have created interactions) works for me, and it works just as you have it coded. You may have bugs in your code and logic, and it obviously doesn’t work the way you expect, but technically nothing is “bricked” or non-functional. Below, everywhere you have said something “does not work”, please add a comment describing exactly how you intend it to work. That will help others on the forum help you better.

If I follow steps 1, 2, 3, 3a, the interactions work for me, and after looking at your code, they are working correctly as you have coded them. When you say the buttons “do not work” what is your intent for how they should work?

  • Clicking My Hierarchy opens a panel to the right side with “Selected Item(s)” etc. --the 1_a_Nav_Sel_Line state, which is what you coded.

  • Clicking the “left bar” has varied results depending if I click on the gray background or the triangle/arrrowhead. These two widgets have different interaction code which is not good. You’ll want to use one OnClick event here, and I recommend assigning to the group’s OnClick event rather than just one widget within that group (1_Nav_Line+minmax bar). As a user, I expect this would take me back to the previous view, but neither OnClick does that, so I’m not sure what you’re trying to do with this.

  • Clicking on the raquo at bottom right opens similar panel to the right, which appears to be what you coded.

  • Clicking My Hierarchy tab works as you have it coded. As a user, I would not really expect anything to happen if I click on the already selected/highlighted tab–because I’m already there. What is your intent when this tab is clicked? Here is what you’ve coded:

    • It shows the bottom radio button and raquo shape, which are already shown by default, so it has no effect. Maybe these get hidden elsewhere and you want them to show just in case?
    • It toggles the visibility of the tree, which works. I’m not sure why this would happen, but it works as you’ve specified in your code.

Then you should look at the code in that state and apply it elsewhere as needed.

In general, what you’ve done with this approach–creating one dynamic panel and replicating your top tabs and tree structure, etc. in each state is unnecessarily redundant and prone to coding errors, where buttons behave differently in different states. Consider creating your structure to eliminate or reduce redundancy. For instance, you only need one menu widget with your top two tabs, and that should be separate from your content areas. You have essentially two content panes within “My Heirarchy tab” (nav tree on the left, options on the right) so consider two separate dynamic panels–left and right. Then you won’t need to recreate your tabs and tree for every different state.

To help you test and debug your interactions, you can use the “hotspot highlighter” to show which areas are interactive (everything you’ve coded.) You can also use the Console pane (far left of prototype HTML page) which records every interaction in real time.

wow! thank you so much for validating it works on your end!

Issues were because I default to IE browser (company default browser for some prehistoric reason). Luckily I have admin rights on my machine so I was able to install chrome. I tried again to preview and forced to chrome browser and boom! everything works as expected!

I’m embarrassed to say how much time I’ve wasted moving stuff around in trial and error to get different portions working…

Your coding suggestions make sense… I just recently converted this code to use dynamic panels instead of trying to hide/show many layers of widgets to get a similar effect. Common noob mistake? This eventually became overwhelming so I converted to dynamic panels which may be why you’re seeing some show/hides that haven’t been cleaned up yet.

I’m good to go now so many thanks to you!!