The Axure Panel Exploder
Axure began as a tool to create functional specifications, and over time it pivoted slooowly to be its current interactive prototyping powerhouse. Interestingly, the better it becomes at prototyping, the more that the functional specs seem to lag by the wayside.
In early March, a reader reached out to me and asked if I had played at all with extending Axure’s functional specification output. After I admitted that I hadn’t, he proposed an interesting idea: What if you could layout each state of a dynamic panel in the browser so developers could see all possible states for it? Here are the screenshots they sent me:
Through some suggestions from him and a hell of a lot of experimenting from me, we actually made a plugin that accomplishes the majority of what we were looking for.
Here’s a little screencast:
How it Works:
First, we lay out the CSS (so that we don’t get a flash of unstyled content) and the HTML. The HTML consists of a div to hold all of the toggles (Which will overlay the prototype) and a a modal to show the panel in.
Next, we place the toggle buttons, so we iterate over every panel in the prototype and check if it has multiple states. If it does, we insert a toggle into the toggles div that is positioned over the panel.
Why not just inject toggles directly into the panels?
Oh boy howdy did I try. Apparently, Axure keeps track of each individual element when handling things like hiding and showing, so consequentially it flips the table if you try to mess with its DOM after it has built the page. Consequentially, I needed a way to add the toggles to the page without adding any new elements into the actual panel structure. Pseudoelements seem attractive until you realize that there is not way to target them with JS. Initially I just overtook the natural JS function, but I wanted the dynamic panels to function normally unless you clicked on the toggle itself.
The string manipulation of the ID is how we figure out which panel to target when we click on a toggle, but we append
--toggle to it so nothing explodes.
The main goal here is to figure out if the content is framed in. If it is, we don’t immediately show the toggles so it is configurable. Otherwise, we show the toggles so that if you navigate directly to a prototype page, you still have options.
Because the viewer operates through an
iFrame, Axure uses this
messageCenter library to keep track of functions passing between the viewer and its frame. Here, I hook into the
highlightInteractive function so that it will hide and show along with the interactivity glow. It will pass a
message (Usually highlightInteractive or showAnnotation) along with a
data variable that serves as a boolean toggle.
First, we get the toggle ID. Then we chop off
--toggle and turn it into a jQuery object so we can target it.
Here, we grab our targetted panel, strip the glowing border, set its ID so that its
panelID--cloned, and shove it into the modal.
When you click a dynamic panel, if the dynamic panel state shifts, Axure will reorder the states inside of it. For instance, if you initially have states
3 and you click it, the order will now be
1. This makes sense for a display viewpoint, and is really dumb looking when the panel is exploded.
First, we iterate over the states and reset their IDs to be a simple number. Their naming convention is
panelID + _state + number or by way of example
#u0_state1. For each state, we split it at the
state pattern, pop the number off at the end, and set that number as the state’s ID to give us integers.
Then, using a script that I totally didn’t write and copy and pasted from StackOverflow, we sort the states and throw them back into the panel.
Whenever you name something in Axure, that text is actually injected into the prototype, usually in the form of a
data-label. Bless the developers of Axure for doing this. This is how we set the title of the panel, and the title for each state.
Finally, these are just functions that show and hide the modal. Why these are currently done as negatives and not positives currently eludes me. We also delete the panel instance from the modal upon close so that it doesn’ stack up too much.