irise visualization workbookassets.irise.com/files/pdf/visualization_workbook_v7.pdfirise...

iRise Visualization Workbook 7.2 v1 4-4-09 Printed 11/19/2009 2:01:55 PM

iRise Visualization Workbook

Updated for iRise Studio Version 7.2.1 April 5, 2009

Prepared by Bill Smith, iRise Inside Sales

©2009 iRise, Inc.

Please send corrections and suggestions to [email protected], or call (415) 772-0843.

mailto:[email protected]�


Table of Contents

1. Introduction .............................................................................................................. 3 1.1. Getting started .................................................................................................. 4

2. Common Table Patterns .......................................................................................... 6 2.1. Display a list of customers in a table ................................................................. 6 2.2. Display customer detail ................................................................................... 11 2.3. Edit the customer record ................................................................................. 14 2.4. Using an Action to change widget properties .................................................. 16 2.5. Add a new customer ....................................................................................... 18

3. A Basic Search Pattern .......................................................................................... 22 3.1. Search for customers ...................................................................................... 22 3.2. Create a temporary customer record on the clipboard .................................... 27

4. A Data-Driven Decision .......................................................................................... 30 4.1. Enter login credentials .................................................................................... 30 4.2. Decide if the login is valid ............................................................................... 31

5. Reusable Assets: Masters, Menus, Styles, and Templates ................................... 36 5.1. Create a header master .................................................................................. 36 5.2. Break a master reference ............................................................................... 38 5.3. Create a navigation menu ............................................................................... 39 5.4. Change the menu style ................................................................................... 42 5.5. Add additional menu items and submenus ..................................................... 44 5.6. Create tabbed sections using a menu ............................................................. 46 5.7. Templates ....................................................................................................... 50 5.8. Other Reusable Assets ................................................................................... 51

6. More techniques and patterns ................................................................................ 53 6.1. Formatting a data table ................................................................................... 53 6.2. Use Cast to get records where Account Owner equals Username ................. 53 6.3. Scrolling a data display table .......................................................................... 55 6.4. Count the customer records ............................................................................ 56 6.5. Format table cells using inheritance ................................................................ 58 6.6. Hide a table row .............................................................................................. 59 6.7. Modifying table rows and cells ........................................................................ 62 6.8. Create a table from a .csv file ......................................................................... 63 6.9. Create a catalog using the tile list ................................................................... 65

7. Keyboard Shortcuts ................................................................................................ 69


1. Introduction The iRise Visualization Workbook will introduce you to modeling techniques and patterns that will help you build highly functional simulations using iRise Studio. It emphasizes creating a realistic data-driven experience over visual formatting, since most new users need help here. The workbook does not cover scenarios or working with text requirements in the Document view because most new users find these concepts easy to grasp.

You might want to do a little reading or looking around to familiarize yourself with iRise Studio before starting the exercises. We also recommend the “Studio Overview Tutorial” and the “Getting Started Guide” on the iRise Studio Help menu. Even better, try the self-paced eLearning courses available at http://www.irise.com/services/training_elearning.php.

To really master iRise, at some point you should read the Help pages from start to finish. On the other hand, if you are a hands-on learner or just want a quick look at how to build iRise simulations, this workbook will take you a long way by itself.

If you learn by example, import some sample iDocs to study how they were built. The “Common Samples” iDoc at http://www.irise.com/resources/idoc_library.php provides a large number of patterns you can learn from, as well as copy and adapt to your needs. The iRise user community at www.catalyze.org is a good place to find other iRise users who are happy to share their knowledge, opinions, and favorite iDocs.

Tell me, and I will forget. Show me, and I may remember.

Involve me, and I will understand. —Chinese proverb

http://www.irise.com/services/training_elearning.php�

http://www.irise.com/resources/idoc_library.php�

http://www.mycatalyze.org/�


1.1. Getting started When you start iRise Studio, you have the option to edit a project or create a new one. For the purpose of this workbook, you will need to create a new project. You can call it anything you want, but “Workbook Project” will do just fine.

There are a few things to do to get set up:

• Create a new project named “Workbook Project”. You will be working in the Simulation view (not the Document view) pretty much all of the time, so make sure that’s where you are. Do this now using the File menu.

• Familiarize yourself with the iRise Studio landscape as this workbook will often

make references to it.

• Set your default iRise Studio preferences on the Edit menu. Select Preferences

and change the default page width to 800 pixels, and the section height and width to 20 pixels. Table cell width should be 100 pixels.

Property Panel

Project Panel

Canvas

Page

Launch Button Formatting

Toolbar

Widget Toolbar

Details Panel


• From the View menu, make sure “Show Widget Boundaries” is checked and the Comments Panel is unchecked.

• There is auto-save functionality in iRise, so you never need to save your work, unless you want to do a Save As to create a new baseline.

• If you are using the iRise Studio Enterprise Edition, you can create a new version (baseline) of your project. Simply export your simulation project to an iDoc file. To export an iDoc from Studio, go to FileExport and choose either 1) as iDoc or 2) as protected iDoc.

Should you ever accidentally delete a project, you can often recover it by importing the most current iDoc file you may have sent to someone, saved on your PC, or saved to a shared repository.

• iRise has a very good memory of what you have done, so you can undo even a long series of actions using CTRL-Z (or Undo on the Edit menu). A notable exception is undoing actions related to datasheets, such as deleting a datasheet, deleting a column, or renaming columns.

• Launch your simulations any time by clicking the green button . Your simulation will launch from the page where you clicked the green button. If your page depends on data from another page, you’ll normally want to launch from that page to ensure everything works properly.

• You’ll probably want to set your browser to open in the same tab to avoid opening a new browser window each time you start a simulation. iRise is compatible with the following Internet browsers:

Microsoft© Internet Explorer v6 sp2

Microsoft© Internet Explorer v7 (Recommended)

Mozilla© Firefox v3.0.5

Apple© Safari v 3.2

Some people prefer to puzzle over things they don’t understand until they figure them out. If you’re not one of those people, please don’t hesitate to contact your iRise sales rep or technical resource, or contact iRise support ([email protected]). We are glad to help.

mailto:[email protected]�


2. Common Table Patterns Using iRise Studio datasheets, you can easily incorporate sample data into your simulation to create a dynamic experience for your end users and stakeholders. Much like a final coded application, this sample data can be saved, retrieved, updated and deleted within your simulation.

This section covers how to use datasheets to incorporate sample data into your simulation. In particular, we examine how to display your data in an easy to use table format.

Please use your newly created Workbook Project and follow along as you read.

2.1. Display a list of customers in a table • To get started, you need to create a datasheet which contains a list of customer

records. Click the datasheet icon in the project panel to create a new datasheet.

• Rename the datasheet to “CUSTOMER”. It’s best practice to name datasheets

in All Caps. If necessary, highlight the default name, “Datasheet 1”, and right-click to rename it to “CUSTOMER”. Press Enter or Tab to save the new name.

• To manually populate your datasheet with sample data, begin adding column

names by right-clicking the “Untitled1” column and renaming it to “ID”

• Now create the other columns by clicking on the “New Column” header and

typing names (see below) for the new columns. It’s best practice to name column headers using Initial Caps. Make sure each column is uniquely named and be careful not to add extra spaces or unnecessary punctuation, since you will reference the data in these columns by their names. You will need four columns for this exercise:

New Datasheet icon


ID Last Name First Name State

• You can manually add data records to the datasheet by clicking any “New Row” cell. Move around with the Tab or arrow keys. Enter the data below, or make up something similar.

• Now let’s display your customer records on a page. Go to the project panel and

rename the default “Page 1” to “Customer List”. If you have to, click on “Page 1”, then right click to rename it. Press Enter or Tab if necessary.

• Click on “Customer List” to go to your new page, if you are not there already.

• Now drag and then drop the table widget onto your “Customer List” page.

• Add a data table with 1 header row and 4 columns. Make sure you have

selected Data table (not Normal table).

Note: Data tables dynamically grow or shrink depending on the data contained within your datasheet, whereas Normal tables have a predefined number of rows.

• To add table headings, drag and drop a text widget to the cell on the header (top, black) row, then type the column name (e.g. “ID”).


Alternatively, you can double-click in the table (or anywhere) and begin typing to create a text widget. For a complete list of shortcuts refer to the “Keyboard Shortcuts” section of this document.

To edit the text, double-click until you see the vertical bar, then use the arrow keys to move around. Use CTRL-A to select all the text. Setting the zoom to 100% (lower right) often makes editing text easier.

• Add the remaining table headings.

• To populate the display table with data, you need to prepare it by adding

placeholders to receive the data and control formatting. To do this, simply add a text widget in each column of the data row (red row). You can name them anything, but it’s a good practice to make placeholders easily identifiable using square brackets and/or lower case (“[id]”), or by following your own convention. Your table should look something like this:

• To retrieve all of the CUSTOMER records into your new table, drag and drop

your “CUSTOMER” datasheet onto the canvas (scroll or resize the page if you don’t see the grey canvas). Choose the “Get Record” option.


• Now map the data from the CUSTOMER datasheet to the each of the

placeholders. You can do this several ways: 1) drag the datasheet to the page, drop it, then match datasheet columns to placeholders, 2) drag the datasheet to the data table so only the data row (in red) is selected, then match columns to placeholders, or 3) drag the datasheet to each placeholder one at a time. Let’s use the second approach this time.

You should see a dotted red line, which indicates a data flow. Right click on the dotted line to expand it, if it is not expanded already.

Notice how data mapping uses red lines to represent data flow. Data flows onto a page when it loads and off of a page when you Submit a page. Later you will see


blue lines in iRise Studio, which represent navigational flow (the order in which things are done).

You can reposition data flow lines by dragging their labels, or delete lines by clicking the label and hitting delete. You may also want to use Align and Distribute to keep your workspace organized. With the CTRL button depressed you can select each of the red lines, or lasso all of them, then align and distribute them with a right click. With a little practice you’ll be a pro.

To collapse the lines into a single line, you can right-click any red line label and select “Collapse” (there are situations where not all lines collapse, by design).

• You can right-click on the dotted red line to edit, expand, or delete the red lines.

Red lines expanded

Red lines collapsed


• Now launch your simulation by pressing the green button at the top of the page.

• Your page should look similar to this:

2.2. Display customer detail This exercise shows how to select any of the above table records for viewing on a Customer Detail page. We’re going to pick up the pace now, so stay with us.

• Create a new page named “Customer Detail” and make sure it is displayed. On the new page, create a Normal table with 2 columns and 4 rows. Resize it to something like the one below by grabbing the handles (about 200 x 250 pixels). Add labels and placeholders for the data as below.

• Now let’s create navigation between the Customer List page and the Customer

Detail page. To do so, go back to the Customer List page and drag the Customer Detail page from the project panel onto the canvas.


• Now drag the “ID” text widget to the Customer Detail page icon. This allows a

user to view a customer’s details by clicking the customer ID.

Notice that the [id] field turns blue and is underlined. That’s the default for displaying text links (you can change it using the Format menu). In addition to taking you to the page, clicking such a link in a data display table puts the clicked record “on the clipboard,” a topic we cover more fully later.

• Now return to the Customer Detail page to populate your table. This time, we’ll use the Record Action widget instead of dropping the datasheet on the canvas. If you don’t see it, you may need to click the More icon:

Drag and drop the Record Action icon onto the canvas. Now select the CUSTOMER datasheet while making sure the “Get Record” option is selected.

Last time we got All Records, but since this time we only want the record the user selected, we’ll choose the Clipboard Record(s) option in the property panel. Going forward, we’ll just tell you to “create a Get Customer record action” on the canvas, or in this case, to “get the Customer record(s) on the clipboard.”


• Now map the CUSTOMER datasheet to the table placeholders.

• Drag the button widget to the page to add a “Back to List” button. Change the

name by entering a new name in the “Button Label” field on the property panel.

Alternatively, you can double-click the button to edit the name directly.

• Now enable the button so clicking it takes the user to the Customer List page. To

do this, drag the Customer List page to the canvas, then drag and drop the button onto it.

• Launch the simulation from the Customer List page by clicking the green button.

