Pass Next using checkboxes / dropdowns

newbie-question
#1

Hi does anyone know if the ‘pass to next’ function, can be used with checkboxes or dropdowns?
I have looked through the different interaction options and am wondering if I am missing something.

Thanks in advance

#2

What do you mean by “pass to next”? Are you referring to this tutorial?

If so, yes you can pass the text value, selection state or selected option of any widget to another page using global variables. Just pick an appropriate option in the SET TO droplist within the Set Variable Value action.

Depending on what you want to “pass” to another page from a checkbox, you could set global variables to any or all of:

  1. The current selection state with “Set Variable Value OnLoadVariable to is selected of MyCheckbox”
    • If the checkbox is checked, the value of OnLoadVariable would be set to “true”
    • If the checkbox is not checked, the value of OnLoadVariable would be set to “false”
  2. The text value of MyCheckbox with “Set Variable Value OnLoadVariable to text on MyCheckbox”
    • If your checkbox has a label of “I accept the terms and conditions” then OnLoadVariable (or whatever global variable you use) would be set to “I accept the terms and conditions”.
  3. The widget name of MyCheckbox with “Set Variable Value OnLoadVariable to value [[LVAR1.name]]” --where LVAR1 is a local variable pointing to the checkbox widget.
    • In this example, OnLodVariable would be set to “MyCheckbox”
  4. Any widget property you can find in the **Insert Variable or Function" dropdown of the “fx” or “Edit Text” dialog.

If you are using the Droplist widget for your dropdown, use:

  1. The current selected item, with “Set Variable Value OnLoadVariable to selected option of MyDroplist”
  2. Any other widget property as shown above.

If you want to set the property of a global variable upon selection change, you can use the Selected event of a checkbox, or “Selection Changed” event of a droplist, and use this more generic action code: “Set Variable Value OnLoadVariable to is selected of This” or “…selected option of This”. Likewise, “…[[This.name]]” or “…[[This.top]]” That makes it easier to cut& paste to other widgets/pages.

#3

Hi, thanks for your reply. @mbc66
I am fairly new to this so I am not fully understanding.
I would like to use Global variables and ‘pass’ the users selection on to another page.

I have uploaded a file which I have removed everything else from so it just has the fields, if you would be willing to take a look, I would really appreciate your help.

Thanks :slight_smile: dropdown-and-boxes.rp (144.6 KB)

#4

Here is the basic process involved in passing data from one page to another. (Step “zero” would be creating global variables from Project > Global Variables and widgets on the pages of course.)

  1. Set the data on the first page.
    • As user makes choices/changes, assign values to global variables.
    • The value of a global variable is available to any page in the prototype, “globally.”
    • By default, a global variable has a “null” or empty value. You can set this initial value to any text or number needed in the Project > Global Variables dialog.
  2. (User navigates to another page in the prototype: the “second page”)
  3. When the second page loads, check the value of global variables and do what needs to be done, setting text values, changing selection states, dynamic panel states, hiding/showing/moving widgets, etc.
    • This can be done from the Page Loaded event.
    • This can be done on an individual widget’s or group’s Loaded event.
    • (Best to pick only one method from above to avoid confusion, your code canceling itself out, etc. Some people prefer to have all this in one place for each page, others prefer to keep it “localized” to each widget. Consider what works best for you, what you’d be likely to remember if you have to come back to this prototype at a later date, if others will also work on it, etc.)

So, on your Page 1 you’ve got a droplist widget named “Marital”, an identical one on Page 2 and you’ve created a global variable named Martial_status --all great (other than typo in global variable name but it will still work :slight_smile: ). I added an Interaction Event, Selection Changed to the droplist on Page 1 :
Set Variable Value Martial_status to selected option of This
Now whenever the user changes the selected item in this droplist, it will be tracked in that global variable.

Likewise, you’ve got three custom-designed checkboxes implemented as dynamic panels. (Not sure what the “ACTIVATED” state is all about, but I assume it serves some purpose.) You already have code to change the state to Next (and wrap) when user clicks a checkbox–great. I added three more global variables to track the state of each checkbox. I added an Interaction Event to each checkbox, State Changed, for example the “Phone” checkbox:
Set Variable Value Contact_Phone to state of This

That takes care of “Step 1” above. I added a Click or Tap event to your “Save and continue” button to load Page 2. Then, on Page 2 I notice you already had a Loaded event for the droplist to:
Set Variable Value Martial_status to value of Martial_status
I can tell what you were trying to do here, but this action merely sets the value of the global variable named Martial_status to the value of the global variable named Martial_status --which would not actually result in any change because it is setting the value to itself. Make sense? I changed this to:
Set Selected List Option of This to value of Martial_status

Likeswise, I added Loaded events for each checkbox to set the state of their dynamic panel, for example, the “Phone” checkbox:
Set Panel State of This to [[Contact_Phone]]
–Here, the name of the global variable is “Contact_Phone” and its value is accessed by wrapping it with double-square brackets. That is the syntax Axure uses to refer to variables and evaluate mathematical expressions. You can either type this into a “value” field of an event in the INTERACTIONS pane, or click the little “fx” icon at the right of these input fields to display the “Edit Value” dialog and then the “insert Variable or Function…” link, and look under “Global Variables” as described in my previous post above. You can learn more about using variables and math in Axure here:

So that’s it. When user makes a choice on Page 1 is is tracked in a global variable, and when Page 2 loads, it uses the value of those global variables to display those choices.

dropdown-and-boxes.rp (146.6 KB)

#5

Hi @mbc66
Thanks very much for all your help, your explanation really helped me understand the solution.

:slight_smile: