stpBA Storyboarding Detailed Tutorial - University of Surrey Storyboarding... · Double-click the stpBA Storyboarding icon on the Windows desktop. This will start and launch Microsoft®

- 1 -

Copyright © 2007 stpsoft limited. All rights reserved

stpsoft and stpBA are trademarks of stpsoft limited in the United Kingdom and/or other countries.

All product names, company names, brand names and logos are trademarks or registered trademarks of

their respective owners in the United States and other countries.

stpBA Storyboarding allows a business analyst or analyst developer to storyboard and validate requirements through GUI Storyboarding. The tool generates screen flow diagrams,

HTML storyboards, specifications and test scripts.

This tutorial provides a detailed guide to using stpBA Storyboarding. The tutorial requires a basic knowledge of working with Microsoft Visio®.

Note that there may be differences between the screenshots in this guide and your screen depending on which version of Visio you have installed.

For support please go to www.stpsoft.co.uk/support

The information contained in this guide is subject to change without notice. stpsoft limited shall not be liable for errors contained herein, or for consequential damages in connection with the performance or use of this guide.

CONTENTS

Introduction

Getting Started

Getting to Know the Toolbar

Getting to Know the Task List

Understanding Task Types

Adding Tasks

Storyboarding a Simple Screen

Adding Screen Navigation

Reverse Engineering a Storyboard Overview

Linking Tasks to Functionality

Configuring a Windows Message Box

Getting to Know the Shape Pop-Up Menu

Using Custom Fields

Setting Security Roles

Setting Business Rules

Generating the Page Narrative

Setting Test Cases

Storyboarding a Back-End Process

Saving the Storyboard as HTML

Automating Documentation

Managing Feedback

Baselining a Storyboard

Storyboarding Changes to a Legacy App

Introduction

http://www.stpsoft.co.uk/support

- 2 -





1. Start stpBA Storyboarding 2. Open a New Document 3. Dock the Custom Properties and Size & Position Windows

Double-click the stpBA Storyboarding icon on the Windows desktop. This will start and launch Microsoft® Visio® and display the Choose Drawing Type screen. From the Category list on the left, select the category stpBA. The stpBA templates will be displayed. Visio 2003/2007: To create a new storyboard double-click the stpBA Win 2000 template Visio 2002: To create a new storyboard select the Blank (stpBA Professional) template. A new blank document will open.

Visio 2003/2007: Click the maximise button in the top right corner of the document window to maximise the document within the main Visio® window. In the top left corner of the document canvas is a version number. The version for a new document starts at v0.01. The first time you open a new stpBA document, the Custom Properties (or Shape Data in Visio 2007) and Size & Position windows will be docked on either side of the document. Visio 2007: In this guide all references to the Custom Properties window refer to the Shape Data window.

Drag the header of the Custom Properties window and drop it on to the lower half of the Shapes section. The window will dock below the stencils. Drag the header of the Size & Position window and drop it on to the header of the docked Custom Properties window. The Size and Position window will dock into the same section as the Custom Properties window. You will see two tabs labelled Custom Props and Size/Pos. Clicking these will let you select the required window.

Getting Started

- 3 -





1. stpBA Toolbar

Following are the key tasks that the toolbar lets you perform:

1. Save as Web Page. Save your storyboard as HTML. This can then be emailed to individuals, or published on your Intranet or Extranet. 2. Generate Functionality Spreadsheet. Generate a Microsoft Excel spreadsheet containing a full breakdown of the storyboard functionality. This can be

given to developers to input into their design and or development activities. 3. Generate Test Spreadsheet. Generate a Microsoft Excel spreadsheet containing a full component functionality Test Script. 4. Generate Specification. Generate a Microsoft Word document containing a specification that is easily understood by users, enabling them to provide useful

feedback. The specification can also provide developers with sufficient detail for their design and or development activities. 5. Show / Hide Comments on Page. Show or hide the review notes on the current page. 6. Generate Comments and Change Request Spreadsheet. Generate a Microsoft Excel spreadsheet containing all review comments and change requests. 7. Set Minor Baseline. Enter change details and increase the version number by 0.01. 8. Set Major Baseline. Enter change details, set the number to the right of the decimal place to 0, and increase the version number by 1. 9. Show Task List. Open the stpBA Task List window. Requirements, changes, to do tasks and other lists can be entered in this window. 10. Show Narrative Window. Open the stpBA Page Details window. Narrative describing the page can be entered in this window.

Getting to Know the Toolbar

Shape Alignment

About stpBA

Generate Test Spreadsheet

Generate Functionality Spreadsheet

Generate Specification Generate Comments and Change Request Spreadsheet

Show / Hide Comments on Page Show Narrative Window

Show Task List

Save as Web Page

Set Minor Baseline Set Major Baseline

- 4 -





1. Open the Task List 2. Task List Toolbar

Click the Close button located in the bottom left corner of the stpBA Page Details window (docked at the top of the Visio document) to close the window. The stpBA Task List lets you enter a list of tasks related to the application being storyboarded.

Click the Show Task List button on the main stpBA toolbar to display the stpBA Task List. Tasks can be grouped by Task Type. The 4 yellow rows on the Task List are the default task types. These can be edited and deleted. Further Task Types can be added.

