Mentoring Workbook v8 01

8/6/2019 Mentoring Workbook v8 01

1/79

iRise Mentoring Workbook 8.01 Page 1 Printed 6/2/2010 7:46:26 AM

iRise Mentoring Workbook

Updated for iRise StudioVersion 8.01June 2, 2010

Prepared byBill Smith, iRise Inside Sales

2010 iRise, Inc.

Please send corrections and suggestions [email protected] or [email protected]


2/79


Table of Contents

1. Introduction ............................................................................................................... 31.1. Getting started .................................................................................................... 41.2.

Create and Navigate a Scenario ........................................................................ 6

1.3. Add Requirements to a Scenario ....................................................................... 9

2. Common Table Patterns ......................................................................................... 112.1. Display a list of customers in a table ................................................................ 112.2. Display customer detail .................................................................................... 172.3. Edit the customer record .................................................................................. 192.4. Using an Action to change widget properties ................................................... 222.5. Add a new customer ........................................................................................ 242.6. Adding a Draggable Confirmation Pop-up box (NEW in v8.0) .......................... 27

3. A Basic Search Pattern ........................................................................................... 293.1. Search for customers ....................................................................................... 293.2.

Create a temporary customer record on the clipboard ..................................... 34

4. A Data-Driven Decision .......................................................................................... 37

4.1. Enter login credentials ...................................................................................... 374.2. Decide if the login is valid ................................................................................. 38

5. Creating a Drag & Drop Portal Experience (NEW in v8.0) ...................................... 43 6. Reusable Assets: Masters, Menus, Styles, and Templates .................................... 45

6.1. Create a header master ................................................................................... 456.2. Break a master reference ................................................................................. 496.3. Create a navigation menu ................................................................................ 506.4. Change the menu style .................................................................................... 536.5. Add additional menu items and submenus ...................................................... 556.6. Create tabbed sections using a menu .............................................................. 576.7. Templates ........................................................................................................ 616.8. Content Modules .............................................................................................. 626.9. Other Reusable Assets .................................................................................... 62

7. More techniques and patterns ................................................................................ 647.1. Formatting a data table .................................................................................... 647.2. Use Cast to get records where Account Owner equals Username .................. 647.3. Scrolling a data display table ............................................................................ 667.4. Count the customer records ............................................................................. 677.5. Format table cells using inheritance ................................................................. 687.6. Hide a table row ............................................................................................... 707.7. Modifying table rows and cells ......................................................................... 727.8. Create a table from a .csv file ........................................................................... 737.9. Create a catalog using the tile list .................................................................... 75

8. Keyboard Shortcuts ................................................................................................ 79


3/79


1. Introduction

The iRise Mentoring Workbook will introduce you to modeling techniques and patterns thatwill 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 Documentview 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 iRiseStudio before starting the exercises. We also recommend the Studio Overview Tutorialand 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. Onthe other hand, if you are a hands-on learner or just want a quick look at how to build iRisesimulations, 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. TheCommon 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 iRiseuser community at www.catalyze.org is a good place to find other iRise users who are happyto share their knowledge, opinions, and favorite iDocs.

If youre a seasoned user of iRise and would simply like more information on the latest iRisecapabilities, refer to Whats New in iRise 8 within the Help pages.

Tell me, and I will forget.

Show me, and I may remember.

Involve me, and I will understand.

Chinese proverb


4/79


1.1. Getting started

When you start iRise Studio, you have the option to edit a project or create a new one. Forthe 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 Simulationview (not the Document view) pretty much all of the time, so make sure thats where youare. Do this now using the File menu.

Familiarize yourself with the iRise Studio landscape as this workbook will often makereferences to it.

Set your default iRise Studio preferences on the Edit menu. Select Preferences andchange the default page width to 800 pixels, and the section height and width to 20pixels. Table cell width should be 100 pixels.

Property Panel

Project Panel

Canvas

Page

Launch Button

FormattingToolbar

Widget

Details Panel


5/79


From the View menu, make sure Show Widget Boundaries is checked and theComments Panel is unchecked.

There is auto-save functionality in iRise, so you never need to save your work, unlessyou 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 exportan iDoc from Studio, go to FileExport and choose either 1) as iDoc or 2) as protectediDoc.

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

iRise has a very good memory of what you have done, so you can undo even a longseries of actions using CTRL-Z (or Undo on the Edit menu). A notable exception isundoing 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 simulationwill launch from the page where you clicked the green button. If your page depends ondata from another page, youll normally want to launch from that page to ensureeverything works properly.

