In this article by John Henry Krahenbuhl, the author of the book, Axure Prototyping Blueprints, we determine that with modification, we can use all of the masters from the previous community site. To support our new use cases, we need additional registration variables, a master to support user registration, and interactions for the creation of, and to comment on, posts.

Next we will create global variables and add new masters, as well as enhance the design and interactions for each master.

(For more resources related to this topic, see here.)

Creating additional global variables

Based on project requirements, we identified that nine global variables will be required. To create global variables, on the main menu click on Project and then click on Global Variables…. In the Global Variables dialog, perform the following steps:

1. Click the green + sign and type Email. Click on the Default Value field and type [email protected].
2. Repeat step 1 eight more times to create additional variables using the following table for the Variable Name and Default Value fields:
   

   Variable Name	Default Value
   Password	Grammy
   UserEmail
   UserPassword
   LoggedIn	No
   TopicIndex	0
   UserText
   NewPostTopic
   NewPostHeadline

3. Click on OK.

With our global variables created, we are now ready to create new masters, as well as update the design and interactions for existing masters. We will start by adding masters to the Masters pane.

Adding masters to the Masters pane

We will add a total of two masters to the Masters pane. To create our masters, perform the following steps:

1. In the Masters pane, click on the, Add Master icon ,type PostCommentary and press Enter.
2. Again, in the Masters pane, click on the Add Master icon , type NewPost and press Enter.
3. In the same Masters pane, right-click on the icon next to the Header master, mouse over Drop Behavior and click on Lock to Master Location.

We are now ready to remodel the existing masters and complete the design and interactions for our new masters. We will start with the Header master.

Enhancing our Header master

Once completed, the Header master will look as follows:

To update the Header master, we will add an ErrorMessage label, delete the Search widgets, and update the menu items. To update widgets on the Header master, perform the following steps:

1. In the Masters pane, double-click on the icon  next to the Header master to open in the design area.
2. In the Widgets pane, drag the Label widget  and place it at coordinates (730,0).
3. Now, select the Text Field widget and type Your email or password is incorrect..
4. In the Widget Interactions and Notes pane, click in the Shape Name field and type ErrorMessage.
5. In the Widget Properties and Style pane, with the Style tab selected, scroll to Font and perform the following steps:
   1. Change the font size to 8.
   2. Click on the down arrow next to the Text Color icon . In the drop-down menu, in the # text field, enter FF0000.
   3. In the toolbar, click on the checkbox next to Hidden.
6. Click on the EmailTextField at coordinates (730,10). If text is displayed on the text field, right-click and click Edit Text. All text on the widget will be highlighted, click on Delete. In the Widget Properties and Style pane, with the Properties tab selected, scroll to Text Field and perform the following steps:
   1. Next to Hint Text, enter Email.
   2. Click Hint Style. In the Set Interaction Styles dialog box, click on the checkbox next to Font Color. Click on the down arrow next to the Text Color icon . In the drop-down menu, in the # text field, enter 999999. Click on OK.
7. Click on the PasswordTextField at coordinates (815,10). If text is displayed on the text field, right-click and click on Edit Text. All text on the widget will be highlighted, press Delete.
8. In the Widget Properties and Style pane, with the Properties tab selected, scroll to Text Field and perform the following steps:
   1. Click on the drop-down menu next to Type and select Password.
   2. Next to Hint Text, enter Password.
   3. Click on Hint Style. In the Set Interaction Styles dialog box, click on the checkbox next to Font Color. Click on the down arrow next to the Text Color icon . In the drop-down menu, in the # text field, enter 999999.
   4. Click on OK.
9. Click on the SearchTextField at coordinates (730,82) and then on Delete.
10. Click on the SearchButton at coordinates (890,80) and then on Delete.

Next, we will convert all the Log In widgets into a dynamic panel named LoginDP. The LoginDP will allow us to transition between states and show different content when a user logs in. To create the LoginDP, in our header, select the following widgets:

Named Widget	Coordinates
ErrorMessage	(730,0)
EmailTextField	(730,10)
PasswordTextField	(815,10)
LogInButton	(894,10)
NewUserLink	(730,30)
ForgotLink	(815,30)

With the preceding six widgets selected, right-click and click Convert to Dynamic Panel.

In the Widget Interactions and Notes pane, click on the Dynamic Panel Name field and type LogInDP. All the Log In widgets are now on State1 of the LogInDP.