Click any one of the “ID” hyperlinks. This should take you to the Customer Detail page and show the data for the customer you selected. The Back to List button should take you back.


2.3. Edit the customer record Now we’ll let the user edit and update the customer data.

• Create a new “Edit Customer” page. Drag a Form widget onto the page. Using the property panel, adjust its size to 600 x 400 pixels.

• Now go back to the Customer Detail page. Add an “Edit” button (set width to 65 pixels in the property panel) and link it to the newly created Edit Customer page.

• Copy the table from the Customer Detail page and paste it inside the form on

the Edit Customer page. Name it “Edit Customer Table”.

When you copy a table, make sure you have selected the entire table, not just a cell or row. You can copy with CTRL-C, or right click and select Copy while the table is selected.

• Replace the Last Name, First Name, and State placeholders with Text Input fields.


• Make sure you update the names (in the property panel) for the input fields (Last Name, First Name, and State). The one for Last Name might look like:

• Create a Get Customer record action on the Edit Customer page canvas. Get

the clipboard record(s).

• By dragging the Get Customer action, map the datasheet inputs (ID, Last Name, First Name, and State) to the text placeholder and each of the input fields.

• Now create an Update Customer record action on the canvas. Notice how it defaults to updating the record(s) on the clipboard, which is fine, since we only want to update the record which is currently selected. All others will remain unchanged.

• Drag the three text input fields to the Update action to send data to it. Click the appropriate field name for each after specifying that you want to “Send data”.

• Add a “Save” button to the page. Make sure the button is also inside the form.

When a user updates the data and clicks Save, we need to “submit” the form to update the record. You do this by dropping an “Action” onto the canvas, selecting “Submit/Reset Form”, then selecting the “Submit the Form” option. Click “Done” to complete the step.


• Link the Save button to the Submit Form action, then link the Submit Form

action to the Customer Detail page.

• Now add a “Reset” button, then link it to a Reset Form action. Add a “Cancel”

button, then link it to the Customer List page.

• Launch the simulation from the Customer List page. You should now be able to

select a customer, view details, and then edit that customer. You can view the CUSTOMER datasheet at any time to see how the data is updated.

2.4. Using an Action to change widget properties At times you may need to simulate an animation effect on a widget without refreshing the page. For example, you can modify widget properties using the Edit Properties Action, including size, position, style, and format. Here we will add a focus indicator to the user input widgets.


• On the Edit Customer page, drag an Action widget to the canvas.

• The “Set Page Action” pop-up will display. Select the “Edit Properties” Action.

• Now drill down to find the Last Name Input widget (which you should have

renamed in the earlier exercise). Select the checkbox next to that element and select “More…”.

• Change the Background Color to yellow and click “OK” and “Done” when finished.

• Now drag the Last Name Input widget to the “Edit Properties” Action on the canvas. Change the triggering event from “On click” to “On focus” by right-clicking on the blue navigation line and selecting “Move to”:


The navigation line should now look like this:

• Launch the simulation to see how the Last Name field now displays in yellow once you have placed the focus in on that field.

• Repeat for the First Name and State input widgets. Hint: you can copy and paste

the action widget, but remember to change the widget that is affected.

2.5. Add a new customer Now let’s save a new record to your CUSTOMER datasheet.

• Right-click the Edit Customer page in the project panel and choose “Copy”.


• Right-click and paste it anywhere in the project panel Pages area.

• Rename the new page to “Add Customer”.

• Delete the Get Customer action from the Add Customer page canvas. Create a

Save Customer action on the canvas.

• Replace the “[id]” placeholder with a text input field. Drag it to the new Save action. Choose “Send Data” and then “ID”.

• Now click the text label of the other three red (data flow) lines and drag them to the Save Customer action one at a time. This trick saves time when there are many fields to remap, but it is a necessary technique when you need to send data from one input widget to multiple record actions.

• Now, delete the Update Customer action, which we don’t need for the add.

• Drag a clipboard to the page near the Save Customer action.


• Drag the Save Customer action to the clipboard, and send the entire record to it. This will let us use the record later without having to get it from the datasheet. The label icon on the data flow line indicates an entire record has been sent.

• Now create an “Add” button on the Customer List page just below the table, and

link it to Add Customer page. If you simulate the page now, the button is likely to be overwritten by the rows. Give it a try.

• Because the table can display any number of records, we use the “push” feature

to keep the Add button below the table. However, to create space above the button, we’ll also wrap it in a Section. To do so, right-click the Add button and wrap it in a Section.

• Next, enlarge the section to create space between the table and the button.


• Finally check the “Push” option in the property panel for the section.

• Now when you launch the simulation, the button is always displayed below the

table regardless of your table size. Click “Add” to create a new customer record. If nothing happens, make sure it is linked to the “Add Customer” page.

Note: If you’re using iRise Studio 7.2 and your section is tightly wrapped around the Add button, you may see unwanted scroll bars, like this:

If so, go to the property panel for the section and set Horizontal and Vertical Scroll to “No”. Go to Preferences on the Edit menu and do the same to change the Section and Form default scroll bar behavior.


3. A Basic Search Pattern You can simulate searches using the Get Record action and modifying the associated “where” conditions in the property panel. When performing a simple search with multiple criteria, you can choose AND or OR conditions, but not both at once. Searching multiple fields (datasheet columns) with the same search term is a technique not covered here.

The goal of a search simulation is to return a set of records the user can interact with, not necessarily the records precisely required by the search algorithm. Because search criteria can be complex, we recommend supplementing the model with text requirements (using the Document View) while providing a close approximation in the simulation.

3.1. Search for customers • Duplicate the Customer List page using copy and paste and then rename it to

“Search Customers”.

• Wrap everything on the page in a form (lasso all, then right click), and expand it to make room for search fields at the top (set scrolling to No if you did not do so as directed above).

• Now use the text widget to add 3 text fields above the Customer List Table. The

text will label our search criteria.

• We also need to modify the page to capture the user’s input.

For Last Name criteria, drop an input box to the right of the “Last Name:” text. Using the properties panel rename it to “Last Name Input.”

• For the State criteria, drop a select list to the right of the “State” text widget. Using the select properties panel rename it to “Select State” and make sure it is of type “Standard List”.


