Interactions between accordions


#1

Hi there,

As part of a checkout process that I’m making, I’ve created an accordion.
Two questions:

  1. Which interaction do I need to add to a button on accordion 1 (my shopping bag) in order to pass to the next checkout level (shipping method)?
  2. How can I change the color of the headings (the black blocks) after the entire info. in each accordion has been filled out?

to make it a bit easier to imagine, here is the proto:
https://p85hdp.axshare.com

many thanks


#2

In the button’s Click or Tap event, you can choose the Fire Event action and choose which event to trigger. For example the “Continue” button under “My Shopping Bag” can “Fire Click or Tap of myShoppingBagWidgetName” so that it does the same exact thing as clicking on “My Shopping Bag”.

Set the Interaction Style Effect of of Selected Style (was :selected in prior RP9 releases) for the black blocks to whatever color you need. In the INTERACTIONS pane, look for the Style Effects section at the bottom. You can apply this to a single widget or all the selected widgets at once. Then, once the user has filled out everything necessary, set the block widget to selected using the Set Selected/Checked event. Now, determining if the user has “filled out” everything can be a trick, especially if things can be done in any order. Not obvious to me what would need to be done in the “Shopping Bag” section other than clicking Continue, but say if I needed to click a checkbox and enter a value in a field, and could do those in any order I wish, then the checkbox widget would need to test if the field was empty or filled, and the field widget would have to test if the checkbox was checked or not. Make sense? For complicated forms with many possibilities, you can set up a kind of “validation function” by setting up a hidden button or dynamic panel widget that checks every condition–the state or value of each mandatory widget or group–and only performs an action (like setting a widget to “Selected”) if all are good/done. In each mandatory widget, set up a Lost Focus event that fires the validation function widget.

If this doesn’t make sense, then upload your .rp file (look for the “up arrow” icon in the formatting options toolbar) and I’ll demonstrate how to set this up.