Youll probably want to set your browser to open in the same tab to avoid opening a newbrowser window each time you start a simulation. iRise is compatible with the followingInternet browsers:

Microsoft Internet Explorer v6 sp2

Microsoft Internet Explorer v7

Microsoft Internet Explorer v8

Mozilla Firefox v3.5

Apple Safari v 4.0

Some people prefer to puzzle over things they dont understand until they figure them out. If

youre not one of those people, please dont hesitate to contact your iRise sales rep ortechnical resource, or contact iRise support ([email protected]). We are glad to help.


6/79


Scenario Ideation

Scenario ideation is the process of 1) identifying key scenarios to simulate 2) visualizingthese scenarios using Pages, Decisions, and Clouds, and 3) validating the defined scenarioswith your team members. This section covers how to create and use a scenario within iRiseStudio.

Here is a quick summary of each of the widgets you can leverage during scenario ideation:

PagesPages represent individual pages or screens in your application.

DecisionsDecisions are used to create dynamic navigation that branches into multiple paths.

CloudsClouds can be used to represent abstract concepts, processes, or manual activitiesthat occur outside the system being modeled.

Please note, you also have the ability to link scenarios to scenarios to show a morecomplete workflow

1.2. Create and Navigate a Scenario

To begin building a scenario, click New Scenario from the project directory. rename itUser Logs In.