We will now add widgets to State2 for the LogInDP. With the Log In widgets converted into the LogInDP, we will now add and design State2. In the Widget Manager pane, under the LogInDP, right-click on State1, and in the menu, click on Add State. Click on the State icon beside  State2 twice, to open in the design area. Perform the following steps:

1. In the Widgets pane, drag the Label widget  and place it at coordinates (0,13) and do the these steps:
   1. Type Welcome, [email protected].
   2. In the Widget Interactions and Notes pane, click in the Shape Name field and type WelcomeLabel.
   3. In the Widget Properties and Style pane, with the Style tab selected scroll to Font, change the font size to 9, and click on the Italic icon .
2. In the Widgets pane, drag the Button Shape widget  and place it at coordinates (164,10). Type Log Out. In the toolbar, change w: to 56 and h: to 16. In the Widget Interactions and Notes pane, click on the Shape Name field and type LogOutButton.

To complete the design of the Header master, we need to rename the menu items on the HzMenu. In the Masters pane, double-click on the Header master to open in the design area. Click on the HzMenu at coordinates (250,80). Perform the following steps:

1. Click on the first menu item and type Random Musings. In the Widget Interactions and Notes pane, click on the Menu Item Name field and type RandomMusingsMenuItem. Click on Case 1 under the OnClick event and press the Delete key. Click on Create Link…. In the pop-up sitemap, click on Random Musings.
2. Again, click on the first menu item and type Accolades and News. In the Widget Interactions and Notes pane, click on the Menu Item Name field and type AccoladesMenuItem. Click on Case 1 under the OnClick event and press the Delete key. Click on Create Link…. In the pop-up sitemap, click on Accolades and News.
3. Click on the first menu item and type About. In the Widget Interactions and Notes pane, click on the Menu Item Name field and type AboutMenuItem. Click on Case 1 under the OnClick event and press the Delete key. Click on Create Link…. In the pop-up sitemap, click on About.

We will now create a registration lightbox that will be shown when the user clicks on the NewUserLink.

To display a dynamic panel in a lightbox, we will use the OnShow action with the option treat as lightbox set. We will use the Registration dynamic panel’s Pin to Browser property to have the dynamic panel shown in the center and middle of the window. Learn more at http://www.axure.com/learn/dynamic-panels/basic/lightbox-tutorial.

1. In the Masters pane, double-click on the icon  next to the Header master to open in the design area. In the Widgets pane, drag the Dynamic Panel widget  and place it at coordinates (310,200). In the toolbar, change w: to 250, h: to 250, and click on the Hidden checkbox. In the Widget Interactions and Notes pane, click on the Dynamic Panel Name field and type RegistrationLightBoxDP. In the Widget Manager pane with the Properties tab selected, click on Pin to Browser. In the Pin to Browser dialog box, click on the checkbox next to Pin to browser window and click on OK.
2. In the Widget Manager pane, under the RegistrationLightBoxDP, click on the State icon  beside State1 twice to open in the design area.
3. In the Widgets pane, drag the Rectangle widget  and place it at coordinates (0,0). In the Widget Interactions and Notes pane, click on the Shape Name field and type BackgroundRectangle. In the toolbar, change w: to 250 and h: to 250.
4. Again in the Widgets pane, drag the Heading2 widget  and place it at coordinates (25,20).
5. With the Heading2 widget selected, type Registration. In the toolbar, change w: to 141 and h: to 28.
6. In the Widget Interactions and Notes pane, click on the Shape Name field and type RegistrationHeading.
7. Repeat steps 8-10 to complete the design of the RegistrationLightBoxDP using the following table (* if applicable):
   

   Widget	Coordinates	Text* (Shown on Widget)	Width* (w:)	Height* (h:)	Name field (In the Widget Interactions and Notes pane)
   Label	(25,67)	Enter Email			EnterEmailLabel
   Text Field	(25,86)				EnterEmailField
   Label	(25,121)	Enter Password			EnterPasswordLabel
   Text Field	(25,140)				EnterPasswordField
   Button Shape	(25,190)	Submit	200	30	SubmitButton

8. Click on the EnterEmailField text field at coordinates (25,86). In the Widget Properties and Style pane, with the Properties tab selected, scroll to Text Field and perform the following steps:
   1. Next to Hint Text, enter Email. Click on Hint Style. In the Set Interaction Styles dialog box, click on the checkbox next to Font Color. Click on the down arrow next to the Text Color icon . In the drop-down menu, in the # text field, enter 999999.
   2. Click on OK.