• For the ID criteria, drop a select list to right of the “ID”. Using the properties

panel rename it to “Select ID” and make sure it is of type “Dynamic List”

• Rename the “Add” button to “Back to List” (you may need to expand the

section). Now update the navigation link by right-clicking on the “Add Customer” link on your canvas and choosing “Edit Destination”.

• A Set Destination pop-up window displays. Select the Customer List page and

click “Done”.

• Now populate the State select list with state abbreviations to create a standard

list. Include a blank selection (hint: double-click, then press Enter). Make sure at least one or two match your sample data. Set the default to blank.


• Ensure the ID select list type is dynamic (this lets us get values from the

CUSTOMER datasheet). Connect a Get Customer record action and send the “ID” to it. Set the directive in the property panel to “Select One”.

• Next we’ll set up the search criteria. Start by creating another Get Customer

action on the canvas. Drag the Last Name input field to it to create the first “where” condition. Repeat for the State and ID select lists.

• Now we want to increase the flexibility of the search. We want to let users enter

a partial last name and still get results, so we modify the “where” condition. Be sure Get Customer is selected, then click the “Where” button on the property panel. Change the condition for the Last Name from “equals” to “contains”.


• Right now the search will return results only if all three criteria match values in

the datasheet (including blanks). However, often we only want to search on one or two of the fields. To enable this, click the ellipses icon (...) for Last Name and State. Check the box to ignore a blank.

• Do the same for ID, but instead of ignoring blank enter “Select One” in the field.

• Drop a clipboard on the canvas near the same Get Customer action. Drag the

action to it to send the record(s) returned by the search to the clipboard.

• Add a button named “Search” near the search fields. Create a “Submit Form”

action and a “Refresh” link on the canvas. You can get a “Refresh” by dragging the “Link” widget to the canvas.


When the Set Destination pop-up window displays, select the “Window controls” option and select the “Refresh” radio button.

Note: Strictly speaking, the Refresh isn’t required here, but it helps document what is going on. A submit not followed by a destination keeps you on the same page.

• Drag the “Search” button to the “Submit Form” action, and then link “Submit Form” to “Refresh”.

• When we display the results, we don’t want to display ALL records, only those

that match our criteria, so change the Get Customer action that is populating the display list from All Records to Clipboard Record(s).

• Go to the Customer List page. Add a “Search” button in the section next to the

Add button. Link it to the Search Customers page.


• Launch the simulation from the Customer List page. Try searching on one or

more search terms. Click “Search” without setting any parameters to return all records. If you see scroll bars, expand the form (or set the scrolling properties for the form as desired).

3.2. Create a temporary customer record on the clipboard The clipboard lets you store and retrieve data temporarily during a simulation (similar to Microsoft Word or Windows). The data remains on the clipboard until the user closes the browser, clears the entire clipboard, replaces the data with a new value, or directly updates it by setting the value in the property panel for the clipboard instance.

In this section, you’ll learn more about how the clipboard works with datasheet records. Although the example used is not a common situation, it is very instructive.

• On the Customer Detail page, add a “Back to Search” button which links to the Search Customers page.

• Launch the simulation from the Search Customers page. Click “Search” to

retrieve all records. Then click one of the ID’s to view details for the record.


• Now click the “Back to Search” button to return to the Search Customers page.

• Note that when you return to the search results, the only record listed is the one

you selected, not the entire result set. This is because the list is populated by records on the clipboard. Selecting one Customer record from the list replaced the entire result set that was on the clipboard . You can avoid this by temporarily renaming the record you select from the list, as below.

• Go to the Search Customers page and select any cell on the data row (in red) of the data table.

• Check the Rename property on the property panel, then enter “CLICKED” for the new customer record name.

• Go to the Customer Detail page. Click the Get Customer action. Click the

“Where” radio button in the property panel.

• Add a rule where: ID equals Clipboard CLICKED:ID.


• Add the same Where rule on the Edit Customer page for both the Get and

Update Customer actions.

• On the Customer List page, rename the clicked record to CLICKED, just as you did on the Search Customers page.

• On the Add Customer page, change the “Save” button destination to Customer List and delete the clipboard attached to the Save record action (just some housekeeping to make everything work consistently).

• Launch the same search as before (from the Search Customers page). Notice how all of the original search results are displayed when you return from the Customer Detail page.


4. A Data-Driven Decision

4.1. Enter login credentials Decisions let you simulate navigation rules and business logic when a user’s next action depends on the presence or absence of specific data or conditions. In this example, we simulate a Login where the navigation path depends on the login credentials supplied by a user (user enters valid or invalid login data).

• Create a “Login” page. Place a form on the page.

• Add “Username” and “Password” input fields to the form, along with appropriate text widgets to label them.

• Add a “Login” button to the form.

• Add a text widget named “[error]”. Highlight the “[error]” text and change the font to be color red and bold.

• Drag a clipboard to the canvas. Drag the input field from the “Username” input

field to the clipboard. Select “Send data” and enter “Username” in the Name field, then click “OK”.


• Repeat for Password by dragging the “Password” input field to the clipboard.

Select “Send data”, type “Password” in the Name field, then click “OK”.

• Add another clipboard to the canvas and then drag it to the “[error]” widget. A Select a Field pop-up window displays. Enter “Login Error” and click OK.

• Note: You must use another clipboard for this action. A fundamental principle of

iRise is that, although all clipboards refer to the same memory space, you cannot put something on and take something off a clipboard in one step (you will get unexpected results).

4.2. Decide if the login is valid • Create a “USERS” datasheet, with “Username” and “Password” columns. Add

the username “bsmith” with password “password”, or perhaps your own name.

• Create a decision named “Valid Login?” by clicking the new Decision icon. Enter

the name “Valid Login?”, then press Enter or Tab. You should see a canvas with the Valid Login? decision “diamond” on it.


• Drag the Login page to the right of “Valid Login?” on the canvas.

• Create a new page named “Home”. Drag it to the right side also.

• Drag a clipboard to the left side of the canvas. Create a Get Users action to the

right of the clipboard. Now drag the clipboard to the Get Users action, add a “where” condition and select “Username” from the pop-up. Click OK