Now drag a Page widget onto the whiteboard (alternatively, you can also right-click onthe whiteboard and select the Insert Page option. rename it Login Page.

Next, add a Decision widget to the right of Login Page and call it Valid Login?.


7/79


Now, add two more pages and a cloud to complete the scenario as shown in the picturebelow. Notice the actual pages, decision, and cloud from your whiteboard have beenadded to the Directory Panel and are ready to use in building your simulation.

While, holding down the Alt key, drag and drop the widgets onto one another to createnavigation between widgets. Please note: you can may also connect widgets withoutholding the Alt key, these arrows, however, are purely conceptual.

Next, lets color-code the widgets in your scenario to identify the primary vs. alternativebranches within the scenario. On the Login Page, right click Color Green toindicate the expected path. Do the same for the Account Page. Next, color the LoginFailure Page Red, to indicate the alternative path. Finally, color the Valid Login?decision Blue to indicate a decision point.


8/79


Yours should look similar:

Now, lets take a look at what happened when you created the navigation betweenwidgets by holding the Alt key. Double-click on the Login Page to access that chapter inyour simulation. On the Login Page, Studio has automatically created a text box widgetindicating what comes next in the scenario and linked that text widget to the Valid Login?decision on the canvas.

From the Login Page, launch your simulation in the browser. Click on the link Go ToValid Login? Because you have navigated to a decision within the scenario, a pop-upwill appear asking you to make a decision between Account Page and Login FailurePage.

If you choose Account Page, you will be taken to a blank page without furthernavigational options. This is because your scenario stops at the Account Page. If youchoose Login Failure Page, you will find links to the two pages to which your scenariocould go next. In summary, holding the Alt key allows you to create the navigation linksso that you can walk-through and validate the workflow (even before any page logic isadded.

Please note: You can also move through your scenario using the arrows in your bottomtoolbar:


9/79


Or, if your Directory Panel is not expanded, click to expand and navigate through yoursimulation as you would in Studio:

Collapsed:

Expanded:

1.3. Add Requirements to a Scenario

While the above exercise was completed in Simulation View, in Document View, youcan add requirements or supplemental text to a scenario. By adding text to yourscenario, you can communicate additional details about the scenario.First, toggle todocument view from your scenario.

Beneath the visual component of your simulation you will see the directive Clickhere to add requirements. When you click, a text input field appears. Type thefollowing requirement, or something similar: System must validateusername/password combination.

Click on the right arrow to complete the requirement. An requirementID will be

assigned. To associate this requirement with an element on the page, grab the small arrow

to the left of the requirement ID, drag the requirement to the applicable widget,and drop it there.


10/79


A line will display, as well as a callout letter on both the requirement as well asthe element on the page. Yours should look similar to this:

Click below your first requirement and add another. This time, clicking on theright/left arrows will allow you to indent as desired in order to indicate parent-childrequirement relationships.

These requirements will now be included when you export your simulation to aword document (File ExportDocument). Please note: you can also exportthis document text to a .csv file which can then be imported into a downstreamtool.

A final note, you can add document text any widget at anytime at the scenario,page, or master level.


11/79


2. Common Table Patterns

Using iRise Studio datasheets, you can easily incorporate sample data into your simulationto create a dynamic experience for your end this sample data users and stakeholders. Muchlike a final coded application, this sample data can be saved, retrieved, updated and deletedwithin 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. Its best practice to name datasheetsin 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 byright-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. Its best practice to name column headers using InitialCaps. Make sure each column is uniquely named and be careful not to add extra spaces

New Datasheet icon


12/79


or unnecessary punctuation, since you will reference the data in these columns by theirnames. You will need four columns for this exercise:

o ID

o Last Name

o First Name

o 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 somethingsimilar.

Now lets display your customer records on a page. Go to the project panel and renamethe default Page 1 to Customer List. If you have to, click on Page 1, then right clickto 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 Datatable (not Normal table).


13/79


Note: Data tables dynamically grow or shrink depending on the data containedwithin 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 either:

double-click in the table (or anywhere) and begin typing to create a textwidget or

right-click on the table cell (or anywhere) and select Insert Text.

For a complete list of shortcuts refer to the Keyboard Shortcuts section of thisdocument.

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

Additionally, to edit the text you can triple-clip to enter the textbox and select allthe text.

Add the remaining table headings.

To populate the display table with data, you need to prepare it by adding placeholders toreceive the data and control formatting. To do this, simply add a text widget in eachcolumn of the data row (red row). You can name them anything, but its a good practiceto 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:


14/79


To retrieve all of the CUSTOMER records into your new table, drag and drop yourCUSTOMER datasheet onto the canvas (scroll or resize the page if you dont 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 matchdatasheet columns to placeholders, 2) drag the datasheet to the data table so only thedata row (in red) is selected, then match columns to placeholders, or 3) drag thedatasheet to each placeholder one at a time. Lets use the second approach this time.


15/79


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

Notice how data mapping uses red lines to represent data flow. Data flows onto apage when it loads and off of a page when you Submit a page. Later you will seeblue lines in iRise Studio, which represent navigational flow (the order in whichthings are done).

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

Red lines expanded


16/79


To collapse the lines into a single line, you can right-click any red line label andselect 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.

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

Red lines collapsed


17/79


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 CustomerDetail page. Were 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 newpage, create a Normal table with 2 columns and 4 rows. Resize it to something like theone below by grabbing the handles (about 200 x 250 pixels). Add labels andplaceholders for the data as below.

Now lets 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 pagefrom the project panel onto the canvas.

Now drag the ID text widget to the Customer Detail page icon. This allows a user toview a customers details by clicking the customer ID.


18/79


Notice that the [id] field turns blue and is underlined. Thats the default fordisplaying text links (you can change it using the Format menu). In addition totaking you to the page, clicking such a link in a data display table puts theclicked record on the clipboard, a topic we cover more fully later.

Now return to the Customer Detail page to populate your table. This time, well use the

Record Action widget instead of dropping the datasheet on the canvas. If you dontsee it, you may need to click the More icon:

Drag and drop the Record Action icon onto the canvas. Now select theCUSTOMER 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, well choose the Clipboard Record(s) option in the property panel.Going forward, well just tell you to create a Get Customer record action on thecanvas, 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 byentering a new name in the Button Label field on the property panel.


19/79


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. Clickany one of the ID hyperlinks. This should take you to the Customer Detail page andshow the data for the customer you selected. The Back to List button should take youback.

2.3. Edit the customer record

Now well let the user edit and update the customer data.

Create a new Edit Customer page. Drag a Form widget onto the page. Using theproperty 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 inthe property panel) and link it to the newly created Edit Customer page.


20/79


Copy the table from the Customer Detail page and paste it inside the form on the EditCustomer page. Name it Edit Customer Table.

When you copy a table, make sure you have selected the entire table, not just acell or row. You can copy with CTRL-C, or right click and select Copy while thetable 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 theclipboard record(s).

