Download MP4

Another common interaction for the OnPageLoad event is to set the text on a widget to a value stored in a variable. For example, if you have a variable that stores a name, you might set a widget to

"Welcome, [[NameVar]]".

Learn more about this in the variables article.

Ta-da! You just learned how to initialize a page with the OnPageLoad event.

Download RP File | Demo Prototype

This example uses OnPageLoad, masters, widget styles and the "Set Widget(s) to Selected State" action to highlight a navigation item to reflect the current page.

A common use of the OnPageLoad event is to highlight a navigation item like a menu item in a menu or a button shape to indicate the current

page.

If your page contains button shapes or a menu with selected styles

defined, you can use the “Set Widget(s) to Selected Style” action in the OnPageLoad event, to highlight the menu item or button shape when the page loads.

If you need to brush up on how to add widget styles, head over to

the Widget Styles article.

Add cases to the OnPageLoad event the same way you do with widget events. Just like with widget interactions, you can perform any of the actions available and as many as needed. You can also use conditional logic to determine how to initialize the page. Frequently, this involves conditions based on variable values.

The OnPageLoad event allows you to create interactions that fire on the load of a page. You can find the OnPageLoad event in the Page Interactions tab in the Page Properties pane below the Wireframe pane. This can be useful for performing actions like highlighting a menu item in a menu, setting a dynamic panel to a specific state, and inserting variable values into widget text.

In this article, learn how to use the OnPageLoad event to initialize pages like highlighting a navigation item, setting a dynamic panel state, and setting the text on a widget.

You can also add page load interactions in masters. The OnPageLoad event on a master fire when a page that contains the masters loads in the prototype. If the page also has an OnPageLoad interaction, the cases on the master will occur after the ones defined on the page.

Using a combination of conditional logic, variables and the Set Panel State to State action, you can set a dynamic panel to a state based on the value stored in the variable. For example, if you have a variable keeping track of whether the user is logged in, you might set a panel to a login state or a logout state accordingly.

Learn more about this in the variables article.

Have questions? Drop us a line at support@axure.com, tweet us at @axurerp, or write on our Facebook wall.