• Repeat for the “Password” field. Here you are asking the simulation to compare the Username and Password values on the clipboard to values in matching columns on the USERS datasheet. We will use the result of this comparison to determine the workflow the user will go through.

• Drag the Valid Login? decision point to the Home page.

• Drop another clipboard on the page between the Valid Login? decision point and the Login page. Drag Valid Login? to the clipboard and then drag the clipboard to the Login page icon.

• To set the error message, drag a constant widget onto the canvas.

• Using the properties panel rename the constant to “Login Error.” Set the

Domain value to “Please Try Again.” This will be the error that displays when a user supplies invalid login credentials.

• Drag the “Login Error” constant to the clipboard.


• Drag the Get Users action to the Valid Login? decision point. The “Select a

Record or Field” pop-up window displays. Click the “Record” radio button and select “USERS” to send the entire record to the decision point. Click “OK”.

• Now we’ll define the criteria that determine user’s path. To define the criteria, go

to the properties panel for the “Valid Login?” decision and click “Edit Rules”.


A new window displays where you can enter the decision rules. If a matching USERS record exists (the result is not empty) then follow the “Home” branch. Otherwise, go to the Clipboard (the result is empty), then to the Login page.

• Now return to the Login Page and add a “Submit Form” action to the canvas.

Drag the “Login” button to it. Now add a clipboard to the “Login” page canvas. Drag the “Submit Form” action to it.

• Drag the Valid Login? decision to the canvas. Drag the clipboard to it. We’ll use

this clipboard to clear the error message. Of course, Login Error will be blank until the user go down the error path of the Valid Login? decision.

• To clear the Login Error when the user tries again, we blank it out on the clipboard property panel. Double-click on the cell below the Data column, then select Login Error. Leaving the value blank clears it each time the Login button is clicked. (Note: Editing values on the clipboard is the same as linking a constant to the clipboard)

• Launch the simulation from the Login page. An invalid login should result in an

error message. A valid login will take you to the blank Home page.


5. Reusable Assets: Masters, Menus, Styles, and Templates This section shows how masters (reusable objects) speed up building the user interface and improve page design consistency. First, we’ll create some reusable assets such as a page header and a multi-tiered navigational menu, and then add them to our pages.

5.1. Create a header master • Create a new master named “Header”.

• Using the formatting widget , set its background to a color of your choice.

• Resize the header in the properties panel to 800 by 100 pixels. Make sure the

“Drop as” property is set to “Reference” (the default).

“Drop as” sets how to handle changes to the master . “Reference” causes changes to appear wherever the master is used. “Stamp” creates a copy and breaks the reference to the master so changes do not propagate.

Note: You can break a master reference later if you realize you need a separate instance of the master (go to the “Breaking the Master” section ).

• Now use the image widget to drop a logo residing on your PC onto the master. Alternatively, right click to paste an image copied to the Windows clipboard (use “Paste from External”). Adjust the image or master size as needed.


• Now let’s personalized your master. Add a text widget: “Welcome [username]” on the header. Add a second text widget: “Today is [date]”. Add a third text widget: “Logout”. Adjust font, color and size as desired.

• To display the user’s username in the welcome message, we’ll get it off the clipboard, where it was placed during the login scenario. Place a clipboard on the canvas, then drag it to the [username] portion of the welcome text widget (nudge the cursor slightly to select “[username]” only). Choose “Username” for the dataflow.

• To display the current date on the header, drop an Operator widget on the

canvas. From the dropdown menu select Util Date Current. The Current Date widget displays on the canvas.

• Note that the widget contains a red ‘X’. This means it is not ready to be used. It

needs a set of inputs and outputs first.

• To define the date format (Input 1), create a constant named “Date Format” on

the canvas. For the date to display as “August 1, 2008” we set its value to “MMMM dd, yyyy” (formatting is case sensitive). For a complete list of date parameters, search for “current date” in iRise Help.

The bottom number indicates that one output is required. For this operator, the output is the current date.

The top number indicates that one input is required. For this operator, the user must define a date format parameter.


• Drag the Date Format constant to the operator, and then drag the date operator to the [date] portion of the “Today is [date]” text widget. Notice the red ‘X’ has disappeared.

• Drag the Login page to the canvas. Drag the Logout text widget to the Login

page to create a link.

• Now to begin using the header master, return to each of your pages (including

the Login page) and drag and drop the header to the top of each page. Reposition as needed by dragging (or by setting X,Y coordinates). Adjust the other page elements as needed.

5.2. Break a master reference In the example above, we added the header master to each page. However, at times you may need to make a local edit to the content within a Master without affecting the Master itself. Let’s "break apart" the Master on the Login page.

• Return to the Login page. Right-click on the header master and select the “Break Master Reference” option.


• Notice that this instance of the master is converted to a section. Now remove the “Welcome [username]” text, the “Logout” text, and their associated canvas widgets, and then edit the background color of the section.

• Your header should look similar to this:

• Launch your simulation from the Login page. Notice that only your Login header

has changed while the others remain the same.

5.3. Create a navigation menu • Create a new master named “Left Nav Menu”. Drag and drop a menu onto it.

• Make it a vertical menu with 3 menu items.

• On the properties panel, rename the menu to “Left Nav Menu”.


• Now rename the menu selections to “Customers”, “Products”, and “Cases”. A

useful trick for changing text is to double-click the widget, then use CTRL-A to select all the text. While the text is selected, begin typing the new value.

• Note the difference between the text that displays for the menu selection and the name of the text widget. Make them match by editing the name in the property panel.

• Also note the difference between the text widget and the “Menu Item” that it

resides within (its “parent” object). Using the properties panel for the parent of each text widget, rename the menu items appropriately.

Note: The “bread crumb trail” is an easy way to selected the desired object. The black label indicates your current selection. To access a parent object, just click it on the bread crumb trail.


• To set the menu navigation, drag the Customer List page to the canvas, then

drag the Customers Item (not the text widget) to it. If you accidentally resize rather than drag the menu item, you can use CTRL-Z to easily undo it.

• Create a new page named “Products”. Drag it to the canvas and connect the

Products menu item to it.

• Create a cloud named “Cases”. Drag it to the canvas and connect the Cases menu item to it.

• Adjust the dimensions of the master to the size of the menu by dragging the

edges of the master to fit tightly around it. If scroll bars appear, adjust the size or turn scrolling off. Setting “Expand in Studio” to Yes makes this easier to do.

Note: Expand in Studio controls how containing objects (e.g., sections, forms, pages, masters) behave when larger objects are dropped into them in Studio.


• Return to your existing pages (except Login) and drag the “Left Nav Menu” master onto them. Reposition other page elements as needed.

5.4. Change the menu style • Go to the Left Nav Menu master. Make sure the entire menu is selected.

• Select “Edit Style…” from the Format menu.

• Once the Style Editor displays, click the Menu tab.

• Set menu items to left align for the Menu Item, Hover, and Current Page views.

• Set the background color for the Menu Item to the same color as the header.


• Set the background colors for Hover and Current Page as desired.

• Still using the Style Editor, now set the menu item cell buffer to 5 pixels. Repeat for Hover and Current Page. Click “OK” to close the editor.

• Now, to adjust the width of the menu, return to the Left Nav Menu master. In the

Menu properties panel make sure Horizontal Scroll is ‘No’ then click on any cell on the menu (the menu item, not the text widget) and set the width to 180 pixels.

Note: The instructions above describe how to edit an existing style. Starting with iRise Studio v7.2 you can create new styles using “Save as New Style”. Simply

right-click on the widget you have formatted, then “Save as New Style”. Enter a name for the style and click “OK”

Once saved, you apply the new style by selecting the widget and choosing the style from the dropdown.


5.5. Add additional menu items and submenus • Go to the Left Nav Menu master. On the properties panel, ensure that vertical

scroll is set to “No”.

• Right-click the Customers menu item and select “Add MenuItem”. Set the text label and menu item name to “My Tasks” and “My Tasks Item” respectively.

• Right-click on the My Tasks menu item and select Add Submenu. Give it 3

items and orient it vertically.

• In the properties panel, rename the submenu to “My Tasks Submenu”. Set the

width to 150 pixels. Click the Vertical Tree property. Set the X offset to 30.

• Set the labels and menu item names to “My Customers”, “Search Customers”,

and “Add Customers”.


• Select the entire submenu (you can use the bread crumb trail). While the cursor

is hovering over the submenu edge, right click and select Collapse Submenu.

• The grey arrow on the parent menu item indicates a submenu (zoom in if you

can’t see it). Expand the hidden submenu with a right-click on the My Tasks menu item cell.

• Create a page named “My Customers”. Add the “Header” and “Left Nav Menu”

masters to it. Place it on the canvas of the Left Nav Menu master, then drag the My Customers submenu item to it.

• Connect the Search and Add Customers submenu items to the appropriate pages.


• Collapse the submenu with a right click on the “My Tasks”. Notice that the page links are not shown. Remember not to delete them if you clean up your simulation.

5.6. Create tabbed sections using a menu • On the My Customers page, create a menu named “Tabbed Menu” using a

horizontal menu with 4 menu items.

• Set the text and menu item names to “My Customers”, “Customer Detail”, “Products”, and “Cases”.

• Select “Manage Styles” from the Format menu. Click on the “Menus” style and

click Duplicate. Rename the style to “Tabbed Sections”. Click “OK” and “Done”.

• Select the entire menu (use the bread crumb trail if you like). Rename it to

“Customer Tabbed Menu”. With the entire menu selected, change the style to Tabbed Sections.

• From the Format menu choose “Edit Style” then select the “Menu” tab.

• Change the background color for Menu Item to black and the font to white.

Make the Current Page background white and text black. Click OK then Done.


• Select the entire menu and set its width to 480 pixels.

• Edit the Tabbed Sections style to center text for each of the menu states. Make

sure you are editing the Tabbed Sections style, not the Normal Style, which may happen if you have not selected the Customer Tabbed Menu or haven’t chosen the Tabbed Sections style from the FormatManage Styles menu for editing.

• Edit the Tabbed Sections style to set the top, left, and right borders of the

Current Page state to black, solid line, one pixel wide (to enter the pixel width, type the number 1 into the drop down list).

• Add a section named “My Customers Section” to the page that is 480 pixels

wide and 400 high. Position it just below the tabbed menu. Set the entire border to black, solid line, one pixel wide.


• Now change the top border of the section to white.

• Position the section so it just meets the bottom of the menu. The arrow keys

move one pixel at a time (10 pixels with Shift pressed). Simulate the page to check alignment.

• Drag an Action to the canvas above the Tabbed Sections menu. Choose Set Menus, then the “My Customers Item” from the Customer Tabbed Menu list. Drag the My Customers menu item to the action. Repeat appropriately for the each of the other menu items.


• Start the simulation from the My Customers page. When you click the My

Customers tab, the result should look the example below. Try the other tabs.

• Double-click inside the section to create a text widget, or drag one into the

section. The text should read “My Customers”.

• Using the bread crumb trail if necessary, select the “My Customers Section”. Once selected, right-click and select Add ViewDuplicate View.

• Using the Views tab, in the Properties Panel, rename the new section to

“Customer Detail Section”

• Change the text widget inside the new section to “Customer Detail Section”.


• Continue adding additional duplicate views for the “Products” and “Cases” Sections.

• To set the default view, click Views tab in the property panel (or use the breadcrumb trail to select Dynamic Display 1, or click on the small square in the upper left corner of the section). Make sure the default view is the “My Customers Section”.

• Now we’ll set things up so clicking a tab displays the correct section. Drop an

action widget above the first “Set Menus” action. Choose Switch Views, then “My Customers Section” from the select list. Drag the “Set Menus” action to the “Switch Views” action. Repeat as appropriate for the other tabs and sections.

5.7. Templates If you know a number of pages will have the same look and feel, consider creating a template. Templates give you a head start and improve consistency. It is common to construct all or part of a template page using masters.

• Create a new template named “My Sample Template”.

• Design the template layout. Let’s drag our “Header” master to the top of the

template and then drop the “Left Nav Menu” master just below the “Header.


• To create a new page from a template simply drag the template to the canvas of