Following are the key tasks that the Task List toolbar lets you perform:

1. New Task Type. Add a new task type to the end of the Task List.

2. Edit Task Type. Edit the selected task type. 3. Delete Task Type. Delete the selected task type if it

does not contain tasks. 4. New Task. Add a new task. The task will be added as

a child to the selected item. 5. Edit Task. Edit the selected task. 6. Delete Task. Delete the selected task. The task’s

children (if any) will also be deleted. 7. Link Tasks. Link the selected tasks or requirements to

the form or report shape on the current page. 8. Refresh Tasks. Refresh the linked status of tasks.

9. Move Task Up/Down. Move the selected task or task type up the Task List or down the task list.

10. Outdent Task. Outdent the selected task. 11. Indent Task. Indent the selected task. 12. Focus on Selected Task. Collapse all branches to

focus on the selected branch. 13. Toggle Columns. Show or hide the Description

column and the Comments column in the Task List.

14. Generate Task Sheet. Generate a spreadsheet of tasks and a traceability matrix (see later).

15. Import Tasks. Import requirements from stpsoft Quew, IBM Rational RequisitePro or Borland CaliberRM.

Getting to Know the Task List

New Task

Edit Task

Delete Task

Refresh Tasks

Toggle

Columns

Focus on

Selected Task

Link Tasks

New Task Type

Edit Task Type

Delete Task Type

Move Task Up

Move Task Down

Outdent Task

Indent Task

Generate Task Sheet

Import Tasks

- 5 -





1. Edit a Task Type 2. Edit other Task Types 3. Reposition a Task Type

Select the Functional Requirements task type and click the button to open the Edit Task Type window. Show Tasks in Specification – If this box is ticked the tasks within the task type will be documented in the specification. Show Task Tags in Specification – If this box is ticked, the task tag (see later) will be placed next to the task name in the specification.

Automate Task Status – If this box is ticked the status of

tasks within the task type will be set when the Refresh Tasks button is clicked, and the tasks will be shown in the traceability matrix when the Generate Task Sheet button is clicked.

The Functional Requirements task type has been pre-configured such that its tasks are documented within the specification, and such that the status of its tasks will

automatically be set when the Refresh Tasks button is clicked (see later). Click the Cancel button to close the window. Select the Non-Functional Requirements task type

and click the toolbar button to see how it has been pre-configured. Click the Cancel button to close the window. Repeat this for the Changes Required To Storyboard and To Do List task types.

Task types will appear as sections within the specification. They will be documented in the order in which they appear within the Task List. The and toolbar buttons can be used to change the order in which the task types are listed. Select the To Do List task type and click the button three times to move it to the top of the list.

With the To Do List task type still selected, click the button three times to move it to the bottom of the list.

Understanding Task Types

- 6 -





1. Resize the Task List Window 2. View the New Task Window 3. Add a Heading Task

Move the mouse above the Task List toolbar until the pointer changes to indicating that the window can be resized. Left-click the mouse and a splitter bar should appear. With the mouse button pressed, move the splitter bar up with the mouse until the splitter bar stops moving. Release the mouse button and the window will resize.

Select the Functional Requirements task type and press the Insert key or click the toolbar button. The New Task window will be displayed.

Task Id – Each task is allocated a unique Task Id which cannot be changed. The Task Id is a reference number for the task. Name – The name of the task. This is the only mandatory field. Description – Tasks can be entered in a hierarchy. The higher level tasks represent headings and sub-headings, and the lowest level tasks represent the detail. Descriptions are usually only entered for the lowest level tasks. Comments – Additional comments such as priority or due date. The Comments do not appear within the specification. Tag – An alternative reference. This is useful if a task appears within another system under a different reference. Task Types can be configured to show the tags in the specification.

You will add a high level task (i.e. a heading task) which will contain some detailed tasks (i.e. child tasks). As the new task will be a heading task, you will only enter the Name of the task. However, if required, you could enter information in to the other fields on the window. Enter the following details and click the OK button:

Name : Security The new task is added to the selected task type.

Adding Tasks (1 to 3)

- 7 -





4. Add Another Heading Task 5. Add a Sub-Heading Task 6. Add a Child Task

With the Functional Requirements task type selected

press the Insert key or click the toolbar button. The New Task window will be displayed. Enter the following details to add another heading task and click the OK button: Name : Batch Jobs

The new task is added to the end of the list of tasks within the Functional Requirements task type.

Select the Security task and press the Insert key.

The New Task window will be displayed. Enter the following details to add a new sub-heading task and click the OK button: Name : User Authentication The new task is added to the Security task.

With the Security task selected press the Insert

key. The New Task window will be displayed. You will add a detailed child task. Enter the following details and click the OK button: Name : Site Authentication Description : Users can only log on to sites for which they have been granted access. Users can request access from the Site Administrator. The new task is added below the previous new task.


- 8 -





7. Add Another Child Task 8. Add Another Child Task 9. Add More Tasks

Select the User Authentication task and add a child task with the following details: Name : Unique User Name Description : The User Name will be the same as the user’s email address to ensure that it is unique.

The new task is added to the User Authentication task.

With the User Authentication task still selected add another child task with the following details: Name : Secure Password Description : Passwords will be stored in encrypted form. Entering a password will display stars (*) on the screen.