By dragging the Get Customer action, map the datasheet inputs (ID, Last Name, FirstName, 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 therecord 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 theappropriate field name for each after specifying that you want to Send data.


21/79


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 updatethe record. You do this by dropping an Action onto the canvas, selecting Submit/ResetForm, 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 theCustomer 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.


22/79


Launch the simulation from the Customer List page. You should now be able to select acustomer, view details, and then edit that customer. You can view the CUSTOMERdatasheet 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 thepage. 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 userinput 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 inthe 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.


23/79


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 bluenavigation 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 youhave placed the focus in on that field.


24/79


Repeat for the First Name and State input widgets. Hint: you can copy and paste theaction widget, but remember to change the widget that is affected.

2.5. Add a new customer

Now lets 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.


25/79


Delete the Get Customer action from the Add Customer page canvas. Create a SaveCustomer record 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 toremap, but it is a necessary technique when you need to send data from one input widgetto multiple record actions.

Now, delete the Update Customer action, which we dont 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 willlet us use the record later without having to get it from the datasheet. The label icon onthe 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 toAdd Customer page. If you simulate the page now, the button is likely to be overwrittenby the rows. Give it a try.

Because the table can display any number of records, we use the push feature to keepthe Add button below the table. However, to create space above the button, well alsowrap it in a Section. To do so, right-click the Add button and wrap it in a Section.


26/79


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 tableregardless of your table size. Click Add to create a new customer record. If nothinghappens, make sure it is linked to the Add Customer page.

Note: If your section is tightly wrapped around the Add button, you may seeunwanted scroll bars, like this:

If so, go to the property panel for the section and setHorizontal and Vertical Scroll to No. Go to Preferenceson the Edit menu and do the same to change the Sectionand Form default scroll bar behavior.


27/79


2.6. Adding a Draggable Confirmation Pop-up box (NEW in v8.0)

Now lets add the functionality to trigger a confirmation pop-up box before the user can add anew customer. Well then enhance this pop-up functionality by making the pop-up draggableutilizing the new draggability property feature that became available with iRise 8.

Add a section to the Add Customer page and shade it grey. For ease of this example, itwould be best to place it beside your table as shown below though in a real simulationyou would layer it directly on top of your content (But you need to make sure that itscontained within the form).

Name this section Add Customer Popup on the properties tab.

At the bottom of the properties tab, check Hide in Browser since we dont want the greyconfirmation box to appear until after the user attempts to save a new customer. By


28/79


checking this property, you are indicating the grey confirmation box will not show in thebrowser when the page is first launched.

Double-click within the grey confirmation box to add text prompt. Add an OK button and aCancel button.

On the page, delete the existing link from the Save button to the Customer Detail Page.

Create a new Action to Show/Hide properties. Ensure you select the Show widgetoption and click the checkbox for the Add Customer Popup section.

Click Done

Now link the Save button to the Show widget action you just created

Create a Submit Form action on the canvas. Link the OK button to the Submit formaction, then link the Submit Form action to the Customer Detail Page.

Create a new Action to Show/Hide properties. Ensure you select the Hide option andthe checkbox for the Add Customer Popup section widget. Link to the Cancel button toHide the popup section.


29/79


Launch your simulation from your Add Customer page. Add a new customer. When yourconfirmation box pops up, notice that the box is fixed to the page and cannot be moved.Return to your Add Customer page within Studio.

Select your Add Customer Popup section and update the Draggable property to Drag andRelocate.

Launch your simulation from the Add Customer page and note that you can now movethis confirmation box around your page.

3. A Basic Search Pattern

You can simulate searches using the Get Record action and modifying the associatedwhere conditions in the property panel. When performing a simple search with multiplecriteria, you can choose AND or OR conditions, but not both at once. Searching multiplefields (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, notnecessarily the records precisely required by the search algorithm. Because search criteriacan 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 SearchCustomers.

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


30/79


Now use the text widget to add 3 text fields above the Customer List Table. The text willlabel our search criteria.

We also need to modify the page to capture the users 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 theselect 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 panelrename it to Select ID and make sure it is of type Dynamic List


31/79


Rename the Add button to Back to List (you may need to expand the section). Nowupdate the navigation link by right-clicking on the Add Customer link on your canvasand choosing Edit Destination.

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

Now populate the State select l ist with state abbreviations to create a standard list.Include a blank selection (hint: double-click, then press Enter). Make sure at least one ortwo match your sample data. Set the default to blank.

Ensure the ID select list type is dynamic (this lets us get values from the CUSTOMERdatasheet). Connect a Get Customer record action and send the ID to it. Set the

directive in the property panel to Select One.


32/79


Next well set up the search criteria. Start by creating another Get Customer action onthe 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 partiallast name and still get results, so we modify the where condition. Be sure GetCustomer is selected, then click the Where button on the property panel and add a newrule. 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 thedatasheet (including blanks). However, often we only want to search on one or two of thefields. To enable this, click the ellipses icon (...) for Last Name and State. Check the boxto ignore a blank.


33/79


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.

a.

Add a button named Search near the search fields. Create a Submit Form action anda Refresh link on the canvas. You can get a Refresh by dragging the Link widget tothe canvas.

When the Set Destination pop-up window displays, select the Window controlsoption and select the Refresh radio button.

Note: Strictly speaking, the Refresh isnt required here, but it helps documentwhat is going on. A submit not followed by a destination keeps you on the samepage.


34/79


Drag the Search button to the Submit Form action, and then link Submit Form toRefresh.

When we display the results, we dont want to display ALL records, only those that matchour criteria, so change the Get Customer action that is populating the display list from AllRecords to Clipboard Record(s).

Go to the Customer List page. Add a Search button in the section next to the Addbutton. Link it to the Search Customers page.

Launch the simulation from the Customer List page. Try searching on one or moresearch terms. Click Search without setting any parameters to return all records. If yousee 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 toMicrosoft Word or Windows). The data remains on the clipboard until the user closesthe browser, clears the entire clipboard, replaces the data with a new value, or directlyupdates it by setting the value in the property panel for the clipboard instance.

In this section, youll 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 SearchCustomers page.


35/79


Launch the simulation from the Search Customers page. Click Search to retrieve allrecords. Then click one of the IDs 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 youselected, not the entire result set. This is because the list is populated by records on theclipboard. Selecting one Customer record from the list replaced the entire result set thatwas on the clipboard. You can avoid this by temporarily renaming the record you selectfrom the list, as below.

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


36/79


Check the Rename property on the property panel, then enter CLICKED for the newcustomer record name.

Go to the Customer Detail page. Click the Get Customer action. Click the Where radiobutton 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 onthe Search Customers page.

On the Add Customer page, change the Save button destination to Customer List anddelete the clipboard attached to the Save record action (just some housekeeping to makeeverything work consistently).

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


37/79


4. A Data-Driven Decision

4.1. Enter login credentials

Decisions let you simulate navigation rules and business logic when a users next actiondepends 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 bya 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 textwidgets 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 becolor red and bold.

Drag a clipboard to the canvas. Drag the input field from the Username input field to theclipboard. Select Send data and enter Username in the Name field, then click OK.


38/79


Repeat for Password by dragging the Password input field to the clipboard. SelectSend 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 aField pop-up window displays. Enter Login Error and click OK.

Note: You must use another clipboard for this action. A fundamental principle of iRise isthat, although all clipboards refer to the same memory space, you cannot put somethingon 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 theusername bsmith with password password, or perhaps your own name.

Create a decision named Valid Login? by clicking the new Decision icon. Enter thename Valid Login?, then press Enter or Tab. You should see a canvas with the ValidLogin? 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.


39/79


Drag a clipboard to the left side of the canvas. Create a Get Users action to the right ofthe clipboard. Now drag the clipboard to the Get Users action, add a where conditionand select Username from the pop-up. Click OK

Repeat for the Password field. Here you are asking the simulation to compare theUsername and Password values on the clipboard to values in matching columns on theUSERS datasheet. We will use the result of this comparison to determine the workflowthe user will go through.

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


40/79


Drop another clipboard on the page between the Valid Login? decision point and theLogin page. Drag Valid Login? to the clipboard and then drag the clipboard to the Loginpage 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 valueto Please Try Again. This will be the error that displays when a user supplies invalidlogin credentials.

Drag the Login Error constant to the clipboard.

Drag the Get Users action to the Valid Login? decision point. The Select a Record orField pop-up window displays. Click the Record radio button and select USERS tosend the entire record to the decision point. Click OK.


41/79


Now well define the criteria that determine users path. To define the criteria, go to theproperties panel for the Valid Login? decision and click Edit Rules.

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


42/79


Now return to the Login Page and add a Submit Form action to the canvas. Drag theLogin button to it. Now add a clipboard to the Login page canvas. Drag the SubmitForm action to it.

Drag the Valid Login? decision to the canvas. Drag the clipboard to it. Well use thisclipboard to clear the error message. Of course, Login Error will be blank until the usergoes 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 clipboardproperty 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: Editingvalues 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 errormessage. A valid login will take you to the blank Home page.


43/79


5. Creating a Drag & Drop Portal Experience (NEW in v8.0)

You can simulate an interactive portal/dashboard-style experience by modifying theproperties of layered sections. This portal effect allows you to drag and reposition widgetson a page. The goal is to allow users to mimic the feel of moving portlet objects as theywould in a portal application.

Create the Portal Using Drag & Drop

Create a new page titled Reporting Dashboard

Insert two side-by-side sections and using the property panel adjust their dimensionto 250 X 400. Rename them in the properties panel as LeftDropSection andRightDropSection.

Shade both sections grey.

Using the properties panel, adjust the Layout to Vertical layout as shown below forboth the LeftDropSection and the RightDropSection. This will enable the stackingeffect that youll see when rearranging objects within the two grey sections.

Add three sections of various sizes to the LeftDropSection. Shade them differentcolors and add text labels such as Year to date Reports, Quarterly Goals andMonthly Goals so that the LeftDropSection looks similar to the below:


44/79


Add four sections of various sizes to the RightDropSection. Shade them differentcolors and add text labels such as % Closed, New Leads MTD, Pipeline by Repand % Goal by Rep so that the RightDropSection looks similar to the below:

Select the top left colored box and set the Draggable properties to Drag andRelocate. This will then reveal the remaining properties defining drag & drop.

Select the associated with the Restrict Drop To property to restrict this colored

sections drag & drop properties to the LeftDropSection AND RightDropSection.Click OK.


45/79


Repeat this for all the colored sections so they each have the draggable property ofDrag and Relocate and have the Restrict Drop to the LeftDropSection ANDRightDropSection

Launch your simulation from the Reporting DashBoard page and try moving the

colored boxes back and forth between the grey sections.

6. 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, well create some reusable assets such as a pageheader and a multi-tiered navigational menu, and then add them to our pages.

6.1. Create a header master

Create a new master named Header.


46/79


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 asproperty is set to Reference (the default).


47/79


Drop as defines how changes are handled to o the master. Referencecauses changes to appear wherever the master is used. Drop as copy createsa copy and breaks the reference to the master so changes on pages where themaster is dropped do not propagate.

Note: You can break a master reference later if you realize you need aseparate 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 Pastefrom External). Adjust the image or master size as needed.

