Create and call a reusable 'function'?

Hi all,
I’m building a highly interactive prototype which is similar to a shopping cart/checkout, and have a lot of logic going on to update prices, quantities, fees, and totals.

I’ve got several sections where there’s a one of many choice (ex: shipping type) and am wondering if there’s a way to wrap my logic for this inside a function, then just call that function multiple times.

for example:

economy shipping = free
ground shipping = $6.99
2 day shipping = $23.99
1 day shipping = $68.99

order total: $xx.xx

If I could have just one block of code that I call each time the shipping option changes, it’d make this far easier to manage. One caveat is that I need to use custom UI pieces so unless I can completely reskin the radio buttons/checkboxes, I can’t tap into a native ‘on selection change’ as far as I know.

Any suggestions please? I’m a little out of my depth here.

thank you

My approach to this tends to be a dynamic panel that I change state to “Next Wrap” —the dp needs at least two states and anything or nothing can be in the states. Just needs a “next” state to change to in order to trigger an event which can then run code. Oftentimes the function is recursive, continuing to call itself until it walks through a set of input fields or a delimited variable. It turns out this works fine with any widget and any event using the “Fire Event” action, for instance, “Fire OnClick of MyButton”. Using a dynamic panel allows for a continual “status check” by telling the dp to change state to “Next Wrap every 500 ms” to loop it every half-second.
If you have a calculation to apply to one of many fields, you can try applying it to “the focused widget” so you can set the focus on FieldA, call the function… then later on, set focus on FieldB and call the same function.
You can also create multiple states in the “function dp” to make variants of your algorithm, beyond just setting it to the next state.

2 Likes

Thank you very much! Will do some testing and try this out.

What’s the trick to getting the panel to continue changing states please?

I’ve got my panel set up, and have it set to ‘onPanelStateChange next wrap repeat 500ms’.

It seems that whatever trigger I use to make it change state the first time overrides the ‘onPanelStateChange’ instruction. I’ve got a button that sets it to the next state, and it only changes once.

Should I make the button click include the ‘next wrap 500ms’ instead of using onPanelStateChange?

thank you again.

Here is a little demo. I included examples of “basic function” and a “repeating function”.

There’s no trick to get the panel to automatically repeat state changes…if that is actually what you want it to do. For your needs it probably only needs to change state once (each time you call it) in order to perform a calculation. If you need it to check a value and/or perform a calculation repeatedly on time, then you can include “Next” state, and check boxes for Wrap and Repeat. See the OnPageLoad event which kicks off the fxTime dynamic panel. So, every 500 ms it gets the current time (as a “timecode digit”) and compares it to the initial time. After 10 seconds it pops up a timeout dialog. So, I commonly do something like this for time-based needs, or to check the value of global variables that might change asynchronously on other pages (for example, within an inline frame.)

You can also set up a “recursive function” in which an OnPanelStateChange Case statement performs a task and then calls itself again by changing its own state to “Next, Wrap” --this is different from automatically repeating every 500 ms, and is typically used to increment a counter, so it runs for say, 5 loops and stops.

If you want to post your .rp file I’d be happy to look at your code. Some basic tips:

  • Make sure your dynamic panel has at least two states. This can be easy to forget.
  • Double-check your conditions and that your “If …” and “Else If…” conditions are correct. By default, Axure adds an “Else If” to new conditions but often you really want a separate “If” condition. Right-click the Case to change it.
  • If you set up a “Next Wrap Repeat” loop, ensure there’s a way to stop it when needed, especially if the page will be open for a long time in the browser. …“Stop Repeating” is a choice in the “Select state” droplist.
  • Use the Console panel when testing in the browser to check your global variables and actions. This is on the far left under “Pages” and “Notes”
  • You can have your “function panels” hide themselves in their OnLoad event so they don’t get in the way of your prototype.
  • You can use Label or Rectangle widgets to store temporary text/numbers as kind of “page local” variables instead of global variables. These can be placed and/or hidden in your dynamic panels so they are more self-sufficient. This helps especially if you create Masters from your “function panels”.
2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.