The new task is added below the previous new task. Click the first button to hide the Description column in the Task List. This is useful when browsing the list.

Select the Non-Functional Requirements task type and add the following task: Name : Response Times Description : User response times must be acceptable at low bandwidth sites. Also add the following task: Name : Usability Description : Refer to the Usability Standards.

On the Task List, tick the boxes in the column next to the two

new tasks. This indicates that the status of the tasks is complete.


- 9 -





1. Rename the Page 2. Add a Site Map Item 3. Step in to the Site Map Item

Click the Close button located in the bottom left corner of the stpBA Task List to close the Task List window. The first page will contain an overview story board for the application that is being storyboarded. Double-click on the page name at the bottom of the drawing canvas. The text will be selected. Overwrite the selected text with the words Story Board and click on the drawing canvas to update the text.

You will start by storyboarding a logon screen. Drag a Site map item shape from the stpBA Site Map stencil and drop it on to the drawing canvas. A pop-up window will be displayed. With the New Item option selected, enter the following details and click the OK button: Type : Windows form Name : Logon This will add a new windows form site map item on to the story board.

Right-click the site map item. A hyperlink will be listed in the pop-up menu called Logon. This is a hyperlink to a page containing a new windows form that you can use to storyboard the logon screen. Select the Logon option from the pop-up menu. You will be taken to the Logon page containing the Logon windows form. Scroll the page up to view the form.

Storyboarding a Simple Screen (1 to 3)

- 10 -





4. Set the Page Narrative 5. Add the Field Captions 6. Add the User Name Field

Click the Show Page Narrative Window button on the stpBA toolbar to display the Page Narrative window docked at the top of the Visio document. This lets you enter a description for the form, report or flowchart on the current page. Edit the text in the Page Narrative window as below and click the Update button in the top right of the window header: Page Narrative: The purpose of the Logon form is to authenticate the application user. Users must enter their name and password and then click "Logon". Note: To paste text from the Windows Clipboard, right click in the Page Narrative window and select Paste from the popup menu.

Click the Close button located in the bottom left corner of Page Narrative window to close the window. Drag a Caption shape from the stpBA Edit Components stencil and drop it on to the Windows form on the drawing canvas. Type the text User Name and click the Align Right button on the toolbar to right align the text. Press the Esc key to update the shape text. With the shape still selected, press the Ctrl and C keys to copy the shape. Press the Ctrl and V keys to paste a copy of the shape. Drag the new copy to position it below the original shape and type the text Password.

Drag a Text box from the stpBA Edit Components stencil and drop it on to the Windows form on the drawing canvas. A pop-up window be displayed. Enter the following details and click the OK button: Component Name : User Name Data Type : Text Max Data Size : 25 Short Description : User name used to logon to application


- 11 -





7. Add the Password Field 8. Add the Logon Button 9. Set the Tab Indexes

Drag a Text box from the stpBA Edit Components stencil and drop it on to the Windows form below the User Name Text box. A pop-up window be displayed. Enter the following details and click the OK button: Component Name : Password Data Type : Text Min Data Size : 4 Max Data Size : 25 Short Description : Password used to logon to application

Drag a Button from the stpBA Edit Components stencil and drop it on to the Windows form below the Password Text box. To change the button’s caption, with the Button still selected type the text Logon and press the Esc key to update the shape text.

Each edit component has a Tab Index. This represents the order in which the user navigates through the components on the form using the Tab key. To set the Tab Index of each component, right-click the Windows form (ensure that the form is selected) and select the option Set Tab Indexes from the pop-up menu. A message will appear confirming that the indexes have been set. Click the OK button on the message. You will be able to see the Tab Index for a component by selecting the component and looking at the Tab Index property in the Custom Properties window.


- 12 -





1. Add Two More Screens to the Story Board

2. Connect the Screens 3. Reposition the Text

Select the Story Board tab at the bottom of the drawing canvas to return to the Story Board page. Using the Site map item shape in the stpBA Site Map stencil, add an item of type Windows Form called Control Panel. Then add a second item of type Windows Msg Box called Logon Failed. Place Control Panel below Logon and place Logon

Failed to the right of Logon.

Click the Connector Tool on the main toolbar. Using the connector tool, connect Logon to Logon Failed, and connect Logon to Control Panel. To connect two shapes using the connector tool, place the mouse pointer over the centre of the first shape. A red border will appear around the shape. Press the left mouse pointer but do not release it. With the left mouse button pressed, move the mouse over the centre of the

second shape. A red border will appear around the second shape. Release the mouse button and a line will appear connecting the two shapes.

Click the Pointer Tool on the main toolbar after you have connected the shapes. The mouse pointer will return to normal. Select the Logon site map item shape. A yellow diamond will appear above the Logon text. You can reposition the text by dragging the yellow diamond to the desired position.

Drag the yellow diamond so that the Logon text appears on top of the shape.

Adding Screen Navigation (1 to 3)

- 13 -





4. Check the Links 5. Delete a Link 6. Add a Conditional Navigation Rule

Select any site map item shape, such as Logon, and right-click. From the pop-up menu select Refresh All Links, and click the OK button on the confirmation message that appears. The colour of the links between the shapes becomes Red. This indicates that the links are either invalid or pending, i.e. navigation links have not been set up between the shapes.