Now lets personalize 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 users username in the welcome message, well get it off the clipboard,where it was placed during the login scenario. Place a clipboard on the canvas, and thendrag it to the [username] portion of the welcome text widget (nudge the cursor slightly toselect [username] only). Choose Username for the dataflow.

To display the current date on the header, drop an Operator widget on the canvas. Fromthe dropdown menu select Util Date Current. The Current Date widget displays onthe canvas.


48/79


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 thecanvas. 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 currentdate in iRise Help.

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 tocreate a link.

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

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


49/79


Now to begin using the header master, return to each of your pages (including the Loginpage) and drag and drop the header to the top of each page. Reposition as needed bydragging (or by setting X,Y coordinates). Adjust the other page elements as needed.

6.2. Break a master reference

In the example above, we added the header master to each page by dropping as areference. However, at times you may need to make a local edit to the content within a

Master without affecting the Master itself. (Additionally, if you knew in advance youwould want to locally edit a given pages Master, when adding the Master to the pageinitially, you could Drop as a Sample instead of dropping as a reference. )

Lets "break apart" the Master on the Login page.

Return to the Login page. Right-click on the header master and select the Break MasterReference option.

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

Your header should look similar to this:


50/79


Launch your simulation from the Login page. Notice that only your Login header haschanged while the others remain the same.

