(This post is part two of a series. Part one is here.)

For this installment of our Easy Conditions blog series, I want to look at how conditions work together with masters. I’ve put together a pretty standard three-page prototype in order to demonstrate what I’ll be discussing, as shown in the animation below. And I’ve built it two different ways: one example uses conditions, and the other does not.

Click here to download the .rp files.

Here’s the “no conditions” version on Axure Share.

Here’s the “with conditions” version on Axure Share.

Animation showing the Orange University prototype loaded in a browser, clicking between its three pages

In general, masters are best used for design elements that will remain the same from page to page. In my design you can see that the site header remains the same as you click between pages, making it a good candidate for being a master—and so it is, in both example files. The banner image, on the other hand, changes from page to page. In a world without conditions, we’d need to build this as a separate image on each page, and that’s what I’ve done in the “no conditions” example file.

But if we use a few simple conditions—or a single simple condition, actually, repeated three times—we can centralize our banner images and locate them in the same master that contains the rest of the header. This is what I’ve done in the “with conditions” example file. The technique is implemented in the “page header” master, on the OnPageLoad event, like so:

OnPageLoad:

Case 1
(If “[[PageName]]” equals “About Orange”):
Set banner image to State1

Case 2
(Else If “[[PageName]]” equals “Academics”):
Set banner image to State2

Case 3
(Else If “[[PageName]]” equals “Admission”):
Set banner image to State3

I’ve placed my three banner images in a dynamic panel, one image per panel state. Then, in the condition, I’ve used the “value” operator to specify that something should happen when the viewer of my prototype loads a page with a certain name. Here’s a little animation of how I built the condition using the Condition Builder dialog:

Animation showing a condition being constructed in the Condition Builder dialog in the Axure RP UI

Once the condition is built, I simply specify in the case the action that should happen when the condition is met. In this particular example, I want to set the “banner image” dynamic panel to the state that corresponds to the page my viewer has loaded.

– – –

You may have noticed that the page title also changes between pages, but that it’s located in a master even in my “no conditions” example file. How did I achieve this? I used that “PageName” system variable again, which we just used above,  to set the text of that page title widget to whatever the name of the page is at the moment the new page loads. (It’s pretty clever, check it out in the downloadable .rp file!) This technique works well if the page names in your Axure RP file are formatted the way you want your page titles to be displayed in the prototype content. If that’s not the case, though, you can use the conditions-dependent approach described in the first part of this article to set the text on the page title widget to whatever you’d like when a given page is loaded.

As with most structures in Axure RP, there’s more than one way to build the prototype I’ve shown you today. If you’re comfortable with conditions, you can leverage their power and flexibility to get the level of interactive fidelity you need in fewer steps and with less reworking and upkeep required as you continue to develop your design.

Share this: