conditional logic, variables, & raised events in axure
DESCRIPTION
Loren Baxter & I put together this presentation to introduce you to some of Axure's most advanced features. Even long-time Axure users can get something out of it, including several undocumented conditional logic tricks.TRANSCRIPT
![Page 1: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/1.jpg)
Conditional Logic,Variables, & Raised Events
Presented by Loren Baxter & Fred Beecher
![Page 2: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/2.jpg)
Conditional Logic: WTF is it?
Conditional logic allows you to prototype dynamic interactions that respond to user input and actions in
real time.
![Page 3: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/3.jpg)
WTF do you use it for?Forms
• Dynamic feedback messages
• Conditional visibility of functionality
• In-field labels
Advanced Interactions
• Predictive search
• Faceted browsing
• Filtering & sorting
• Personalization
Streamlining Prototypes
• Reducing the number of dynamic panels/states required to prototype advanced interactions
• Dynamically configuring navigation masters that appear on all pages
• Dynamically supporting different functionality for different logins (user types)
![Page 4: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/4.jpg)
Variables: Isn’t that programming?
Variables allow you to remember data entered or selections made by users on one page and use it on
one or more pages
![Page 5: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/5.jpg)
Stuff you can do with variables• Store & display usernames
• Store states, e.g., whether a user is logged in or not
• Store user types to control what features are displayed
• Display the selected option of a dropdown from one page within the text of another page
• Use a shipping address entered on one page as a billing address on another page
• Keep track of which pages have been visited during a session
• Store user preferences to mimic sessions
![Page 6: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/6.jpg)
Raised events? Okay, seriously.
Raised events allow you to create custom interactions attached to different instances of the same master...
and if you understand any of that we’re very impressed and think that you should give the rest of
this talk.
Seriously though. We’ll explain for real. Promise.
![Page 7: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/7.jpg)
Conditional Logic
![Page 8: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/8.jpg)
How to create conditions
1. Double-click any interaction to create a new case
2. Click on “Add Condition” at the top of the case properties dialog
3. Use the Condition Builder dialog to specify the components of your condition
4. Choose to match all components or any component
You can create one condition per case. Multiple conditions on the same interaction require multiple cases.
![Page 9: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/9.jpg)
Conditions can be set on...• The value of a variable
• Whether a given checkbox or radio button is selected
• The current selection(s) in drop lists and list boxes
• Text displayed in a text field or text area
• The currently displayed state of a dynamic panel (awesome!)
• Whether a dynamic panel is currently visible (super awesome!)
• The number of characters in a text field or area (weird but useful)
• The number of characters in a variable (weird but occasionally useful)
![Page 10: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/10.jpg)
Enough talk! Let’s do stuff!Login form with feedback
1. Create dynamic panels for each field, with one state per error message
2. Set the panels to hidden
3. Add a case for each possible error to the OnClick interaction on the Login button, plus one for no error
4. If there is an error, change the state of the appropriate panel to the appropriate state
Wait... what if I want to display multiple errors at once?
We’ll talk about that in the Logic Tricks section coming up.
![Page 11: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/11.jpg)
A little more complex this time...Login form w/inline validation
1. Create the firsrt field and validation panel.
2. Create all the states of the validation panel.
3. Set up OnLostFocus logic on the first field.
4. Repeat for each new field, including case specific errors and logic.
5. Set up logic on submit button.appropriate panel to the appropriate state
![Page 12: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/12.jpg)
Conditional Logic Tricks• Executing more than one case at a time
• Choosing which case to execute dynamically
• Affecting the logic in the OnPageLoad interaction of a master through the OnPageLoad interaction of the pages they’re assigned to
![Page 13: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/13.jpg)
Executing Multiple CasesMultiple file upload with feedback
1. Create the first file upload field in a dynamic panel.
2. Create all states for the DP.
3. Set up the "Browse File" interaction to place text in the field.
4. Copy the DP a few times, update all labels and values (there are more than you think!)
5. Set the Upload button to check each field for text and set panel states accordingly. Be sure to change ELSE IF to IF.
![Page 14: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/14.jpg)
Letting the User ChooseChoosing cases manually
1. Create the "Weather" panel with empty, day, and night states.
2. Place the "Check Weather" button.
3. Create two onclick cases for the button, label each one.
4. Be sure not to set any conditions.
![Page 15: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/15.jpg)
Variables
![Page 16: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/16.jpg)
Variables let you do 3 things1. Store a text value
2. Read that value
3. Check how many characters the value is
But before you do anything, you need to create them!
![Page 17: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/17.jpg)
How to create variables
1. Go to Wireframe > Manage Variables or
2. Click on “Add New...” at the bottom of the variable list on the Condition Builder dialog or the Set Variable dialog
There are two ways...
Variable names must contain 25 characters or less and be alphanumeric
![Page 18: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/18.jpg)
Variables have issues, just like usIssues
• Internet Explorer chokes if you use too many variables
• Navigating through your prototype with the generated site map clears variable values
• Variable values can stick around between user tests
Solutions
• Don’t use IE, or...
• Limit yourself to 25 variables
• You can’t do much about this other than be aware of it if your prototype starts having problems
• Add a hidden button on the first page of your prototype that does nothing but set all variable values to blank
![Page 19: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/19.jpg)
Enough talk! Let’s do stuff!Persistent font size selector
1. Create the page structure and fill in homepage.
2. Create a DP that contains the diff font sizes.
3. Set up the font size buttons to change the DP and set the FontSize variable.
4. Use onPageLoad to set the proper DP state.
5. Make the Article pages similarly and link it all together.
![Page 20: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/20.jpg)
Telling people who they arePersistent username display
1. Create the login UI
2. Make clicking the Log In button store the username in a variable and go to another page.
3. Create a master with a text panel that will display the username
4. Assign that master to every page
5. On OnPageLoad of the master, make it so the text panel shows the username if the username variable isn't blank
![Page 21: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/21.jpg)
Variable Tricks• Inserting variable text into text panels, fields, & areas
• Recursively inserting variable text into text panels, fields, & areas
• “Borrowing” variables temporarily
• Affecting the logic in the OnPageLoad interaction of a master through the OnPageLoad interaction of the pages they’re assigned to
Make sure to check out Loren & Jeff ’s Tips & Tricks panel for INSANE variable weirdness!
![Page 22: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/22.jpg)
Getting Fancier with VariablesEntering a pin via keypad
1. Create the keypad and textfield.
2. Set up the CurrentDigits variable.
3. Create the button logic:
• Check for four digits
• Insert the new digit
• Check for success condition
4. Copy the logic to each button, update the specifics.
![Page 23: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/23.jpg)
OnPageLoad Order• Masters have OnPageLoad too!
• When a page loads, the page’s OnPageLoad interaction is executed before the OnPageLoad of any masters on the page
• This lets you streamline dynamic prototypes by allowing you to put complex logic & cases on a master once rather than on multiple pages
Okay, so how?
1. On master OnPageLoads, create conditions based on the value of a variable
2. On page OnPageLoads, set the value of the variable that master OnPageLoads are evaluating
![Page 24: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/24.jpg)
OnPageLoad Order - ExampleStatic accordion navigation1. Create a side-nav master composed of one
single-state dynamic panel per main nav item
2. Add a transparent rectangle with the link text to the panel state (define selected style)
3. Create a second panel & add the sub-navigation links to it & set it to hidden
4. Create a variable called NavVar
5. Add one case for each main nav item to the master’s OnPageLoad interaction
6. Make each case conditional on a different value of NavVar
7. On each case, set it to make the nav link selected, show the subnav panel, & move the panels below it down
8. Set the appropriate value of NavVar on each page’s OnPageLoad interaction
OnPageLoad - Page
OnPageLoad - Master
![Page 25: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/25.jpg)
Raised Events
![Page 26: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/26.jpg)
Crappy name, awesome feature
Part 1: Raise an event
1. Add the “Raise Event” action to any interaction on a widget within a master
2. Add an event, paying attention to syntax, and select it
Part 2: Use the custom interaction
1. Drag an instance of the master to a page and select it
2. Check out the interactions pane... the event you raised shows up as an interaction!
3. Assign actions to the interaction like normal
Raised events allow you to make masters that can affect objects outside of them through custom interactions
Interactions Pane - Master Instance
Interactions Pane - Widget on Master
![Page 27: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/27.jpg)
Uses for raising events1. Re-using interactive functionality that needs to affect widgets outside
itself
2. Re-using interactive functionality that needs to work slightly differently in each instance
3. Creating & maintaining a tightly controlled pattern library
![Page 28: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/28.jpg)
Faceted Navigation1. Create a master composed of one single-
state dynamic panel per facet
2. Add a transparent rectangle with the link text to the panel state (define selected style)
3. Create a second panel with enough states to accommodate all values that can be selected. Add value links to the default state.
4. Add the Raise Event action to EVERY value link
5. Add actions for affecting the facets to appropriate value links (setting panel states, moving panels, hiding, toggling selected)
6. Add Facets master to a page
7. Create a results list dynamic panel
8. Assign Set Panel State actions to the raised events to allow choosing a facet value to switch the state of the results panel
Facet Master & Item List
![Page 29: Conditional Logic, Variables, & Raised Events in Axure](https://reader031.vdocuments.us/reader031/viewer/2022013121/54c7650b4a79599a1a8b465e/html5/thumbnails/29.jpg)
Fred Beecher
@fred_beecher
Loren Baxter
@lorenbaxter