an existing page. Alternatively, drag the template to a Scenario whiteboard.

5.8. Other Reusable Assets To speed creation of high fidelity simulations you will want to leverage iRise simulation assets that you build earlier or that were created by others. With iRise Studio 7.2, you can import assets directly from another project without first exporting it to an iDoc file.

We’ll create a new project entitled “Workbook Project 2” then import the “My Sample Template” we just created.

• Close your existing “Workbook Project” by selecting Close from the File menu.

• Create a new project called “Workbook Project 2” by selecting New from the File menu.

• From the File menu, select ImportChapters from another Project…


• Open the Workbook Project from the dialog box.

• Find and check the “My Sample Template” template you created earlier, then click OK.

The “My Sample Template” now exists in your new projects, including the masters that are related to it.

Note: Many customers set up a project that contains a collection of their organization’s favorite iRise assets.

• Close “Workbook Project 2” and reopen your “Workbook Project”.


6. More techniques and patterns

6.1. Formatting a data table • Go to the Customer List page. Select the table. Set the border color to the

same color as the Header master.

• Make sure the table is selected then click the Collapse Border checkbox in the

property panel. Borders for contiguous cells will be collapsed for a finer look.

• Set the header row color to the same color as its borders. You can use the bread crumb trail to select the header row more easily.

• Now we’ll make the table more legible. Click anywhere on the red data row. On

the property panel, alternate the rows with light grey or another color.

6.2. Use Cast to get records where Account Owner equals Username • In this section, we demonstrate the “Cast” operator, which lets you to temporarily

rename data flows.

• Copy the table from the Customer List page to the My Customers Section of the “My Customers” page and delete the text widget. Set the “Expand in Studio” property to “No (clip overflow)” for the My Customers Section. This prevents the section from being extended unintentionally while you are editing object inside it.

• Resize the table to 480 pixels wide. Reposition it as needed to align with the left edge of the section.

• Add an Account Owner column to the CUSTOMER datasheet. Use your

username to set yourself as the owner of some of the customers.


• Create a Get Customer record action on the My Customers page canvas.

• Drop a Cast operator on the canvas above the datasheet. This operator requires

1 input field and 1 output field. The first input is the field (or record) you want to re-label (in this case Username, which is on the clipboard).

Drop a clipboard onto the canvas. Drag the clipboard to the Cast operator and send “Username” to it.


Drag the Cast operator to the Get Customers action. Select the “Account Owner” field for the “where” condition. Now the “Account Owner” value is equivalent to “Username”.

.

• Map the Get Customer action to the display table, then test your work by launching the simulation from the Login page with an appropriate login. You’ll need to navigate to the My Customers page with the Left Nav Menu.

6.3. Scrolling a data display table • On the My Customers page and view, select the entire display table. Another

way to do this is to click anywhere on the table, then right-click and choose Table select Table.

• To add a scrollbar we need to first wrap the table in a section. With the table

selected, right-click and choose Wrap in Section.

Now set the section to 100 pixels high. Set the section Vertical Scroll to “Auto” and Horizontal Scroll to “No”.

Note: As long as the section is smaller than the table width or height, scroll bars are enabled when set to Auto. You can change scrolling behavior by editing these values in the properties panel or by resizing the section.

• To prevent the table header from scrolling, copy and paste the data table above the original table (but outside the section). Select the duplicate table and change the number of rows to 1. Position the remaining header row.


• Click in one of the cells on the header row of the original data table. Right click

and choose Table SelectRow. Press the delete key to delete the header row.

• Position the section directly below the remaining header row.

6.4. Count the customer records • Drag an Expression widget to the canvas on the My Customers page.

• Drag the Get Customers action to it. Send the “ID” field to the expression.

• Click the “Build Expression” button in the property panel of the Expression.


• Click the “ID” button so that it appears in the output field. Then update the

precision to zero (0) because we want a whole number. Click “OK”.

• Create a text widget “You have [nn] customer(s)” above the data display table.

• Drag the Expression to the text widget, selecting only the “[nn]” portion (nudge the cursor to select it). Create a new data flow called “Customer Count”.

• In the properties panel for the expression, select “Count” from the List Operation

dropdown.


6.5. Format table cells using inheritance • Go to the Customer Detail page. Select the entire table and set the buffer to 5

pixels using the formatting panel.

• Select the left column of the display table. Format the column to right justify

using the formatting panel.

• Select the ID cell in the left column. Right click and select Clear Formatting.

• Select the entire table. Use the handles to change the height and/or width for all

the cells in the table at once. Notice how the changes are proportional.


• Click off the table and then select one of the row borders to change the height of

that row only. It works the same for column widths.

• Change the width or height of a cell by clicking on the cell and then setting pixel

values on the property panel. Note how it affects the entire row or column. The change appears after you click anywhere on the page.

• Select the entire table. Right click and choose Clear Formatting. The borders should be removed, but row sizing remains the same.

• Select all of the cells in the right column using CTRL-Click. Set the height for all at once to 50 pixels. Set the column widths to 100 pixels wide in a similar manner.

• Select the left column. Right click and select Clear Formatting. The column should now be left justified.

6.6. Hide a table row • On the Customer Detail page, select and then name each row of the display

table (“Last Name Row”, “State Row”, etc.). Make sure you have selected the row and not a cell (the breadcrumb trail makes this easy).


• Name the table “Customer Table”.

• Select the “First Name” row. From the properties panel, check the “Hide in

browser” checkbox.

• Drag an Action Widget to the canvas. Select Show/Hide Widgets.

• Find and check the First Name row from the tree list. Click “Done”.


• Add a text widget to the page: “Show/Hide First Name Row”. Drag it to the action.

• Select the table and set the border color to black so you can see what is happening to the rows when you run the simulation.

• Launch the simulation from the Customer List page and select a customer. Note the behavior. The overall table height stays the same, but the row is not shown. The other rows heights are adjusted.

• To change the behavior so the table height is adjusted and the other rows

remain the same height, set the text widget height to be 2 pixels less than the cell or row height (48 pixels). Then set the row height to blank (not zero).


• Note: When the row height is not set, objects inside the row determine the row

