Using raised events for mixing up your masters

I’ve been playing around with making my current prototype more usable and dynamic in the last few days and have come across a cool but not well documented feature of  ‘raised events’. Essentially it allows you to add flexibility to your master’s in able to change page by page, and allow you to capture events fired inside a master (im sure there are more/better uses of raised events!)

I want to quick run through my scenario to demonstrate how you can capture an event within a master and apply it at the page level.

First up I have a ‘Logged in user’ style master consisting of two stages of dropdowns for  logged in user and ‘company’. Ultimately what I want to demonstrate is when I select a new option from the dropdown list (held inside a master)

Without this notion of ‘raised events’ there is no way of capturing the ‘OnChange’ action for the dropdown within the master, on the page you want to update.

Let me demonstrate with pictures below:

The user select’s his company from the following dropdown (which is contained within a master

Choosing an option for this drop down changes the text label with the selected option – pretty basic web application behaviour.

So changing the drop down changes the value of the bold company name in the text label above.

All of this seems relatively easy so far, but because the drop down is stored in a master within axure, there is no way of accessing the ‘OnChange’ variable from within the page (and therefore no way of telling when the user changes their selection in the dropdown.

The way of getting around this to use a ‘Raised Event’ within the master, which creates an action that can be captured on each instance of the page.

Let me demonstrate. First let’s show the page in the axure workspace.

The pink (red-ish?) section indicates the dropdown part is contained within a master; the rest of the page is directly editable.

So because we want to capture the action of user selecting a different option in the dropdown, the only we can do this is within the master itself, NOT the page.

Now we cant access the text label on the previous page within the master (and we may wont do different things on different pages), so we need to create a ‘raised event’ to capture the value of selected option and store it in a variable.

Add a variable (I call mine ‘selectedEmployer’) from the ‘Manager Variables’ option on the ‘Wireframe’ menu.

Now we have a variable, we can store the value of the selected dropdown option when the ‘OnChange’ action fires.. and also fire the special ‘Raised Event’ action so we can call it from our pages.

Alot to take in? Lets walk through it.

For the ‘OnChange’ action of the drop down list (within the master),  add an interaction case, and switch to advanced view (can do in basic view, but screens reflect advanced view)

For the action we want to do two things: captured the value of the selected dropdown value and store it in our variable AND fire a ‘Raised Event. The two actions in Azure you need to do this are:

‘Set value of variable and widget value(s) equal to value‘ AND

‘Raise Event’

First, set the variable to the selected dropdown value.

The logic should be fairly straight forward but is shown above for reference.

Next we need to create and fire a ‘Raised Event’

All we are doing here is creating an event that can be captured when the ‘OnChange’ fires, as we have no way of capturing the ‘OnChange’ action when we leave the master. Confused why we need this? All will be revealed when we try to access the action next.

Head back to the page we are working on and select the dropdown master within the page.

We can see the name of the ‘raised event’ we create and fired in the previous step (mine’s called changeEmployerName)

Now all we have to do is get the value stored within our drop down and do what we want with it on the page.

So within the ”changeEmployerName’ event, we want to create an action with the following condition:

‘if selected option of Log on Bar/Employer dropdown equals “[Value]”‘ – obviously changing [Value] to the appropriate value for your context

What you do once you have the value is up to you, I normally set the state of a dynamic panel show the result on the page, but there are many more applications.

Hope this helps when trying to make your prototypes more dynamic and like-like!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s