9. Click on the EnterPasswordField text field at coordinates (25,140). In the Widget Properties and Style pane, with the Properties tab selected, scroll to Text Field and perform the following steps:
   1. Click on the drop-down menu next to Type and select Password.
   2. Next to Hint Text, enter Password.
   3. Click on Hint Style. In the Set Interaction Styles dialog box, click on the checkbox next to Font Color. Click on the down arrow next to the Text Color icon . In the drop-down menu, in the # text field, enter 999999.
   4. Click on OK.
10. With the updates completed for the Header master, we are now ready to define the interactions.

Refining the interactions for our Header master

We will need to add additional interactions for Log In and Registration on our Header master.

Interactions with our Header master will be triggered by the following named widgets and events:

Dynamic Panel	State	Widget	Event
LoginDP	State1	LoginButton	OnClick
LoginDP	State1	NewUserLink	OnClick
LoginDP	State1	ForgotLink	OnClick
LoginDP	State2	LogOutButton	OnClick
RegistrationLightBoxDP	State1	SubmitButton	OnClick

We will now define the interactions for each widget, starting with LoginButton.

Defining interactions for the LoginButton

When the LoginButton is clicked, the OnClick event will evaluate if the text entered in the EmailTextField and PasswordTextField equals the e-mail and password variable values. If the variables are valid, LoginDP will be set to State2 and text on the WelcomeLabel will be updated. If the variables values are not equal, we will show an error message. We will define these actions by creating two cases: ValidateUser and ShowErrorMessage.

Validating the user’s email and password

To define the ValidateUser case for the OnClick interaction, open the LogInDP State1 in the design area. Click on the LogInButton at coordinates (164,10). In the Widget Interactions and Notes pane with the Interactions tab selected, click on Add Case…. A Case Editor dialog box will open. In the Case Name field, type ValidateUser. In the Case Editor dialog, perform the following steps:

You will see the Condition Builder window similar to the one shown in the following screenshot after the first and second conditions are defined:

1. Create the first condition. Click on the Add Condition button.
2. In the Condition Builder dialog box, in the outlined condition box, perform the following steps:
   1. In the first dropdown, select text on widget.
   2. In the second dropdown, select EmailTextField.
   3. In the third dropdown, select equals.
   4. In the fourth dropdown, select value.
   5. In the fifth dropdown, select [[Email]].
   6. Click the green + sign.
3. Create the second condition. Click on the Add Condition button.
4. In the Condition Builder dialog box, in the outlined condition box, perform the following steps:
   1. In the first dropdown, select text on widget.
   2. In the second dropdown, select PasswordTextField.
   3. In the third dropdown, select equals.
   4. In the fourth dropdown, select value.
   5. In the fifth dropdown, select [[Password]].
   6. Click on OK.
5. Once the following three actions are defined, you should see the Case Editor similar to the one shown in the following screenshot:

   

6. Create the first action. To set panel state for the LogInDP dynamic panel, perform the following steps:
   1. Under Click to add actions, scroll to the Dynamic Panels drop-down menu and click on Set Panel State.
   2. Under Configure actions, click on the checkbox next to LoginDP.
   3. Next to Select the state, click on the dropdown and select State2.
7. Create the second action. To set text for the WelcomeLabel, perform the following steps:
   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Set Text.
   2. Under Configure actions, click the checkbox next to WelcomeLabel.
   3. Under Set text to, click on the dropdown and select value. In the text field, enter Welcome, [[Email]].
8. Create the third action. To set value of the LoggedIn variable, perform the following steps:
   1. Under Click to add actions, scroll to the Variables drop-down menu and click on Set Variable Value.
   2. Under Configure actions, click on the checkbox next to LoggedIn.
   3. Under Set variable to, click on the first dropdown and click on value. In the text field, enter [[Email]].
   4. Click on OK.

With the ValidateUser case completed, next we will create the ShowErrorMessage case.

Creating the ShowErrorMessage case

To create the ShowErrorMessage case, in the Widget Interactions and Notes pane with the Interactions tab selected, click on Add Case…. A Case Editor dialog box will open. In the Case Name field, type ShowErrorMessage. Create the action. To show the ErrorMessage label, perform the following steps:

1. Under Click to add actions, scroll to the Widgets dropdown, click on the Show/Hide dropdown and click on Show.
2. Under Configure actions, under LoginDP dynamic panel, click on the checkbox next to ErrorMessage.
3. Click on OK.

Next, we will enable the interaction for the NewUserLink.

Enabling interaction for the NewUserLink

When the NewUserLink is clicked, the OnClick event will show the RegistrationLightBox dynamic panel as a lightbox, as shown in the following screenshot:

With the LogInDP State1 still opened in the design area, click on the NewUserLink at coordinates (0,30). To enable the OnClick event in the Widget Interactions and Notes pane with the Interactions tab selected, click on Add Case…. A Case Editor dialog box will open. In the Case Name field, type ShowLightBox. Now, create the action; to show the RegistrationLightBox, perform the following steps:

1. Under Click to add actions, scroll to the Widgets dropdown, click on the Show/Hide dropdown, and click on Show.
2. Under Configure actions, click on the checkbox next to RegistrationLightBoxDP.
3. Next go to More options, click on the dropdown and select treat as lightbox.
4. Click on OK.

Next, we will activate interactions for the ForgotLink.

Activating interactions for the ForgotLink

When the ForgotLink is clicked, the OnClick event will show the RegistrationLightBox dynamic panel as a lightbox, the RegistrationHeading text will be updated to display Forgot Password? and the EnterPassworldLabel, as well as the EnterPasswordField, will be hidden.

To enable the OnClick event, in the Widget Interactions and Notes pane with the Interactions tab selected, click on Add Case…. A Case Editor dialog box will open. In the Case Name field, type ShowForgotLB. In the Case Editor dialog, perform the following steps:

1. Create the first action; to show the RegistrationLightBox, perform the following steps:
   1. Under Click to add actions, scroll to the Widgets dropdown, click on the Show/Hide dropdown and click on Show.
   2. Under Configure actions, click on the checkbox next to RegistrationLightBoxDP.
   3. Next, go to More options, click on the dropdown and select treat as lightbox.
2. Create the second action; to set text for the RegistrationHeading, perform the following steps:
   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Set Text.
   2. Under Configure actions, click on the checkbox next to RegistrationHeading.
   3. Under Set text to, click on the dropdown and select value. In the text field, enter Forgot Password?.
3. Create the third action; to hide the EnterPasswordLabel and EnterPasswordField, perform the following steps:
   1. Under Click to add actions, scroll to the Widgets dropdown, click on the Show/Hide dropdown, and click on Hide.
   2. Under Configure actions, under RegistrationLightBoxDP, click on the checkboxes next to EnterPasswordLabel and EnterPasswordField.
   3. Click on OK.

We have now completed the interactions for State1 of LoginDP. Next, we will facilitate interactions for the LogOutButton.

Facilitating interactions for the LogOutButton

When the LogOutButton is clicked, the OnClick event will perform the following actions:

• Hide the ErrorMessage on the LoginDP State1
• Set text for PasswordTextField and EmailTextField
• Set panel state for LoginDP to State1
• Set variable value for LoggedIn

To enable the OnClick event, open the LogInDP State2 in the design area. Click on the LogInOut at coordinates (164,10). In the Widget Interactions and Notes pane, with the Interactions tab selected, click on Add Case…. A Case Editor dialog box will open. In the Case Name field, type LogOut. In the Case Editor dialog, perform the following steps:

1. Create the first action; to hide the ErrorMessage, perform the following steps:
   1. Under Click to add actions, scroll to the Widgets dropdown, click on the Show/Hide dropdown, and click on Hide.
   2. Under Configure actions, under LoginDP, click on the checkbox next to ErrorMessage.
2. Create the second action; to set text for the PasswordTextField and EmailTextField, perform the following steps:
   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Set Text.
   2. Under Configure actions, click the checkbox next to PasswordTextField.
   3. Under Set text to, click the dropdown and select value. In the text field, clear any text shown.
   4. Under Configure actions, click the checkbox next to EmailTextField.
   5. Under Set text to, click on the dropdown and select value. In the text field, enter Email.
3. Create the third action; to set panel state for the LogInDP dynamic panel, perform the following steps:
   1. Under Click to add actions, scroll to the Dynamic Panels drop-down menu and click on Set Panel State.
   2. Under Configure actions, click on the checkbox next to LoginDP.
   3. Next to Select the state, click on the dropdown and select State1.