height. When you want to control the formatting and placement of objects in a table cell more precisely, a better technique is to wrap them in a section. Alignment settings for the cell will apply to the section but not to its contents.

6.7. Modifying table rows and cells • Go to the Customer Detail page. Select the top row. In the property panel,

select Insert Row (above). Reposition the table as needed.

• Select both cells on the new row (use CTRL-Click). Select Merge Cells in the

property panel.

• Add a text widget “Customer Detail” to the cell. Set formatting for the cell (not

the text widget) to centered and adjust vertical alignment to middle.

• Set the cell background to dark grey or black, and the font for the cell to white, bold, 18 point.


• Select the entire table. Click the collapse border checkbox in the property panel.

Borders will not be drawn twice for contiguous cells.

• Set the buffer for the table to 5 pixels.

6.8. Create a table from a .csv file • Create a PRODUCTS.csv file using Microsoft Excel or a similar tool. Give it

three columns: Part Number, Description, and Price. Add a dozen or so records. Make sure the part numbers are unique.


• Save as a .CSV (comma delimited) file.

• Create a new “PRODUCTS” datasheet and use the import widget to browse and import your “PRODUCTS.csv” file. You won’t need to create column names as they will be created when you import the file.

• Copy and paste the data display table from the Customer List page onto the

Products page. Name it “Products Table”.

• Delete the header and data row text widgets and replace them appropriately. Reset the number of columns to 3.


• Drop a Get Products record action on the canvas. Map the clipboard records to

the table placeholders.

• Go to the “Left Nav Menu” master. Collapse the submenu if it is showing.

Delete the navigation line from the Products menu item to the Products page using right click.

• Create a Get Products action on the Left Nav Menu canvas. Get All records. Drop a clipboard below the record action. Drag the Get Products action to it. Send all the product records to the clipboard.

• Drag the Products menu item to the clipboard, and the clipboard to the Products page icon.

When you launch the simulation, using the menu to go to the Products page will populate the table with clipboard records before you get there. This is a common strategy for populating a table with clipboard records before you get to it.

6.9. Create a catalog using the tile list In this example, we’ll display product data and images using a grid format instead of data rows. This functionality is useful when you need to create output for an online storefront, or to simulate search output like Google Images.

http://images.google.com/�


• Add a new column to the PRODUCTS datasheet named “Image”.

• Assemble a set of appropriately sized images on your PC. To store them in the datasheet, right click on the “Image” cell and select “Insert Image(s)…”. Insert an image for each record.

Your PRODUCTS datasheet should look similar to this one:

• Now let’s create a new page named “View Products Catalog”. Add the Header

and Left Nav masters to it.

• Drag the “Tile List” widget onto the page.

Note: If your Tile List displays only as a single rectangle, make sure the “Show Widget Boundaries” option is checked on the View menu.

• Using the properties panel, we can check or update the properties for the tile list.

Rename it to “Product Catalog” and make sure it is set for 3 items across and an undefined number of rows (the grid will change to fit the datasheet contents).

Tile

Tile List


• Now let’s populate the Tile with our content. This process is similar to populating

a data table. Add labels and placeholders as below. Drop an image widget into the tile (click Cancel to avoid dropping an actual image).

• Now create a Get Products record action on the canvas.

• Just as with the data table widget, we need to map each of the datasheet

columns to the placeholders on the Tile Grid.


• Now launch the simulation. Your results should be similar.


7. Keyboard Shortcuts

Keyboard shortcuts let you perform repetitive tasks faster and more easily. Activities like widget selection and alignment benefit greatly from the use of shortcuts.

Controlling the Studio Ctrl+N New Project Ctrl+O Open Project Ctrl+M Check In/Out Dialog Alt+F4 Close Studio Ctrl+Z Undo Ctrl+Y Redo Ctrl+S Show Sync Flag Spacebar Pan Tool (While Pressed) Ctrl+= Zoom In Ctrl+- Zoom Out Ctrl+0 Zoom To Fit Ctrl+1 100% F1 Help F3 Toggle Comments Panel F5 Toggle Widget Boundaries F6 Toggle the Directory F7 Toggles the Details Panel F10 Open Project F11 Simulate

Widget Manipulation

Ctrl+C Copy Ctrl+V Paste Ctrl+X Cut Ctrl+Enter Duplicate Ctrl+A Select All widgets within the Current Container Ctrl+Up Select Parent Ctrl+Down Select Child Ctrl+Left Select Next Peer

Ctrl-Right Select Previous Peer Ctrl+Drag Widget Copies Shift+Drag Moves widget along its X/Y Axis Ctrl+Shift+Drag Copies widget along its X/Y Axis Ctrl+Alt+Drag Lasso Zoom Shift+Click Boolean Selection Shift+Arrow Nudge widget by 10 pixels

Layout

Ctrl+Quote Hide Grid Ctrl+Semicolon Toggle Auto-guides Ctrl+G Group Ctrl+U Ungroup

Order

Ctrl+Left Back Ctrl+Right Forward Ctrl+Shift+Up Bring to Front Ctrl+Shift+Down Send to Back

Alignment

Ctrl+Alt+Up Align Top Ctrl+Alt+M Align Middle Ctrl+Alt+Down Align Bottom Ctrl+Alt+Left Align Left

Ctrl+Alt+C Align Center Ctrl+Alt+Right Align Right Ctrl+Alt+H Distribute Horizontally Ctrl+Alt+V Distribute Vertically Shift+Drag Lock X or Y Position

Formatting

Ctrl+B Bold Ctrl+I Italic Ctrl+U Underline Ctrl+T Edit Style

Document Editing

Ctrl+Shift+Enter Insert above Ctrl+Enter Insert below Ctrl+Tab+Enter Insert child Ctrl+Alt+Enter Insert last Ctrl+Alt+Up Move up Ctrl+Alt+Down Move down Ctrl+Alt+Right Arrow Indent Ctrl+Alt+Left Arrow Outdent Esc, Alt+Enter Commit Ctrl+X, Shift+Delete Cut Ctrl+C, Ctrl+Insert Copy Ctrl+V, Shift+Insert Paste Delete Delete

irise visualization workbookassets.irise.com/files/pdf/visualization_workbook_v7.pdfirise...

Documents