Select the link between Logon and Control Panel and press the Delete key to remove the link. Note that the diagram shows an invalid link between Logon and Logon Failed, and no link between Logon and Control Panel. In the next few steps you will add navigation between the items and then refresh the links on the story board.

Right-click the Logon shape and select the Logon hyperlink from the pop-up menu. You will be taken to the Logon page containing the Logon windows form.

Select the Logon button and right-click. Select the option Set Navigation… from the pop-up menu. A pop-up window will be displayed. You will set up two navigation rules depending on whether logon was successful. Select the Conditional Navigation Rules option and click the Add button to add the first rule. Enter the following details and click the OK button:

Condition : Logon Successful Action ( 2nd drop-down) : Control Panel [Windows form]


- 14 -





7. Add a Second Conditional Navigation Rule

8. View the Conditional Navigation Hyperlinks

9. Refresh the Links and Images

The new rule will be displayed in the list. Select the rule and click the Copy button to add the second rule. Enter the following details and click the OK button: Condition : Logon Failed Action ( 1st drop-down) : Popup Action ( 2nd drop-down) : Logon Failed [Windows Msg Box]

Both rules will be displayed in the list. The rules will appear as tests within the automated testing documentation.

Click the OK button to close the Set Navigation screen. Right-click the Logon button to display the pop-up menu. Note that the pop-up menu contains two hyperlinks, one for each rule. The description for each hyperlink contains the navigation condition in square brackets.

Select the Story Board tab at the bottom of the drawing canvas to return to the Story Board page. Select any site map item shape, such as Logon, and right-click. From the pop-up menu select Refresh All Links and Images, and click the OK button on the confirmation message that appears. Note that the link between Logon and Logon Failed has changed from Red to Black, and that the link has

been labelled with the caption of the Logon button followed by the navigation condition in square brackets. Also note that a link has been added to Control Panel, and that the site map item images have been updated.


- 15 -





1. Clear the Page and Add a Site Map Item

2. Select all the Existing Items 3. Change the Layout

Press the Ctrl and A keys to select all the shapes on the Story Board page. Press the Delete key to delete all the shapes. The page is now blank. Drag a Site map item shape from the stpBA Site Map stencil and drop it on to the drawing canvas. The Site Map pop-up window will be displayed.

The Existing Items option contains a list of all the screens, reports and processes in the document that have not been added to the current page. To select all the items in the list, click the Page column header. Note that the Existing Items option and the Refresh Layout option are automatically selected when you click the column header. Click the OK button to add the selected items to the story board.

All the selected items are added to the story board. Because the Refresh Layout option was selected, the items are laid out automatically in the centre of the page. (If you cannot see the items, try scrolling down to the centre of the page.) You can change the layout of the story board. For example, you can press Ctrl and A to select all the items and then use the mouse to move them to the top of the

page. You can also select individual items or links and then reposition them using the mouse. The position of an item’s text or a link’s text can be set by moving the yellow diamond next to the text.

Reverse-Engineering a Storyboard Overview

- 16 -





1. Linking to Multiple Pages 2. Link a Single Page 3. Viewing and Removing Links

The items in the stpBA Task List can be linked to Forms and Reports within the storyboard to provide traceability between task list items and functionality in the storyboard. Click the Show Task List button on the top stpBA toolbar to display the stpBA Task List. While pressing the Ctrl key select the Unique User Name and Secret Password tasks. While pressing the Shift key click and select the Logon and Control Panel screens in the screen flow diagram.

Click the Link Tasks button in the stpBA Task List toolbar to link all the selected tasks to both selected screens. The linked tasks are ticked to indicate that they are linked.

Go to the Logon page. Ensure that the stpBA Task List is open. Select the User Authentication task. (Note that multiple tasks can be selected by pressing the Ctrl key).

Click the Link Tasks button in the stpBA Task List toolbar to link the selected task to the form on the current page. Note: You do not need to select the form in order to link the selected tasks to the form on the current page.

Select the Logon form and right-click. Select the Set Tasks… menu option from the pop-up menu. The Set Tasks pop-up window is displayed. The window lists all the tasks linked to the form. Select the linked User Authentication task and click the Delete button. Click the OK button to apply the changes and refresh the status of tasks in the stpBA Task List. In the same way, remove all the tasks linked to the Control Panel form.

Linking Tasks to Functionality (1 to 3)

- 17 -





4. Refresh the Status of Tasks 5. Generate the Task Sheet 6. View the Traceability Matrix

Note that although only tasks 5 and 6 were linked, task 3 is also ticked. This is because all of task 3’s child tasks have been ticked. Click the button to hide the Description column.

Click the tick in the column for task 3 to remove the ticks for

tasks 3, 5 and 6.

Click the button on the toolbar to refresh the status of all

the tasks. The linked tasks 5 and 6 as well as parent task 3 are automatically ticked.

Click the Generate Task Spreadsheet button on the task list toolbar to generate the Tasks spreadsheet. Click Yes on the confirmation message box. The first page of the spreadsheet contains all the items in the stpBA Task List.

