Building and Using Masters

Masters in iRise are the key to building reusable assets that can be used throughout a project, or even across projects. Along with templates and styles, they can greatly accelerate the process of building software visualizations in iRise.

Watch a Video

Watch this video for a brief demonstration of the topics covered in this tutorial.

What is a master?

Masters are customized components that allow you to reuse content throughout your simulation. You can add both static and dynamic content to a master – anything you can add to a page in iRise, you can add to a master.

Masters are commonly used for any content that gets used repeatedly throughout a project, or even across projects. Common examples are page headers and footers, navigation menus, and breadcrumb trails. In the example of a header, instead of creating the header each time for each page, you can create that header once and reuse it on every page where it is needed. Any changes made to the master itself will show up on every page where the master is referenced. This enables a “build once, use often” simulation approach that can increase your speed and efficiency many times over.

Masters example

When you are working in a master, the appearance of the workspace is somewhat different from that of a page. The functionality, however, is exactly the same. You can resize the master as needed by clicking and dragging its boundary lines or by using the height and width attributes in the Properties panel. Once your master is sized appropriately, the process of adding content and creating dynamic behaviors within the master is identical to that of building out a page.

Creating a header master

In this example, we’ll create a master that will serve as a page header for multiple pages within our simulation. The master will contain some standard components that one might expect to see in a header, including a background color and some text. Although this will be a low-fidelity master that we might use while assembling initial wireframes of our pages, the fact that we are using a master to build these wireframes simplifies the process of updating them to higher levels of fidelity later on.

Create the master

To create the master in your Directory, expand the new component menu above the Directory panel and choose Master. Rename that master to “Header”. Now we need to resize the master to a typical header height and width. With the master displayed in your workspace, set its dimensions in the Properties panel to 1024 x 150.

After setting the dimensions, we’ll add a background color and text to provide a visual designation of a header placeholder for your page. With the master still displayed in your workspace, click the paint bucket icon in the Formatting Toolbar, and choose a color to your liking. Now add a single Text widget near the center of the master that contains the text “HEADER MASTER”.

Tip

Always name your masters descriptively so you can find them quickly in the Directory panel. For this reason, and to facilitate the import of these assets into other projects, it’s also a good idea to store them in an appropriately named Directory folder (e.g., “Reusable Assets”).

Apply the master

Once you’ve created your master, adding it to a page (or template) is a simple task. With the destination page displayed in your workspace, simply click and drag the master from the Directory panel into position on the page. Once you have the master on the page, you can use the master’s x/y coordinates in the Properties panel to get a more precise placement of the master. For a header, you will most likely want the master’s position to be 0, 0. Repeat this process for two or three pages in your project.

Update the master

Now that we have our master on multiple pages in our simulation, let’s make some updates to see how these changes propagate to all of the instances of the master in our project. To return to the master, either select it in your Directory panel or double-click one of the instances on a page.

First, add an Image widget containing your company logo (or another image) to the left side of the master. Now create navigation from that logo to your organization’s web site. To do this, right-click the image and choose Add Event > Link. When the Set Destination dialog box appears, choose Link to Website on the left, and then type the website URL on the right. When you are finished, click Done.

Header with logo and navigation

Now open each of the pages containing your master. You should see that the updates you made are reflected on each of those pages. Test your simulation in your browser to verify that the link works on each page.

Additional features

Breaking a master reference

Sometimes there are slight functional differences between masters on different pages. A common example of this is when there is a role-based login. Perhaps an admin user would see an additional “Admin” tab within the header, whereas a non-admin user would not. In this instance, because there is only a slight variation and to avoid having to create another master, you have the option to break the master reference so you can add the additional tab.

Break a Master referenceOnce you’ve placed the master on the page, right-click that master and select Break Master Reference. When you’ve broken the master reference, the associated content can be edited in place independently of the master. Since the reference to the master no longer exists, you can make changes to the content directly on the page that will not be reflected either by the master or on other pages where the master was used.

On the rare occasion that you have created a master that will always have slight variations when it is added to a page (e.g., a breadcrumb trail that will contain different content depending on its placement within the project, or a button whose label will vary depending on how the button is being used), you can set the default “Drag as” behavior in the master’s Properties panel. Drag as copy will automatically break the master reference whenever the master is added to a page.

Switching masters

On occasion, you might have reason to create two or more versions of a master, perhaps to visualize alternate designs or to be used in different scenarios. In these cases, the Switch Master feature might come in handy. To switch a master that you’ve already added to a page, select the master on the page and click the Switch Master button in the Properties panel. This will open the Switch Master pop-up window, which allows you to select any other master in your project.

Finding master references

As your projects grow in size, it helps to have a way to track where you’ve actually used a particular master. You can easily do this in iRise Studio by right-clicking the master in the Directory panel and choosing Find References. The pop-up window that appears will list every page, template or cloud containing the master. There is also a Jump To button that enables you to navigate quickly to any instance of the master within the project.