Document.ready equivalent

#1

Is there a document event I can listen for to know when the prototype player is ready?

I’m experimenting with replacing Axure shapes with controls created with javascript, I currently have that working a bit but it’s based on setTimeout and I know that method is fraught with issues. I know for a fact that I have very complex pages that take over 2 seconds to load up but I don’t want to make everything wait that long.

#2

Hey Brent,

To help us get a better idea, can you let us know your use case with this and why you’re replacing Axure shapes with javascript controls?

We might not have a great understanding of the methods that you’re using as a power user but we’d like to know what limitations in Axure RP are having you explore these alternatives!

#3

So I tried responding to this earlier but I wrote a novella-sized response that’s probably a blog post draft about where my head is at with UX design.

I’ve been experimenting a lot with Axure to see how I can push its capabilities, finding ways to extend what I can do with it. I don’t have a specific use case per se, but I have ideas I guess. One thing in general Axure-wise I’ve never been able to figure out is how and where or even why we’d use plugins beyond inserting google analytics (which always seemed like a weird use case).

Some ideas:

  • What if I could replace an axure shape with something from a javascript component library? This would be great for a prototype where everything on a page is a “solved problem” except what we’re working on. I could load in actual code and keep things focused on the new wireframes OR maybe it’s a complex control like a datepicker and it’s easier to properly configure a proper component rather than use a clunky facsimile in Axure
  • What if I could use data in axure shapes to configure a component? This is somewhat implemented in Axureboutique’s Echarts plugin thing (where I stole the setTimeout method from). For this I do have a use case:
    • I recently updated an interactive map that previously we’d clunkily prototyped in Axure, this time we didn’t even bother with doing anything map-related inside Axure.
    • I know we can point to an iFrame to embed non-axure content but that requires something being hosted online, but it be nice to do something on local or just inside a script.
    • In addition to maps, there’s things like data visualizations where it’s easier to do in a different tool where this would be helpful
  • I’m exploring ways to shoehorn CSS layout types into Axure. Flexbox, CSS grid, etc. I’m imagining sort of marking up nested layouts directives inside shape name (or maybe Notes data?)
    1. Say we have a dynamic panel and mark it as “display: flex” and other related flex properties
    2. Inside the dyn panel we maybe have other dyn panels (or maybe a repeater?) that we mark up as flex children
    3. When the prototype finishes loading (the document.ready thing I’m looking for), it either copies and redraws (or even better, just restructures the DOM) including those flex directives as css rules.
    4. No doubt it’s nowhere near this simple but it’s where my idea starts
  • I’m heavily exploring adopting design tokens in our practice it’s no longer a question of if we’ll use them, it’s when.
    • One of the things holding me back from making the change is Axure’s complete lack of support for the concept. I’ve been exploring the possibilities for again, marking up things inside Axure shapes and then using javascript to redraw them using that markup in some fashion.
    • There are CSS properties Axure does not support, but it is still the best and fastest way to quickly put together an interactive prototype. I want to prototype in Axure still, and then add in the extra missing pieces at render time (is this what a polyfill does?)
    • It would be fantastic if Axure could look at the design tokens to determine the styling for a given shape or component, then we can wireframe in Axure, style elsewhere and not have to then try to keep the styles up to date in Axure (if we even can)
  • Web Components are getting pretty powerful, I’ve seen some very useful standalone Web Components for things like markdown editors, WYSIWYGs, Maps, Image Comparators, etc. It’d be cool to be able to drop one into a prototype and immediately have that feature available

I’m pretty sure we’ll still need to add something like Figma or Penpot to our workflow, to really get into the finer details of the UI styling, but I want to know where Axure’s limitations truly are.

oh cool, I wrote another novel… anyway, I’m just thinking outside of the box and also trying to figure out how Axure plugins work and where they are useful. I considered initially digging through things like axlib or even Axure.Ex for an answer but I figured I’d ask directly first.

#4

We appreciate this write-up and we have a quick update!

Our product team was able to review these items and have added them as feature request tickets to further investigate. We definitely appreciate this kind of feedback and of course, if anything else comes up please feel free to let us know.