Select the Traceability Matrix tab at the bottom of the spreadsheet. The matrix shows the tasks down the left and the Forms and Reports in the storyboard along the top. Only tasks within task types with the Automate Task Status option set are included in the matrix. Where a task is linked to functionality, a X is placed at the intersecting cell. White rows represent tasks that may not have been satisfied by the storyboard. White column headings represent screens or reports not traceable to tasks.

Linking Tasks to Functionality (4 to 6)

- 18 -





1. Navigate to the Windows Message Box Page

2. Configure the Buttons 3. Set the Message Text and Refresh the Story Board

Select the Story Board tab to go to the Story Board page. On the Story Board page select the Logon Failed site map item and right-click. Select the Logon Failed option from the pop-up menu. You will be taken to the Logon Failed page containing the Logon Failed windows message box.

Scroll the page up to view the message box.

The windows message box is a multi-item shape, meaning that it contains multiple items which can be selected individually. When you click a multi-item shape, the entire shape is selected. Clicking the shape again then selects the item within the shape on which you clicked. Click the text in the centre of the shape. Note the entire shape is selected. Right-click and select Show 1 Button

from the pop-up menu. Only one button is displayed. With the shape still selected, click the OK button to select the button. Right-click and select Default from the pop-up menu. A border appears around the button.

With the OK Button still selected, click the text in the centre of the shape to select the text. Type The User Name and or Password entered are invalid. Please try again. and press the Esc key to update the text. Click the yellow triangle on the message box to select the image. Right-click and select Information from the pop-up menu to change the image. Right-click again and select Warning from the pop-up menu.

Select the Story Board tab to return to the Story Board page. Select the Logon Failed site map item shape, right-click and select Refresh Image: Logon Failed from the pop-up menu to refresh the image.

Configuring a Windows Message Box

- 19 -





1. Shape Right-Click Pop-Up Menu

Right-clicking on a shape added from an stpBA stencil will display a set of pop-up menu options. Some of these options will be specific to the type of shape. The other options (as in the picture above) are a standard set of options as follows (not all will be available for some shapes):

1. Edit Properties... Displays a pop-up window to edit the shape properties. This contains the same properties in the docked Custom Properties window. 2. Document. A tick / un-tick option that can be toggled. Tick this to include the shape in the automated documentation, such as the test script spreadsheet. 3. Mandatory. A tick / un-tick option that can be toggled. Tick this to specify that the field is mandatory, or un-tick to specify that the field is optional. 4. Enabled. A tick / un-tick option that can be toggled. Tick this to specify that the field is editable, or un-tick this to specify that the field is read only. 5. Custom Fields… Displays a pop-up window to add additional custom fields, and to edit the custom field values for the selected shape. Custom fields added

are global within the document, and are therefore available for all other shapes within the document. 6. Set Security Roles… Displays a pop-up window to add security roles, and to select the relevant security roles for the selected shape. Security roles added

are global within the document, and are therefore available for all other shapes within the document. 7. Set Business Rules… Displays a pop-up window to add business rules for the selected shape. 8. Set Functional Tests… Displays a pop-up window to enter the test cases for the selected shape.

Toggle Menu Options

Getting to Know the Shape Pop-Up Menu

- 20 -





1. Open Custom Fields Window 2. Enter Value in Custom Field 3. Close Custom Fields Window

Select the Logon tab to return to the Logon page. Select the Logon Windows form shape and right-click. Select the Custom Fields… menu option from the pop-up menu. The Custom Fields pop-up window will be displayed. The window displays a list of the available custom fields. New custom fields can be added by clicking the Add button, and these will be available to all shapes in the document.

Double-click the custom field Purpose to edit its value. The Edit Custom Field Data pop-up window will be displayed.

Enter the Purpose of the Logon form in the pop-up window and click the OK button: Field Data : The logon screen lets the user enter their user name and password so that the system can authenticate the user and assign the relevant privileges.

The text you have entered will be displayed next to the Purpose field in the Custom Fields list. The Tick box next to the field will be ticked. This indicates that the Purpose field and the text you have entered will be displayed in the automated Functional Specification document. Un-ticking this box will exclude the field and the text entered from the Functional Specification document. Leave the Tick box ticked.

Click the OK button to close the pop-up window.

Using Custom Fields

- 21 -





1. Open Security Roles Window 2. Add New Security Role 3. Select Security Role

Go to the Control Panel page and scroll the page up to view the form. Add three buttons to the windows form. Set the caption of the first button to Payroll Process, the second button to Log Report and the third button to Clear Logs. Select the Payroll Process button shape. Right-click

and select the Set Security Roles… menu option from the pop-up menu. The Set Security Roles pop-up window will be displayed. The window displays a list of the available roles.

Click the Add button to add a new security role. The New Security Role pop-up window will be displayed. Any roles added will be available to all shapes in the document. Enter the following details in the pop-up window and click the OK button: Role Name : Payroll Administrator

The new role will be displayed in the Security Roles list. The Tick box next to the role will be ticked. This indicates that the Run Payroll Process button can only be used by a user with the Payroll Administrator role. You can tick as many roles as are applicable. You can toggle the Tick Boxes for all roles by clicking the Role Name list header. Leave just the Payroll Administrator role ticked.

Click the OK button to close the pop-up window.

Setting Security Roles

- 22 -





1. Select Set Business Rules… Menu Option