6.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 trickfor 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.


51/79


Note the difference between the text that displays for the menu selection and the name ofthe 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 resideswithin (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 select the desired object. Theblack label indicates your current selection. To access a parent object, just clickit on the bread crumb trail.


52/79


To set the menu navigation, drag the Customer List page to the canvas, then drag theCustomers Item (not the text widget) to it. If you accidentally resize rather than drag themenu item, you can use CTRL-Z to easily undo it.

Create a new page named Products. Drag it to the canvas and connect the Productsmenu item to it.

Create a cloud named Cases. Drag it to the canvas and connect the Cases menu itemto it.

Adjust the dimensions of the master to the size of the menu by dragging the edges of themaster 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 ontothem. Reposition other page elements as needed.


53/79


6.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.


54/79


55/79


6.5. Add additional menu items and submenus

Go to the Left Nav Menu master. On the properties panel, ensure that vertical scroll is setto No.

Right-click the Customers menu item and select Add MenuItem. Set the text label andmenu 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 andorient it vertically.

In the properties panel, rename the submenu to My Tasks Submenu. Set the width to150 pixels. Click the Vertical Tree property. Set the X offset to 30.


56/79


Set the labels and menu item names to My Customers, Search Customers, and AddCustomers.

Select the entire submenu (you can use the bread crumb trail). While the cursor ishovering 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 cant seeit). 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 mastersto it. Place it on the canvas of the Left Nav Menu master, then drag the My Customerssubmenu item to it.

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


57/79


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