4. Create the fourth action. To set variable value of LoggedIn, perform the following steps:
   1. Under Click to add actions, scroll to the Variables drop-down menu and click on Set Variable Value.
   2. Under Configure actions, click on the checkbox next to LoggedIn.
   3. Under Set variable to, click on the first dropdown and click on value. In the text field, enter No.
   4. Click on OK.

We have now completed interactions for State2 of the LoginDP. Next, we will construct interactions for the RegistrationLightBoxDP.

Constructing interactions for the RegistrationLightBoxDP

When the LoginButton is clicked, the OnClick event hides RegistrationLightBoxDp and sets the Email and Password variable values to the text entered in the EnterEmailField and EnterPasswordField. Also, if text on the RegistrationHeading label is equal to Registration, LoginDP will be set to State2. We will define these actions by creating two cases: UpdateVariables and ShowLogInState.

Updating Variables and hiding the RegistrationLightBoxDP

In the Widget Manger pane, double-click on the RegistrationLightBoxDP State1 to open in the design area. To define the UpdateVariables case for the OnClick interaction, click on the SubmitButton at coordinates (25,190). In the Widget Interactions and Notes pane with the Interactions tab selected, click on Add Case…. A Case Editor dialog box will open. In the Case Name field, type UpdateVariables. In the Case Editor dialog, perform the following steps:

The following screenshot shows Case Editor with the actions defined:

1. Create the first action; to set variable value for the Email and Password variables, perform the following steps:
   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Set Variable Value.
   2. Under Configure actions, click on the checkbox next to Email.
   3. Under Set variable to, click on the first dropdown and select text on widget. Click on the second dropdown and select EnterEmailField.
   4. Under Configure actions, click on the checkbox next to Password.
   5. Under Set variable to, click on the first dropdown and select text on widget. Click on the second dropdown and select EnterPasswordField.
2. Create the second action; to hide RegistrationLightBoxDP, perform the following steps:
   1. Under Click to add actions, scroll to the Widgets dropdown, click on the Show/Hide dropdown and click on Hide.
   2. Under Configure actions, click on the checkbox next to RegistrationLightBoxDP.
   3. Click on OK.

With the UpdateVariables case completed, next we will create the ShowLogInState case.

Creating the ShowLoginState case

To create the ShowLogInState case, in the Widget Interactions and Notes pane with the Interactions tab selected click on Add Case…. A Case Editor dialog box will open. In the Case Name field, type ShowLogInState. In the Case Editor dialog, perform the following steps:

1. Click on the Add Condition button to create the first condition.
2. In the Condition Builder dialog box, go to the outlined condition box and perform the following steps:
   1. In the first dropdown, select text on widget.
   2. In the second dropdown, select RegistrationHeadline.
   3. In the third dropdown, select equals.
   4. In the fourth dropdown, select value.
   5. In the fifth dropdown, select Registration.
   6. Click on OK.
3. Create the first action; to set text for the WelcomeLabel, perform the following steps:
   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Set Text.
   2. Under Configure actions, click on the checkbox next to WelcomeLabel.
   3. Under Set text to, click on the dropdown and select value. In the text field, enter Welcome, [[Email]].
   4. Click on OK.
4. Create the second action; to set panel state for the LogInDP dynamic panel, perform the following steps:
   1. Under Click to add actions, scroll to the Dynamic Panels drop-down menu and click on Set Panel State.
   2. Under Configure actions, click on the checkbox next to LoginDP.
   3. Next to Select the state, click on the dropdown and select State2.
5. Create the third action; to set value of the LoggedIn variable, perform the following steps:
   1. Under Click to add actions, scroll to the Variables drop-down menu and click on Set Variable Value.
   2. Under Configure actions, click on the checkbox next to LoggedIn.
   3. Under Set variable to, click on the first dropdown and click on value. In the text field, enter [[Email]].
   4. Click on OK.
6. Under the OnClick event, right-click on the ShowErrorMessage case and click on Toggle IF/ELSE IF.

With our Header master updated, we are now ready to refresh data for our Forum repeater.

Summary

We learned how to leverage masters and pages from our community site to create a new blog site. We enhanced the Header master and refined the interactions for our Header master.

Resources for Article:

---

Further resources on this subject:

• Home Page Structure [article]
• Axure RP 6 Prototyping Essentials: Advanced Interactions [article]
• Common design patterns and how to prototype them [article]

---