2. Open Business Rules Window 3. Add First Business Rule

Business Rules describe functionality using an If…Then…Else logical sequence of events. The business rules will appear as tests within the automated Test Script spreadsheet. Go to the Control Panel page and select the Clear Logs button shape. Right-click and select the Set Business Rules… menu option from the pop-up menu. The Set Business Rules pop-up window will be

displayed.

In the next few steps you will add two business rules. The first rule checks that the payroll process has been run, otherwise the logs cannot be cleared. The second rule checks that the logs have previously been backed up, otherwise the logs cannot be cleared. Click the Add button to add a new business rule. The New Business Rule pop-up window will be displayed.

Enter the following additional details in the pop-up window and click the OK button: If : Payroll process has been run. Else : Logs are not cleared.

Setting Business Rules (1 to 3)

- 23 -





4. View Business Rules List 5. Add Second Business Rule 6. Close Business Rules Window

The Business Rules list displays the new business rule. To add another business rule click the Add button. The New Business Rule pop-up window will be displayed

Enter the following additional details in the pop-up window and click the OK button: If : Logs have been backed up. Then : Clear the logs. Else : Logs are not cleared.

The Business Rules list displays the two new business rules. Click the OK button to close the pop-up window.

Setting Business Rules (4 to 6)

- 24 -





1. Select Set Functional Tests… Menu Option

2. Add New Functional Test 3. Close Functional Tests Window

Functional Tests are test cases that describe (as a series of tests) the specific functionality that the application should perform. The functional tests will appear within the automated Test Script spreadsheet. Go to the Logon page and select the Password text box shape. Right-click and select the Set Functional Tests… menu option from the pop-up menu. The Set Functional Tests pop-up window will be displayed.

Click the Add button to add a new functional test. The New Functional Test pop-up window will be displayed. Enter the following additional details in the pop-up window and click the OK button: Test Procedure : Enter a value in the text box. Expected Behaviour : Characters appear as a *.

The Functional Tests list displays the new functional test. Click the OK button to close the pop-up window.

Setting Tests Cases

- 25 -





1. Open Edit Narrative Window 2. Edit the Narrative 3. Generate Additional Narrative

Select the Control Panel tab to return to the Control Panel page. Select the Control Panel Windows form shape and right-click. Select the Edit Narrative menu option from the pop-up menu. The Edit Narrative pop-up window will be displayed.

Edit the Narrative of the Control Panel form in the pop-up window and click the OK button: Narrarive : The purpose of the Control Panel form is to allow the user to run batch jobs. The user can click a button on the form to run the required job.

The Generate Narrative button appends additional narrative based on the security roles and business rules behind each component on the form. Click the Generate Narrative button. You can edit the appended narrative as required. Click the OK button to close the pop-up window.

Generating the Page Narrative

- 26 -





1. Add New Page 2. Add Process Flow 3. Add First Shape to Process Flow

Go to the Story Board page. Select the Control Panel site map item shape, right-click and select Refresh Image: Control Panel from the pop-up menu to refresh the image. Using the Site map item shape in the stpBA Site Map stencil, add a new site map item below Control Panel. The new item should be of type Process Flow and named Payroll Process.

Right-click the new Payroll Process site map item and select the Payroll Process hyperlink from the pop-up menu. You will be taken to the Payroll Process page containing the Payroll Process simple flowchart. To select the process flow click the header. From the main toolbar set the page Zoom to 75%.

Drag a Terminator shape from the stpBA Process Flow stencil and drop it on to the flowchart on the drawing canvas. With the Terminator shape selected type the text Start Process and press the Esc key to update the shape text.

Storyboarding a Back-End Process (1 to 3)

- 27 -





4. Add More Process Flow Shapes 5. Link Shapes 6. Set Shape Repetition

Drag a Process shape from the stpBA Process Flow stencil and drop it on to the flowchart below the Start Process Terminator. With the process shape selected type the text Get Employees and press the Esc key to update the shape text. Drag a Data shape, drop it on to the left of the Get Employees Process, and set its text to Employees File. Drag a Process shape, drop it below the Get Employees Process, and set its text to Process Employee Payroll. Drag a Terminator

shape, drop it below the Process Employee Payroll Process, and set its text to End Process.

Using the Connector Tool on the main toolbar, add downwards arrows from the Start Process Terminator to the End Process Terminator. Add an arrow from the Employees File Data to the Get Employees Process. Select the Process Employee Payroll Process shape and from the main toolbar set the page Zoom to 150%.

The Process Employee Payroll Process is repeated for each employee in the Employees File. Right-click the Process Employee Payroll Process and select the Repeat toggle menu option from the pop-up menu. A Repeat Icon will be displayed in the top left corner of the Process Employee Payroll Process shape.

Enter the following in the Custom Properties window: Repeat Interval : Each employee in file Repeat Until : All employees are processed


- 28 -





7. Drill Down a Process Step 8. View Hyperlink to Drill Down Process

9. Add Navigation from the Payroll Process button

Right-click the Process Employee Payroll Process and select the Drill Down toggle menu option from the pop-up menu. A new page is created for the sub-process with a Process Flow for Process Employee Payroll. From the main toolbar set the page Zoom to 75%.