6.6. Create tabbed sections using a menu

On the My Customers page, create a menu named Tabbed Menu using a horizontalmenu with 4 menu items.

Set the text and menu item names to My Customers, Customer Detail, Products, andCases.

Select Manage Styles from the Format menu. Click on the Menus style and clickDuplicate. 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 CustomerTabbed Menu. With the entire menu selected, change the style to Tabbed Sections.


58/79


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 youare editing the Tabbed Sections style, not the Normal Style, which may happen if you

have not selected the Customer Tabbed Menu or havent chosen the Tabbed Sectionsstyle from the FormatManage Styles menu for editing.


59/79


Edit the Tabbed Sections style to set the top, left, and right borders of the Current Pagestate to black, solid line, one pixel wide (to enter the pixel width, type the number 1 intothe drop down list).

Add a section to the page named My Customers Section that is 480 pixels wide and400 high. Position it just below the tabbed menu. Set the entire border to black, solidline, 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 MyCustomers menu item to the action. Repeat appropriately for the each of the other menuitems.


60/79


Start the simulation from the My Customers page. When you click the My Customerstab, 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. Thetext 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 DetailSection

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

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


61/79


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

Now well set things up so clicking a tab displays the correct section. Drop an actionwidget above the first Set Menus action. Choose Switch Views, then My CustomersSection from the select list. Drag the Set Menus action to the Switch Views action.Repeat as appropriate for the other tabs and sections.

6.7. Templates

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

Create a new template named My Sample Template.

Design the template layout. Lets drag our Header master to the top of the templateand then drop the Left Nav Menu master just below the Header.


62/79


To create a new page from a template, simply drag the template to the canvas of anexisting page. Alternatively, drag the template to a Scenario whiteboard.

Considerations when using templates: Unlike masters, templates must be applied atthe time of page creation as changes to the template do not propagate to existing pages

that are already using templates.

6.8. Content Modules

Reusable iRise content modules can be created, license protected and distributed. TheiRise Definition Center supports the distribution of third-party pre-packaged and licensedvisualization content, such as SAP. The intellectual property contained withinvisualizations can be protected and licensed to a specific Definition Center and can onlybe modified by a set of authorized iRise Studio users.

6.9. Other Reusable Assets

To speed creation of high fidelity simulations you will want to leverage iRise simulationassets that you build earlier or that were created by others. After iRise Studio 7.2, you

can import assets directly from another project without first exporting it to an iDoc file.Well create a new project entitled Workbook Project 2 then import the My SampleTemplate 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 ImportFrom another Project


63/79


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 themasters that are related to it.

Note: Many customers set up a project that contains a collection of theirorganizations favorite iRise assets.

Close Workbook Project 2 and reopen your Workbook Project.


64/79


7. More techniques and patterns

7.1. Formatting a data table

Go to the Customer List page. Select the table. Set the border color to the same coloras the Header master.

Make sure the table is selected then click the Collapse Border checkbox in the propertypanel. Borders for contiguous cells will be collapsed for a finer look.

Set the table row color to the same color as its borders. You can use the bread crumbtrail to select the table row more easily.

Now well make the table more legible. Click anywhere on the red data row. On theproperty panel, alternate the rows with light grey or another color.

7.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 MyCustomers 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 beingextended 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 ofthe section.


65/79


Add an Account Owner column to the CUSTOMER datasheet. Use your username to setyourself 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 requires1 input field and 1 output field. The first input is the field (or record) you want tore-label (in this case Username, which is on the clipboard).

Drop a clipboard onto the canvas. Drag the clipboard to the Cast operator andsend Username to it.

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


66/79


.

Map the Get Customer action to the display table, then test your work by launching thesimulation from the Login page with an appropriate login. Youll need to navigate to theMy Customers page with the Left Nav Menu.

7.3. Scrolling a data display table

On the My Customers page and view, select the entire display table. Another way to dothis 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 barsare enabled when set to Auto. You can change scrolling behavior by editingthese values in the properties panel or by resizing the section.

To prevent the table header from scrolling, copy and paste the data table above theoriginal table (but outside the section). Select the duplicate table and change the numberof 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 andchoose Table SelectRow. Press the delete key to delete the header row.


67/79


Position the section directly below the remaining header row.

7.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. 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 cursorto select it). Create a new data flow called Customer Count.


68/79


69/79


Select the entire table. Use the handles to change the height and/or width for all the cellsin 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 rowonly. 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 appearsafter you click anywhere on the page.

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

Select all of the cells in the right column using CTRL-Click. Set the height for all at onceto 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 nowbe left justified.


