How to write conditional logic where "If (W or X or Y) and Z are true"

advanced-prototyping
#1

I’m struggling to figure out how to write a condition where any of W, X, or Y are true AND Z are true.

For instance:

If any of W or X or Y are visible AND Z is hidden, show A.
If / Else if any of W or X or Y are hidden AND Z is visible, hide A.

I’m sure I must be missing something very obvious. Is there a way to do this in Axure?

#2

The basic way to do this in Axure is to set up multiple “Else If” conditional cases. For anyone who has used a modern programming language this can seem tedious and inefficient, but it is pretty straightforward. For your requirements it would look something like:

  • Case 1
    If visibility of W equals true and visibility of Z equals false
    Show A
  • Case 2
    Else If visibility of X equals true and visibility of Z equals false
    Show A
  • Case 3
    Else If visibility of Y equals true and visibility of Z equals false
    Show A
  • Case 4
    Else If visibility of W equals false and visibility of Z equals true
    Hide A
  • Case 5
    Else If visibility of X equals false and visibility of Z equals true
    Hide A
  • Case 6
    Else If visibility of Y equals false and visibility of Z equals true
    Hide A

There is a way to use Boolean logic in an expression to combine a compound condition like this, but only for available properties of a widget, and alas, visibility is not an available widget property. However, opacity (percentage as a whole number between 0–100) or selection state {true = Selected, false = Unselected} are available. So, rather than truly hiding/showing W, X, Y, Z you could set their opacity to 0 (to make it invisible) and 100 (to make it visible.) Or, you can set a normal/default style with Opacity:0 and a Selected Style of Opacity:100 (and set your widgets’ default selection state to Selected so they are shown by default.) Then you can toggle the widgets’ selection state in the same manner you would toggle visibility, where Selected = visible and Unselected = invisible. Using Selection States and Styles like this makes things easier in several regards, so your conditional cases would look something like this:

  • Case 1
    If [[ (varW || varX || varY) && !varZ ]] equals true
    Show A
  • Case 2
    Else If [[ (!varW || !varX || !varY) && varZ ]] equals true
    Hide A
  • Where varW is a “local variable” pointer to “is selected of” widget W, and same for varX, etc. Note that ‘||’ is the Boolean “OR” operator, ‘&&’ is the Boolean AND operator, and ‘!’ is the Boolean NOT operator, so “(varW || varX)” means “either W or X are selected”, and “!varZ” means “Z is not selected”

Here is a demonstration of both these approaches, each on its own page
Compound Conditional Logic.rp (99.2 KB)

*It occurs to me there is a potential issue with the second approach. Setting the opacity of a widget to 0 is not identical to hiding it, because even though the user cannot see either, they can still interact with a widget that has zero opacity, and that widget would block interactions for any widgets behind it. However, a user cannot interact with a hidden widget–and neither would a hidden widget block anything behind it. If this matters in your prototype, you could create a Hidden event for each W, X, Y, Z widget with an action of “Set Selected of This to false”, and a Shown event for each with an action of “Set Selected of This to true”. Then you could hide and show each widget normally, and that will automatically take care of the selection state for use in your logic.

#3

Great! Thanks! I’ll give this a try and let you know how it goes.