Go to the Payroll Process page. A Drill Down Icon will be displayed in the top right corner of the Process Employee Payroll Process shape. A hyperlink is also added to the shape’s right-click menu to navigate to the sub-process. IMPORTANT: If you rename a shape the sub-process must also be renamed. To do this right-click on the renamed parent process and select the Drill Down

toggle menu option to remove the drill down hyperlink. Then select the Drill Down toggle menu option again. This will replace the drill down hyperlink, and rename the associated sub-process page and flowchart.

Go to the Control Panel page. Right-click the Payroll Process button and select the option Set Navigation… from the pop-up menu. A pop-up window will be displayed. With the Unconditional Navigation option selected, enter the following details and click the OK button. Action (1st drop-down) : Run Action (2nd drop-down) : Payroll Process [Flowchart] A Run Payroll Process hyperlink will now appear in the Payroll Process button’s right-click pop-up menu.


- 29 -





1. Save the document 2. View the Storyboard Screens in a Web Browser

3. View the Storyboard Process in a Web Browser

Click the Save button on the main toolbar to save the document. Save the document with a filename of Tutorial.vsd. Visio 2002: The Tutorial.vsd Properties window will be displayed. Enter A storyboard to demonstrate the stpBA functionality. in the Description field and click the OK button: Click the Save as Web Page button on the stpBA toolbar. The Save As pop-up window will be displayed. Click the Save button. The storyboard will be saved as HTML and will be displayed in a web browser.

If the Internet Explorer security bar is displayed, right-click and select Allow blocked Content… The web browser will display the Story Board. Click the Logon site map item to navigate to the Logon form. Placing the cursor over any component in the storyboard and left-clicking the mouse with the Ctrl key pressed displays the component’s properties in the Custom Properties section. Place the cursor over the Logon button. The cursor icon changes indicating that the button can be clicked. A tool tip displays the navigation options. Click the Logon button and select the Control Panel navigation option. On the Control Panel click the Payroll Process button to display the Payroll Process process flow.

Visio 2002: Placing the cursor over any shape in the process flow displays the component’s properties in the Custom Properties section. Visio 2003/2007: Placing the cursor over any shape in the process flow and left-clicking the mouse with the Ctrl key pressed displays the component’s properties in the Custom Properties section. To drill down on the Process Employee Payroll process, click the Process Employee Payroll process. The Process Employee Payroll sub-process flow will be displayed. Close the web browser.

Saving the Storyboard as HTML

- 30 -





1. Generate Functionality Spreadsheet

2. Generate Test Spreadsheet 3. Generate Specification

Click the Generate Functionality Spreadsheet button on the stpBA toolbar and click the Yes button on the pop-up confirmation message. This generates a Microsoft Excel spreadsheet containing a full breakdown of the storyboard functionality. This can be given to developers to input into their design and or development activities.

Click the Generate Test Spreadsheet button on the stpBA toolbar and click the Yes button on the pop-up confirmation message. This generates a Microsoft Excel spreadsheet containing a full component functionality Test Script.

Click the Generate Specification button on the stpBA toolbar. The Document Template pop-up window will be displayed. Select User Interface Specification from the Document Type pick-list. You can edit the title and introduction before generating the document. Click the OK button. This generates a reader friendly UI Specification that is easily understood by users, enabling them to provide useful feedback. Note that task types in the stpBA Task List configured with the Show Tasks in Specification option are included in the document as sections containing tasks.

Automating Documentation

- 31 -





1. Add a Review Note 2. Enter a Review Comment 3. Reply to a Review Comment

Feeback from peer review or workshops can be captured using the Review note shape. To simulate the review comments from a peer, select the Logon tab at the bottom of the drawing canvas to return to the Logon page. Drag a Review note from the stpBA Review Notes stencil and drop it on to the drawing canvas. A pop-up window will be displayed. Click the OK button.

On the Review note shape select the text Enter review comments here... and type What happens if users forget their password ? Press the Esc key to update the shape text. Drag a Note connector from the stpBA Review Notes stencil and drop it on to the drawing canvas. Connect one end of the Note connector to the Review note and connect the other end to the Password field.

You can use the Show Comments on Page and Hide Comments on Page buttons on the stpBA toolbar to show or hide the review notes.

To reply to the peer feedback you can add a trail of further comments. Select and right-click the Review note shape and select the menu option Add Comment… On the pop-up window enter the text Maybe an email reminder facility is required and click the OK button. The text will be appended to the Review note.

Managing Feedback (1 to 3)

- 32 -





4. Add Another Review Note 5. Identify Change Request Candidates

6. Enter First Change Request Details

Add another Review note containing the text User Name needs to be capable of holding 30 characters. Using the Note connector shape connect the Review note and User Name field.

Select and right-click the first Review note shape and select the menu option Change Request. This is a toggle option, and shows or hides the Red Flag Icon on the Review note shape indicating whether the comment is a change request candidate. Select and right-click the second Review note shape and select the menu option Change Request to indicate that this also is a change request candidate.

Select the first Review note shape and enter the following details in Custom Properties window for the shape: Change - Type : New Requirement Change - Details : Add a button for Email Reminder of Password Change - Justification : Automated reminder saves cost of admin

Change – Initial Cost Assessment : 2000 Change – Initial Effort Assessment : 4 Change – Initial Risk Assessment : Low