70/79


7.6. Hide a table row

On the Customer Detail page, select and then name each row of the displaytable (Last Name Row, State Row, etc.). Make sure you have selected therow 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 browsercheckbox.


71/79


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 therows when you run the simulation.

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


72/79


To change the behavior so the table height is adjusted and the other rows remain thesame height, set the text widget height to be 2 pixels less than the cell or row height (48pixels). 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 moreprecisely, a better technique is to wrap them in a section. Alignment settings for the cellwill apply to the section but not to its contents.

7.7. Modifying table rows and cells

Go to the Customer Detail page. Select the top row. In the property panel, select InsertRow (above). Reposition the table as needed.

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


73/79


Add a text widget Customer Detail to the cell. Set formatting for the cell (not the textwidget) 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, 18point.

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.

7.8. Create a table from a .csv file


74/79


Create a PRODUCTS.csv file using Microsoft Excel or a similar tool. Give it threecolumns: Part Number, Description, and Price. Add a dozen or so records. Make surethe part numbers are unique.

Save as a .CSV (comma delimited) file.

Create a new PRODUCTS datasheet and use the import widget to browse and importyour PRODUCTS.csv file. You wont need to create column names as they will becreated when you import the file.

Copy and paste the data display table from the Customer List page onto the Productspage. Name it Products Table.

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

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


75/79


76/79


Now lets create a new page named View Products Catalog. Add the Headerand 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 ShowWidget 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 anundefined number of rows (the grid will change to fit the datasheet contents).

Tile

Tile List


77/79


Now lets populate the Tile with our content. This process is similar to populatinga data table. Add labels and placeholders as below. Drop an image widget intothe 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.


78/79


Now launch the simulation. Your results should be similar.


79/79

8. 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. Please note: these short cutsare also available from within Studio by selecting Help Quick Reference Guide.

Controlling the StudioCtrl+N New ProjectCtrl+O Open ProjectCtrl+M Check In/OutDialogAlt+F4 Close StudioCtrl+Z UndoCtrl+Y RedoCtrl+S Show SyncFlagSpacebar Pan Tool(While Pressed)Ctrl+= Zoom In

Ctrl+- Zoom OutCtrl+0 Zoom To FitCtrl+1 100%F1 HelpF3 Toggle CommentsPanelF5 Toggle WidgetBoundariesF6 Toggle theDirectoryF7 Toggles the DetailsPanelF10 Open ProjectF11 Simulate

Widget ManipulationCtrl+C CopyCtrl+V PasteCtrl+X CutCtrl+Enter DuplicateCtrl+A Select Allwidgets within theCurrent ContainerCtrl+Up Select ParentCtrl+Down SelectChildCtrl+Left Select NextPeer

Ctrl-Right SelectPrevious PeerCtrl+Drag WidgetCopiesShift+Drag Moveswidget along its X/YAxisCtrl+Shift+DragCopies widget along itsX/Y AxisCtrl+Alt+Drag LassoZoomShift+Click Boolean

SelectionShift+Arrow Nudgewidget by 10 pixelsShift+Alt Move toolZ Select Behind tool

LayoutCtrl+Quote Hide GridCtrl+SemicolonToggle Auto-guidesCtrl+G GroupCtrl+U Ungroup

OrderCtrl+Left BackCtrl+Right ForwardCtrl+Shift+Up Bring toFrontCtrl+Shift+Down Sendto Back

AlignmentCtrl+Alt+Up Align TopCtrl+Alt+M AlignMiddleCtrl+Alt+Down AlignBottom

Ctrl+Alt+Left Align LeftCtrl+Alt+C AlignCenterCtrl+Alt+Right AlignRightCtrl+Alt+H DistributeHorizontallyCtrl+Alt+V DistributeVerticallyShift+Drag Lock X or YPosition

Formatting

Ctrl+B BoldCtrl+I ItalicCtrl+U UnderlineCtrl+T Edit Style

Document EditingCtrl+Shift+Enter InsertaboveCtrl+Enter Insert belowCtrl+Tab+Enter InsertchildCtrl+Alt+Enter InsertlastCtrl+Alt+Up Move upCtrl+Alt+Down MovedownCtrl+Alt+Right ArrowIndentCtrl+Alt+Left ArrowOutdentEsc, Alt+Enter CommitCtrl+X, Shift+DeleteCutCtrl+C, Ctrl+InsertCopyCtrl+V, Shift+InsertPasteDelete Delete

Documents

Mentoring Workbook v8 01