- 33 -





7. Enter Second Change Request Details

8. Generate Change Request Spreadsheet

9. Accept or Reject the Change Requests

Select the second Review note shape and enter the following details in Custom Properties window for the shape: Change - Type : Functionality Change Change - Details : Increase the length of the User Name field to 30 characters Change - Justification : Field must accomodate long user names Change – Initial Cost Assessment : 1500 Change – Initial Effort Assessment : 3 Change – Initial Risk Assessment : Medium

Click the Generate Comments and Change Request Spreadsheet button on the stpBA toolbar and click the Yes button on the pop-up confirmation message. This generates a Microsoft Excel spreadsheet. The first spreadsheet tab contains a full log of all comments, the second tab lists each individual change item, and the third tab lists the change requests. All columns in Yellow on the second and third tabs can be edited and have pop-up help when the mouse is placed over a

column caption. Open the fourth tab, type 1 in cell D4 and press the Enter key to display the details for Change Request 1.

To accept the first Review note change request, select and right-click the first Review note shape and select the menu option Accept Comments. The shape colour will become Green. To reject the second Review note change request, select and right-click the second Review note shape and select the menu option Reject Comments. The shape colour will become Red.

Click the Hide Comments on Page button on the stpBA toolbar to hide the review notes.


- 34 -





1. Add Change Details 2. Change Storyboard 3. Generate Specification

Click the Set Minor Baseline button on the stpBA toolbar. On the pop-up window type First Storyboard Draft in the Change Details box and tick the Set Document flag on all components on all pages to False box. Ticking this box will prevent anything in the storyboard from being documented. Click the OK button. The Document right-click menu option on all components will be toggled off. Also, each page name on the tabs at the bottom of the drawing canvas will be prefixed with ~. This prefix means the entire page will be excluded from document automation, even if the Document flag of components on the page is True.

A change will be made to the Logon page. Rename the page to remove the ~ prefix from the page name. This will include the page in document automation. Add a Button with called Send Me My Password by Email with a Short Description text of Send an email reminder of password to the email address of User Name

The Document flag for the new Button will be True by default. If you change existing components, you will need to set the Document flag for the changed components to True manually. Click the Generate Specification button on the stpBA toolbar. The Document Template pop-up window will be displayed. Select Functional Specification from the Document Type pick-list. You can edit the title and introduction before generating the document. Click the OK button. This generates a Microsoft Word document containing a Functional Specification for the changes only. Similarly the test scripts will contain tests for the changes only.

Baselining a Storyboard

- 35 -





1. Capture Legacy Application Screen Image

2. Create New Storyboard 3. Insert Legacy Application Screen Image

Open the Calculator program from the All Programs \ Accessories \ Calculator menu on the windows Start bar. Press the Alt and Print Screen keys to copy the screen image to the clipboard. Open the Paint program from the All Programs \ Accessories \ Paint menu on the windows Start bar. Press the Ctrl and V keys to paste the image into Paint. Move the image into the top left corner and drag the handle in the bottom right of the drawing canvas to crop the image so that only the

Calculator form area is displayed. Press the Ctrl and S keys to save the image. Save the file as Calculator.bmp. Remember the file location.

Visio 2003/2007: Create a new storyboard using the stpBA Win 2000 template Visio 2002: Create a new storyboard using the Blank (stpBA Professional) template. Double-click the page tab at the bottom of the Visio canvas and rename the page to Calculator.

Using the stpBA GUI Components stencil add a Windows form with the component name Calculator and caption Calculator.

Right-click the windows form and select Insert Image from the pop-up menu. A pop-up file dialog will be displayed. Locate and select the Calculator.bmp file and click the Open button. The bitmap is inserted within the form and stretched to the form size. Resize the form appropriately. The windows form can be used to capture information

about the legacy application screen using all the facilities available such as Custom Properties, Custom Fields, Business Rules and Functional Tests.

Storyboarding Changes to a Legacy App (1 to 3)

- 36 -





4. Add Overlay 5. Set Overlay Properties 6. Generate Specification

New components from the stpBA stencils can be placed on top of the legacy application screen image as required. To change an existing component, an Overlay shape can be placed on top of the relevant area of the screen image and it’s properties can be set. Drag an Overlay from the stpBA Edit Components stencil and drop it on to the text box in the screen image. A pop-up window will be displayed. Enter the following details on the pop-up window and click OK. Component Name : Digital Display Short Description : Calculator Display Area

Move and resize the Overlay so that it covers the text box on the screen image. The Overlay on top of the image can be used to capture information about the component in the screen image using all the facilities available such as Custom Properties, Custom Fields, Business Rules and Functional Tests. Enter the following details in the Custom Properties: Data Format : BASE 10 Default Value : 0

Click the Generate Specification button on the stpBA toolbar. The Document Template pop-up window will be displayed. Select Functional Specification from the Document Type pick-list and click the OK button. This generates a Microsoft Word document containing a Functional Specification for the changes to the legacy application.

Storyboarding Changes to a Legacy App (4 to 6)

Documents

stpBA Storyboarding Detailed Tutorial - University of Surrey Storyboarding... · Double-click the stpBA Storyboarding icon on the Windows desktop. This will start and launch Microsoft®