Process: Guide 4

Process Guide 4 Software Version

5.4.1-0

Document Version

3.3

Release Date

1 July 2016

Status

Release

FEAtures Process

Table of Contents History ............................................................................................................................................................ 8 Tell Me About… ............................................................................................................................................... 9 A Business Process as a Design Approach................................................................................................................. 9 A Process and all that Jazz Jargon ...........................................................................................................................11 Breadcrumb Trail and Breadcrumb Level ...............................................................................................................13 Button .....................................................................................................................................................................18 Component Import Wizard .....................................................................................................................................22 Component Phase ...................................................................................................................................................29 Heading ...................................................................................................................................................................39 Item Group ..............................................................................................................................................................43 Items .......................................................................................................................................................................45 Menu and Menu Item .............................................................................................................................................48 Phase .......................................................................................................................................................................52 Phase » Offline Phase..............................................................................................................................................58 Phase » Output Phase To File .................................................................................................................................60 Process ....................................................................................................................................................................64 Process » Access Violation Phase............................................................................................................................75 Process » Error Phase..............................................................................................................................................77 Process » Exposed Data Item ..................................................................................................................................79 Process » Navigation Phase ....................................................................................................................................81 Process » Session Timeout Phase ...........................................................................................................................83 Process Editor .........................................................................................................................................................85 Progress Bar and Progress Step ..............................................................................................................................88 Question ..................................................................................................................................................................93 Rules Only Phase .....................................................................................................................................................99 Table......................................................................................................................................................................103 Table » Add a Table with Drag-Drop .....................................................................................................................108 Table » Row Selection ...........................................................................................................................................112 Visualise Flow ........................................................................................................................................................118 What Can I Build? ........................................................................................................................................ 120 2

Error Management Process ..................................................................................................................................120

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Process ................................................................................................................................122 Exercise 2 » Number of Backups .......................................................................................................................124 Exercise 3 » Add a Phase to a Process ...............................................................................................................126 Exercise 4 » Auto Generate Navigation Buttons ...............................................................................................129 Exercise 5 » Add a Phase to a Process ...............................................................................................................131 Exercise 6 » Set Process Properties ...................................................................................................................134 Exercise 7 » Add a Heading to a Phase ..............................................................................................................146 Exercise 8 » Add a Question to a Phase ............................................................................................................152 Error Management Process » Test and Annotate.................................................................................................155 Exercise 1 » Throw a General Error ...................................................................................................................156 Exercise 2 » Throw a Timeout Error ..................................................................................................................164 Exercise 3 » Throw an Access Violation Error ...................................................................................................168 Exercise 4 » Configure Note Look and Feel .......................................................................................................176 Exercise 5 » Add a Note Type ............................................................................................................................177 Exercise 6 » Add a Note at Design Time ............................................................................................................178 Exercise 7 » Use Tool Tip Text to View a Note ..................................................................................................182 Exercise 8 » Add a Note at Run Time ................................................................................................................183 Exercise 9 » Show and Hide Notes ....................................................................................................................187 Exercise 10 » Review Notes using Utility Editor ................................................................................................190 Hybrid Error Management Process.......................................................................................................................192 Exercise 1 » Add a Process ................................................................................................................................194 Exercise 2 » Add a Phase to a Process ...............................................................................................................196 Exercise 3 » Add a Heading to a Phase..............................................................................................................200 Exercise 4 » Add an Action Button to a Phase ..................................................................................................205 Exercise 5 » Add Notes ......................................................................................................................................210 Header and Footer Process ...................................................................................................................................214 Exercise 1 » Add a Process ................................................................................................................................217 Exercise 2 » Add a Phase to a Process ...............................................................................................................219 Exercise 3 » Set Process Properties ...................................................................................................................221 Exercise 4 » Add an Item Group to a Process as a Pre Phase Item ...................................................................233 Exercise 5 » Add an Action Button to an Item Group .......................................................................................235 Exercise 6 » Add a Heading with a System Word to an Item Group .................................................................239 Exercise 7 » Add a Menu to an Item Group ......................................................................................................246 Exercise 8 » Add an Item Group to a Process as a Post Phase Item..................................................................253 3

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Add an Action Button to an Item Group .......................................................................................255 Exercise 10 » Add Notes ....................................................................................................................................257 Home Page Process ...............................................................................................................................................261 Exercise 1 » Add a Process ................................................................................................................................264 Exercise 2 » Add a Phase to a Process ...............................................................................................................266 Exercise 3 » Set Process Properties ...................................................................................................................268 Exercise 4 » Add a Heading to a Phase ..............................................................................................................280 Exercise 5 » Add an Action Button to a Phase ..................................................................................................284 Exercise 6 » Link Header and Footer to a Process.............................................................................................290 Exercise 7 » Highlight Items with Links .............................................................................................................294 Exercise 8 » Add a Goto Phase Rule to the Home Page Button ........................................................................296 Exercise 9 » Display Rule Names .......................................................................................................................301 Exercise 10 » Add Goto Phase Rules to the Hybrid Error Management Buttons..............................................304 Exercise 11 » Add Notes ....................................................................................................................................310 Device Process ......................................................................................................................................................314 Exercise 1 » Add a Process ................................................................................................................................316 Exercise 2 » Add a Phase to a Process ...............................................................................................................318 Exercise 3 » Set Process Properties ...................................................................................................................320 Exercise 4 » Add a Heading to a Phase ..............................................................................................................332 Exercise 5 » Link Header and Footer to a Process.............................................................................................341 Exercise 6 » Add Device to Home Page .............................................................................................................345 Exercise 7 » Add Notes ......................................................................................................................................351 Application Form Process .....................................................................................................................................353 Exercise 1 » Add a Process ................................................................................................................................360 Exercise 2 » Add a Rules Only Phase to a Process .............................................................................................363 Exercise 3 » Add a Phase to a Process ...............................................................................................................365 Exercise 4 » Set Process Properties (the FAST way! ) ....................................................................................368 Exercise 5 » Add an Item Group to a Process....................................................................................................370 Exercise 6 » Add a Button..................................................................................................................................373 Exercise 7 » Add a Goto Phase Rule to a Rules Only Phase ..............................................................................379 Exercise 8 » Functionality Test with Process Analyser Phase Stack ..................................................................383 Exercise 9 » Add a Goto Phase Rule to a Phase or to a Button .........................................................................388 Exercise 10 » Visualise Flow ..............................................................................................................................399 Exercise 11 » Add a Progress Bar to an Item Group ..........................................................................................401 4

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 12 » Add a Heading to a Phase ............................................................................................................404 Exercise 13 » Add a Question to a Phase ..........................................................................................................412 Exercise 14 » Set Question Mandatory and Read Only with Question Dialog ..................................................430 Exercise 15 » Set Question Mandatory and Read Only with Quick Edit ...........................................................434 Exercise 16 » Add an Item Group to a Phase ....................................................................................................436 Exercise 17 » Copy and Link an Item .................................................................................................................441 Exercise 18 » Link Header and Footer to a Process...........................................................................................449 Exercise 19 » Add Application Form to Home Page ..........................................................................................453 Exercise 20 » Add Notes ....................................................................................................................................459 Login Component Process.....................................................................................................................................463 Exercise 1 » Add a Process ................................................................................................................................467 Exercise 2 » Add a Phase to a Process ...............................................................................................................469 Exercise 3 » Set Process Properties (the FAST way! ) ....................................................................................472 Exercise 4 » Add a Heading to a Phase ..............................................................................................................474 Exercise 5 » Add a Question to a Phase ............................................................................................................479 Exercise 6 » Add a Button to a Phase ................................................................................................................486 Exercise 7 » Add a Goto Phase Rule to an Action Button .................................................................................493 Exercise 8 » Visualise Flow ................................................................................................................................504 Exercise 9 » Add an Item Group to a Process....................................................................................................506 Exercise 10 » Add a Breadcrumb Trail to an Item Group ..................................................................................508 Exercise 11 » Add a Note Type ..........................................................................................................................518 Exercise 12 » Add Notes ....................................................................................................................................519 Login Component Process » Publish and Broadcast .............................................................................................521 Exercise 1 » Add a Broadcast Rule to an Action Button ....................................................................................522 Exercise 2 » Publish a Process as a Component ................................................................................................530 Login Process.........................................................................................................................................................535 Exercise 1 » Override Libraries Folder Location ................................................................................................540 Exercise 2 » Add a Process ................................................................................................................................544 Exercise 3 » Add a Component Phase to a Process using the Component Import Wizard...............................546 Exercise 4 » Edit a Component Phase using the Component Dialog ................................................................563 Exercise 5 » Set Process Properties (the FAST way! ) ....................................................................................574 Exercise 6 » Add a Phase to a Process ...............................................................................................................579 Exercise 7 » Add a Question to a Phase ............................................................................................................581 Exercise 8 » Add a Button to a Phase ................................................................................................................588 5

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Add a Goto Phase Rule to a Component Phase ............................................................................590 Exercise 10 » Add a Heading to a Phase and Send a Broadcast Message .........................................................598 Exercise 11 » Add a Reset Session Data Rule ....................................................................................................605 Exercise 12 » Open Component and Unmark Stateful Property.......................................................................610 Exercise 13 » Link Header and Footer to a Process...........................................................................................613 Exercise 14 » Add Login to Home Page .............................................................................................................617 Exercise 15 » Functionality Test with Process Analyser Component Stack ......................................................623 Exercise 16 » Add Notes ....................................................................................................................................630 Table Process ........................................................................................................................................................632 Exercise 1 » Add a Process ................................................................................................................................636 Exercise 2 » Add a Rules Only Phase to a Process .............................................................................................638 Exercise 3 » Add a Phase to a Process ...............................................................................................................640 Exercise 4 » Set Process Properties (the FAST way! ) ....................................................................................643 Exercise 5 » Add a Heading to a Phase ..............................................................................................................645 Exercise 6 » Add a Data Group to a Phase as a Table .......................................................................................648 Exercise 7 » Edit Table Properties .....................................................................................................................654 Exercise 8 » Add an Item Group to a Process as a Post Phase Item..................................................................658 Exercise 9 » Add a Question to a Phase ............................................................................................................660 Exercise 10 » Add a Button................................................................................................................................666 Exercise 11 » Add a Menu to a Table ................................................................................................................672 Exercise 12 » Add a Goto Phase Rule ................................................................................................................678 Exercise 13 » Visualise Flow ..............................................................................................................................685 Exercise 14 » Link Header and Footer to a Process...........................................................................................686 Exercise 15 » Add Table Process to Home Page ................................................................................................690 Exercise 16 » Add Notes ....................................................................................................................................696 Chart Process ........................................................................................................................................................698 Exercise 1 » Add a Process ................................................................................................................................700 Exercise 2 » Add a Rules Only Phase to a Process .............................................................................................703 Exercise 3 » Add a Phase to a Process ...............................................................................................................706 Exercise 4 » Set Chart Process Properties (the FAST way! ) ..........................................................................710 Exercise 5 » Set Chart HighCharts Process Properties ......................................................................................712 Exercise 6 » Set Chart JFreeChart Process Properties .......................................................................................730 Exercise 7 » Add a Heading to a Phase ..............................................................................................................748 Exercise 8 » Add a Question to a Phase ............................................................................................................752 6

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Add an Item Group ........................................................................................................................760 Exercise 10 » Add a Button................................................................................................................................763 Exercise 11 » Add a Goto Phase Rule ................................................................................................................766 Exercise 12 » Link Chart Footer to a Process.....................................................................................................772 Exercise 13 » Link Header and Footer to a Process...........................................................................................775 Exercise 14 » Add Chart Process to Home Page ................................................................................................781 Exercise 15 » Add Notes ....................................................................................................................................787

7

Dr Kevin M Potter Strategy-Dev

FEAtures Process

History Author

Version Date

Comments

Dr Kevin M Potter

1.0

7 August 2014

Initial document.

Dr Kevin M Potter

2.0

15 January 2015

New Foundation, Enterprise, Advanced Features (FEAtures) true multi-channel learning platform.

Dr Kevin M Potter

2.3

3 July 2015

Q3 Release.

Dr Kevin M Potter

2.4

18 September 2015

Q4 EC54 New Features Release.

Dr Kevin M Potter

3.1

15 January 2016

2016 Q1 EC54 Release.

Dr Kevin M Potter

3.2

8 April 2016

2016 Q2 EC54 Release.

Dr Kevin M Potter

3.3

1 July 2016

2016 Q3 EC54 Release.

8

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Tell Me About… A Business Process as a Design Approach What you need to know As with any major software engineering venture; you need to adopt a design approach that will allow you and your Team to realise a successful solution on-time and within budget. One design approach that you may find particularly useful in conjunction with edgeConnect is the Business Process.

Figure 1 A Business Process as a Design Approach.

A Business Process is simply a directed set of steps that a User follows in order to obtain a Product or a Service. 

Start and Finish: A Business Process has a well-defined start and finish.



Business Data: Business Data is collected from a User at each step.



Business Decision: Business Decisions act on Business Data; altering information, using information to decide flow to a next step, and/or determining whether a User can ultimately receive a Product or a Service.

A Business Process provides a visual design approach that is easy for you and your Team to understand. You can involve all Team members at the earliest stages of solution design regardless of technical ability as everyone can understand and follow a well-designed Business Process diagram.

9

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example For example, consider a simple Business Process that allows a User to apply for a credit card.

Figure 2 A Credit Card Business Process.

Just follow the steps . 1.

Financial Information: Start the Business Process at the Financial Information step and ask the User to provide some financial information such as salary and bank account details. Go to the Credit Check step.

2.

Credit Check: The Credit Check step determines if the User is allowed to have a credit card.

3.

a.

Pass: If the User passes a credit check then go to the Salary > £50,000 step.

b.

Fail: If the User fails a credit check then go to the No Card finish step.

Salary > £50,000: The Salary > £50,000 step determines the type of credit card that the User is allowed to have. a.

Yes: If the User earns more than £50,000 then go to the Triple Diamond Deluxe Card finish step.

b.

No: If the User earns less than £50,000 then go to the Standard Blue Card finish step.

4.

Triple Diamond Deluxe Card: The Triple Diamond Deluxe Card step offers the Triple Diamond Deluxe credit card to the User and ends the Business Process.

5.

Standard Blue Card: The Standard Blue Card step offers the Standard Blue credit card to the User and ends the Business Process.

6.

No Card: The No Card step does not offer the User a credit card and ends the Business Process.

10

Dr Kevin M Potter Strategy-Dev

FEAtures Process

A Process and all that Jazz Jargon What you need to know edgeConnect allows you to easily design your solution as a Business Process. The only difficulty that you will encounter with edgeConnect (and this is true of nearly every Information Technology (IT) solution) is that you have to learn lots and lots of new jargon .

Figure 3 A Process and all that Jazz Jargon.

Process So… in edgeConnect a Business Process is simply named a Process. (That was an easy one! ). You can Divide and Conquer your solution into several Processes either defined within a single Project or defined across many Projects. This makes your solution more manageable and enables reuse. Best Practice



Within a single Project I would actively discourage you from defining your solution as a single monolithic Business Process; rather, I would encourage you to “Divide and Conquer” your solution into smaller, easier to manage Business Process building blocks.

11

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Phase A Business Process step is named a Phase. However… more specifically, there are three kinds of Phase. 

Phase: A Phase is a Business Process step that is presented to a User as a Web Page. The User can view and/or enter Business Data. The User controls the execution of Rules (or Business Decisions) that act on the Data and determine which Phase (or Web Page) the User goes to next.



Rules Only Phase: A Rules Only Phase controls the execution of Rules (or Business Decisions) that act on Data as a background Business Process Step on the Web Server.



Component Phase: A Component Phase encapsulates an entire edgeConnect Process that is contained in another Project. This is a “black box” approach that hides detail, provides a powerful Divide and Conquer solution design technique and enables Reuse. Design Tip Just as an aside, you might consider using Component Phases across many Projects to evolve your solution design as a hierarchy of Business Processes.

12

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Breadcrumb Trail and Breadcrumb Level What you need to know A Breadcrumb Trail with Breadcrumb Levels allows you to display the path a user has taken from Phase-to-Phase through a Process to get to a particular Phase. A Breadcrumb Trail is hierarchical and does not predict future steps through a Process. You can add a Breadcrumb Trail to a Phase or to a Process as a Pre or Post Phase Item.

Figure 4 Breadcrumb Trail.

Information A Breadcrumb Trail (with Breadcrumb Levels) works with a hierarchy oriented collection of web pages but not with a network oriented collection of web pages. It gets confused if two or more paths navigate forwards to the same web page.

Best Practice

It is best practice to use meaningful Customer and/or Project Specific Breadcrumb Trail and Breadcrumb Level names.



13

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example A Breadcrumb Trail (with Breadcrumb Levels) allows you to display the path a user has taken from Phase-to-Phase through a Process to get to a particular Phase.

Figure 5 Breadcrumb Trail and Breadcrumb Levels at run-time.

In Process Editor, a Breadcrumb Trail is constructed as a single Breadcrumb Trail object followed by a hierarchy of Breadcrumb Level objects.

Figure 6 Breadcrumb Trail and Breadcrumb Levels at design-time.

14

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Breadcrumb Trail Dialog and Breadcrumb Trail Properties Dialog The Add Breadcrumb Trail dialog and Breadcrumb Trail Properties dialog are identical. The Add Breadcrumb Trail dialog allows you to add a new Breadcrumb Trail. The Breadcrumb Trail Properties dialog allows you to edit an existing Breadcrumb Trail. Details Tab The Details Tab allows you to configure a Breadcrumb Trail.

Figure 7 Breadcrumb Trail dialog » Details tab.

You can set the following options. 

Name: Enter the Breadcrumb Trail name.



Hint Text: Enter text that you want to display as tool-tip-text when you hover the mouse pointer over the Breadcrumb Trail at run-time.



Allow Back Navigation: Mark to allow the user to click Breadcrumb Trail steps to navigate back to a previous Process Phase at run-time.

15

Dr Kevin M Potter Strategy-Dev

FEAtures Process



Save Data on Back: Mark to allow Question Answer data to be saved to the Data Store when a user navigates to a previous Process Phase at run-time.



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Breadcrumb Trail is displayed to the user at run-time.



Generate Levels: Mark to automatically generate Breadcrumb Trail Levels based on existing Process Phases.

16

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Add Breadcrumb Level Dialog and Breadcrumb Level Properties Dialog The Add Breadcrumb Level dialog and Breadcrumb Level Properties dialog are identical. The Add Breadcrumb Level dialog allows you to add a new Breadcrumb Level. The Breadcrumb Level Properties dialog allows you to edit an existing Breadcrumb Level. Details Tab The Details Tab allows you to configure a Breadcrumb Level.

Figure 8 Progress Bar dialog » Details tab.

You can set the following options. 

Display Text: Enter Breadcrumb Level Display Text.



Hint Text: Enter text that you want to display as tool-tip-text when you hover the mouse pointer over the Breadcrumb Level at run-time.



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Breadcrumb Level is displayed to the user at run-time.



Phases: Use the Phase Chooser dialog to multi-select the Phases that the Breadcrumb Level represents.

17

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Button What you need to know A Button enables navigation and/or runs Rules when you click it at run-time. 

Back Navigation Button: A Back Navigation Button enables navigation to a previous Phase.



Forward Navigation Button: A Forward Navigation Button runs Post Phase Rules and in particular works with a Goto Phase Rule to enable navigation to a next Phase.



Action Button: An Action Button runs any Rule(s) that you add to it.

You can add a Button to a Phase or to a Process as a Pre or Post Phase Item.

Figure 9 Button.

Best Practice

It is best practice to use meaningful Customer and/or Project Specific Button names.

 Best Practice



Delete Back Navigation Button from a start Phase. Delete Forward Navigation Button from an end Phase. Delete Navigation Buttons from error Phases. Moving forward will invoke a new error. Moving back may invoke the previous error.

18

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example A Button enables navigation and/or runs Rules when you click it at run-time.

Figure 10 Buttons at run-time.

19

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Button Dialog and Button Properties Dialog The Add Button dialog and Button Properties dialog are identical. The Add Button dialog allows you to add a new Button. The Button Properties dialog allows you to edit an existing Button. Button Tab The Button Tab allows you to set Button type and display text.

Figure 11 Button Properties dialog » Button tab.

You can set the following options. 

Button Type: Select the type of Button that you want to add. 

Action: Add an Action Button.



Forward: Add a Forward Navigation Button.



Back: Add a Back Navigation Button.

20

Dr Kevin M Potter Strategy-Dev

FEAtures Process



Action Command: Enter text to display on the Action Button at run-time.



Help Text: Enter text that you want to display in a pop-up window when you hover the mouse pointer over the Button at run-time.



Hint Text: Enter text that you want to display as tool-tip-text when you hover the mouse pointer over the Button at run-time.



Save Data to Data Store: Mark to save web page (or Phase) business data to Data Items in the Data Store when the Button is clicked.



Disabled: Mark to disable the Button.



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Button is displayed to the user.



Disable Input During Rule Execution: Mark to temporarily disable the Button when Rules are executed.



Check Mandatory Fields: Mark to validate Mandatory Question Answer data before the data is saved to Data Items in the Data Store when the Button is clicked.



Questions Used by Button: Select an option to indicate the Questions that the Button Action depends on. 

All Questions in Phase: The Button Action depends on ALL Phase Questions. The Button runs Pre Phase Rules.



Previous Questions in Phase: The Button Action depends on previous Phase Questions. The Button runs Pre Phase Rules.



Previous Questions in group: The Button Action depends on previous Questions in the Group that the Button is also a member of. The Button does NOT run Pre Phase Rules.



Previous Question: The Button Action depends on the previous Phase Question only. The Button does NOT run Pre Phase Rules.



Specify: The Button Action depends on specified Phase Questions. The Button does NOT run Pre Phase Rules. 



Dependent Questions: Select dependent Questions using the Question Chooser dialog.

None: The Button Action does not depend on Phase Questions. The Button does NOT run Pre Phase Rules.

21

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Import Wizard What you need to know The Component Import Wizard provides you with a simple way to add child Components from your Library Project to your parent Solution Project as Component Phases and Pre/Post Phase Component Item Groups.

Figure 12 Component Import Wizard.

Best Practice

It is best practice to use meaningful Customer and/or Project Specific Component names.



22

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Essential Commands Component Import Wizard Component Import Wizard allows you to add Component Phases and Component Item Groups. Right-click Process. 

Import Component » As Pre Phase Group: Use the Component Import Wizard to add a Pre Phase Component Item Group.



Import Component » As Phase: Use the Component Import Wizard to add a Component Phase.



Import Component » As Post Phase Group: Use the Component Import Wizard to add a Post Phase Component Item Group.

Figure 13 Component Import Wizard.

23

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Component Import Wizard Component Import Wizard allows you to add Component Phases and Component Item Groups. Buttons located at the bottom of each screen enable navigation. 

Next: Click to move forward to the next screen.



Back: Click to move back to the previous screen.



Finish: Click to create a Component Phase or Item Group and close the Wizard.



Cancel: Click to cancel creating a Component Phase or Item Group and close the Wizard.

Map Component Screen The Map Component Screen is simply the Component Import Wizard Welcome screen.

Figure 14 Component Import Wizard » Map Component Screen.

24

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Choose Component Screen The Choose Component Screen allows you to choose a Component from a Library Project.

Figure 15 Component Import Wizard » Choose Component Screen.

You can set the following options. 

Phase Name: Enter the name of Component Phase. (This property is shown if you are building a Component Phase.)



Group Name: Enter the name of Component Item Group. (This property is shown if you are building a Component Item Group.)



Library: Select the Library Project that contains the Component that you want to map to.



Stateful Component: Mark Stateful Component if you want your Component to maintain Data Item values between invocation events.



Available Components: Select the Component (contained in the Library Project) that you want to use.

25

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Data Store Screen The Data Store tab allows you to map exposed child Component Library Project Data Items to parent Solution Project Data Items.

Figure 16 Component Import Wizard » Data Store Screen.

You can set the following options. 

Component: Map exposed child Component Library Project Data Items to parent Solution Project Data Items. 

In: Mark exposed child Data Items that will receive data from parent Solution Project Data Items.



Out: Mark exposed child Data Items that will send data to parent Solution Project Data Items.



Mapping: Select an option that is used to determine how the mapping is created.





Maps to: Map to/from an existing parent Solution Project Data Item.



Generate: Map to/from an automatically generated parent Solution Project Data Item.

Local Data Group/Data Item: Select an existing parent Solution Data Item or view an automatically generated parent Solution Project Data Item.

26

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Presentation Screen The Presentation tab allows you to determine whether the Component uses its own Designs or (parent) Project Designs.

Figure 17 Component Import Wizard » Presentation Screen.

You can set the following options. 

Component: View child Component Library Project Designs.



Mapping: Select an option to determine whether you want to use a child Component Library Project Design or a parent Solution Project Design.





Use Local: Use the parent Solution Project Design.



Use Component: Use the child Library Project Component Design.

Local Presentation: Select a parent Solution Project Design.

27

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Wizard Summary Screen The Wizard Summary Screen simply summarises what the Wizard is going to build.

Figure 18 Component Import Wizard » Wizard Summary Screen.

You can set the following options. 

Finish: Click Finish to add the Component to the Process.

28

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Phase What you need to know A Component Phase is a single Process Phase that encapsulates a Library Project Component Process. 

Add Directly to Process: You can right-click to add a Component Phase to a Process in the same way as you add a normal Phase to a Process.



Add Using Component Import Wizard: You can right-click to add a Component Phase to a Process using the Component Import Wizard.

Figure 19 Component Phase.

Best Practice

It is best practice to use meaningful Customer and/or Project Specific Component Phase names.



29

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Essential Commands Manage Component Phase Process Editor allows you to manage Component Phases. Right-click Process. 

Add » Component Phase: Display the Add Component Phase dialog. Add a new Component Phase to the Process.

Right-click Phase. 

Insert » Component Phase: Display the Add Component Phase dialog. Insert Component Phase before the Phase you right-clicked on.



Properties: Display the Component Phase Properties dialog. The dialog allows you to edit the Component Phase.

Figure 20 Manage Component Phase.

30

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Component Phase Dialog and Component Phase Properties Dialog The Add Component Phase dialog and Component Phase Properties dialog are identical. The Add Component Phase dialog allows you to add a new Component Phase. The Component Phase Properties dialog allows you to edit an existing Component Phase. Properties Tab The Properties tab allows you to name a Component Phase.

Figure 21 Component Phase dialog » Properties tab.

You can set the following options. 

Phase Name: Enter the Component Phase name.

31

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Options Tab The Options Tab allows you to modify Component Phase behaviour.

Figure 22 Component Phase Properties dialog » Options tab.

You can set the following options. 

On Navigating Back: Select an option to determine Phase behaviour when a Back Navigation Button is pressed at run-time. 

Invalidate Data: Data remains in the Data Store but is not counted as valid when a Back Button is clicked.



Leave Data Unchanged: Data remains in the Data Store and is counted as valid when a Back Button is clicked.

32

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Tab » Choose Component Tab The Choose Component tab allows you to select a Component from a Library Project.

Figure 23 Component Phase dialog » Component tab » Choose Component tab.

You can set the following options. 

Library: Select the Library Project that contains the Component that you want to map to.



Stateful Component: Mark Stateful Component if you want your Component to maintain Data Item values between invocation events.

33

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Tab » Component Error Handling Tab The Component Error Handling tab allows you to select an Error Phase (or web page) that you want to display if an error occurs.

Figure 24 Component Phase dialog » Component tab » Component Error Handling tab.

You can set the following options. 

If Error Occurs: Select an option to determine what should happen if an error occurs at run-time. 

Goto Error Phase: Goto an Error Phase when an error occurs. 



Specific Error Phase: Use the Error Phase Chooser dialog to select an Error Phase.

Run Rules: Select specific rules to invoke when an error occurs. 

Specific Error Rules: Use the Rule Chooser dialog to select specific Rules (contained in Rule Editor).



Data Item for Error Message: Select a Data Item that stores the Error Message when an error occurs.



Data Item for Error Code: Select a Data Item that stores the Error Code when an error occurs.

34

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Tab » Broadcast Message Handling Tab The Broadcast Message Handling tab allows you to determine how the parent Component Phase manages Broadcast Messages that are sent from the child Component.

Figure 25 Component Phase dialog » Component tab » Broadcast Message Handling tab.

You can set the following options. 

If Broadcast Message Received: Select an option to determine how the parent Component Phase manages Broadcast Messages that are sent by the child Component. 

Do Nothing: Do nothing when a Broadcast Message is received.



Run Post Phase Rules: Run Post Phase Rules when a Broadcast Message is received.



Run Specific Rules: Run Specific Rules when a Broadcast Message is received. 

Specific Broadcast Rules: Use the Rule Chooser dialog to select specific Rules that you have added to the Rule Editor.

35

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Tab » Data Store Tab The Data Store tab allows you to map exposed child Component Library Project Data Items to parent Solution Project Data Items.

Figure 26 Component Phase dialog » Component tab » Data Store tab.

You can set the following options. 

Component: Map exposed child Component Library Project Data Items to parent Solution Project Data Items. 

In: Mark exposed child Data Items that will receive data from parent Solution Project Data Items.



Out: Mark exposed child Data Items that will send data to parent Solution Project Data Items.



Mapping: Select an option that is used to determine how the mapping is created.





Maps to: Map to/from an existing parent Solution Project Data Item.



Generate: Map to/from an automatically generated parent Solution Project Data Item.

Local Data Group/Data Item: Select an existing parent Solution Data Item or view an automatically generated parent Solution Project Data Item.

36

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Tab » Presentation Tab The Presentation tab allows you to determine whether the Component uses its own Designs or (parent) Project Designs.

Figure 27 Component Phase dialog » Component tab » Presentation tab.

You can set the following options. 

Component: View child Component Library Project Designs.



Mapping: Select an option to determine whether you want to use a child Component Library Project Design or a parent Solution Project Design.





Use Local: Use the parent Solution Project Design.



Use Component: Use the child Library Project Component Design.

Local Presentation: Select a parent Solution Project Design.

37

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Tab » Advanced Tab The Advanced tab allows you to dynamically select a Component at run-time.

Figure 28 Component Phase dialog » Component tab » Advanced tab.

You can set the following options. 

Dynamic Component: Mark to select a Component dynamically at run-time. 

Library Location: Select the Library Project Path and File name.



Component Name: Enter the name of the Component in selected Library Project.

38

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Heading What you need to know A Heading is a textual title that is used to summarise the purpose of other Phase (or web page) Items. Six Heading Levels are defined. By default, Heading Levels incrementally act to diminish Heading font size at runtime; the higher the Heading Level the smaller the Heading. This is by default only as you can size and style as you please using Presentation Editor and Theme Editor. You can add a Heading to a Phase or to a Process as a Pre or Post Phase Item.

Figure 29 Heading.

Best Practice

It is best practice to use meaningful Customer and/or Project Specific Heading names.

 Productivity You can multi-select and drag-and-drop Items within an Editor. Tip

39

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example A Heading is used to summarise the purpose of other Phase (or web page) Items.

Figure 30 Headings at run-time.

40

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Heading Dialog and Heading Properties Dialog The Add Heading dialog and Heading Properties dialog are identical. The Add Heading dialog allows you to add a new Heading. The Heading Properties dialog allows you to edit an existing Heading. Heading Tab The Heading Tab allows you to set Heading Display Text and Heading Level.

Figure 31 Heading Properties dialog » Heading tab.

You can set the following options. 

Display Text: Enter Heading display text.



Heading Level: Select a Heading Level. 

Level 1: Heading Level 1.



Level 2: Heading Level 2.



Level 3: Heading Level 3.



Level 4: Heading Level 4.



Level 5: Heading Level 5.



Level 6: Heading Level 6.

41

Dr Kevin M Potter Strategy-Dev

FEAtures Process



Help Text: Enter text that you want to display in a pop-up window when you hover the mouse pointer over the Heading at run-time.



Hint Text: Enter text that you want to display as tool-tip-text when you hover the mouse pointer over the Heading at run-time.



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Heading is displayed to the user.

42

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Item Group What you need to know An Item Group allows you to group together a collection of related items for manipulation as a single unit. 

Applicable Condition: Use an Item Group when you want to add the same Applicable Condition to adjacent items.



Copy-Paste/Link: Use an Item Group when you want to Copy-Paste/Link adjacent items.



Navigation: Use Item Groups to make it easier for you to navigate within the Process Editor tree-structure. (In a real solution you are going to be managing thousands of Process Items! 

You can add an Item Group to a Phase or to a Process as a Pre or Post Phase Item.

Figure 32 Item Group.

Best Practice

To help you to differentiate an Item Group from similarly named items such as Headings and Questions it is suggested that you postfix an Item Group name with the word “Group”.

 Best Practice



It is Best Practice to use Item Groups to (for lack of a better word) group other Process Items together. This will make it easy for you to copy-paste or copy-link related items, makes it easier to navigate in the Process Editor tree structure and is also simply good housekeeping. 

43

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Item Group Dialog and Item Group Properties Dialog The Add Item Group dialog and Item Group Properties dialog are identical. The Add Item Group dialog allows you to add a new Item Group. The Item Group Properties dialog allows you to edit an existing Item Group. Item Group Tab The Item Group Tab allows you to set Item Group Name.

Figure 33 Item Group dialog.

You can set the following options. 

Item Group Name: Enter a meaningful Item Group Name.



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Item Group is displayed to the user.

44

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Items What you need to know Items are objects that you add to a Phase (or web page) to allow you to interact with a user at run-time. You can also add Items to a Process. More specifically, a Process can have Pre Phase and Post Phase Items. These represent a Header and Footer that are displayed on all Phases (or web pages) that comprise the Process. 

Heading: A Heading is a textual title that is used to summarise the purpose of other Phase (or web page) Items.



Button: A Button invokes a task when clicked by a user.



Question: A Question is a textual message that you add to prompt a user to enter an Answer. An Answer is an item of Business Data.



Table: A Table displays Question-Answer data in a tabular format. Each Question is rendered as a column.



Menu: A Menu allows you to present a user with selectable options that result in some sort of action such as navigating to a different Phase (or web page).



Progress Bar: A Progress Bar allows you to display the Phase-By-Phase steps that a user follows to progress through a Process.



Breadcrumb Trail: A Breadcrumb Trail allows you to display the path a user has taken from Phase-to-Phase through a Process to get to a particular Phase.



Item Group: An Item Group allows you to group together related items for manipulation as a single unit.

Figure 34 Items.

Productivity You can multi-select and drag-and-drop items within an Editor. Tip

45

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example Items allow you to interact with a user at run-time.

Figure 35 Example Items.

46

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Essential Commands Manage Items Process Editor allows you to manage Items. Right-click Process. 

Add Pre/Post Phase : Display the Add dialog. Add as a pre/post Phase Item.

Right-click Phase. 

Add : Display the Add dialog. Add Item to a Phase.

Right-click . 

Add : Display the Add dialog. Add Item to another Item.



Insert : Display the Add dialog. Insert before the you right-clicked on.



Properties: Display the Properties dialog. The dialog allows you to edit the .

Figure 36 Manage .

47

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Menu and Menu Item What you need to know Menu and Menu Items allow you to present a user with selectable options that result in some sort of action such as navigating to a different Phase (or web page). You can create a hierarchy of Menu Items. Menu Items are normally bound to Rules. When you click a Menu Item, you trigger the Rules and something happens. You can add a Menu (and Menu Items) to a Phase or to a Process as a Pre or Post Phase Item.

Figure 37 Menu and Menu Item.

Best Practice

It is best practice to use meaningful Customer and/or Project Specific Menu and Menu Item names.

 Information You can add Menu Items to Menu Items (as well as to a Menu). This allows you to create an arbitrarily rich hierarchical menu structure. 

48

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example By default, a Horizontal Menu is created at run-time.

Figure 38 Menus and Menu Items at run-time.

In Process Editor, a Menu is constructed as a single Menu object followed by a hierarchy of Menu Item objects.

Figure 39 Menus and Menu Items at design-time.

49

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Menu Dialog and Menu Properties Dialog The Add Menu dialog and Menu Properties dialog are identical. The Add Menu dialog allows you to add a new Menu. The Menu Properties dialog allows you to edit an existing Menu. Details Tab The Details Tab allows you to configure a Menu.

Figure 40 Add Menu Dialog » Details tab.

You can set the following options. 

Name: Enter the Menu Name.



Hint Text: Enter text that you want to display as tool-tip-text when you hover the mouse pointer over the Menu at run-time.



Save Data to Data Store: Mark to save web page data to the Data Store when a Menu Item is clicked.



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Menu is displayed to the user.



Generate Menu Items: Mark to automatically generate Menu Items based on existing Process Phases.

50

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Add Menu Item Dialog and Menu Item Properties Dialog The Add Menu Item dialog and Menu Item Properties dialog are identical. The Add Menu Item dialog allows you to add a new Menu Item. The Menu Item Properties dialog allows you to edit an existing Menu Item. Menu Item Tab The Menu Item Tab allows you to configure a Menu Item.

Figure 41 Menu Item Properties dialog » Menu Item tab.

You can set the following options. 

Display Text: Enter Menu Item display text.



Hint Text: Enter text that you want to display as tool-tip-text when you hover the mouse pointer over the Menu Item at run-time.



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Menu Item is displayed to the user.

51

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Phase What you need to know A Phase is a Process step. A Phase is displayed in a browser as a web page when you run your solution. A Phase can have Pre Phase and Post Phase Rules. A Rule is a Business Decision. 

Pre Phase Rule: A Pre Phase Rule executes before a Phase is rendered. You can use a Pre Phase Rule to prepopulate a Phase with information prior to display.



Post Phase Rule: A Post-Phase Rule executes when a user navigates to a next Phase. A Post Phase Rule executes when a user clicks a Forward Navigation Button, or an Action Button that invokes navigation to another Phase.

Figure 42 Phase.

Best Practice

It is best practice to use meaningful Customer and/or Project Specific Phase names.



52

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Essential Commands Manage Phase Process Editor allows you to manage Phases. Right-click Process. 

Add Phase: Display the Add Phase dialog. Add a new Phase to the Process.

Right-click Phase. 

Insert Phase: Display the Add Phase dialog. Insert Phase before the Phase you right-clicked on.



Cut: Cut an existing Phase.



Copy: Copy an existing Phase.



Paste: Paste an existing Phase.



Move Up: Move a Phase above the previous Phase.



Move Down: Move a Phase below the next Phase.



Properties: Display the Phase Properties dialog. The dialog allows you to edit the Phase.



Preview: Preview the Phase in a browser.

Figure 43 Manage Phase.

53

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Phase Dialog and Phase Properties Dialog The Add Phase dialog and Phase Properties dialog are identical. The Add Phase dialog allows you to add a new Phase. The Phase Properties dialog allows you to edit an existing Phase. Properties Tab The Properties Tab allows you to name a Phase.

Figure 44 Phase Properties dialog » Properties tab.

You can set the following options. 

Phase Name: Enter the Phase name.

54

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Options Tab The Options Tab allows you to modify Phase behaviour.

Figure 45 Phase Properties dialog » Options tab.

You can set the following options. 

On Navigating Back: Determine Phase behaviour when a Back Navigation Button is pressed at run-time. 

Invalidate Data: Data remains in the Data Store but is not counted as valid when a Back Button is clicked.



Leave Data Unchanged: Data remains in the Data Store and is counted as valid when a Back Button is clicked.



Output phase to file: Mark to output the Phase to an HTML file.



Static Phase: Mark to designate the Phase as static. A Static Phase allows you to display information but does not accept user input.



Offline Phase: Mark to designate the Phase as offline. Offline Phases are shown when an internet connection is not available.

55

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Navigation Tab The Navigation Tab allows you select a Help Phase.

Figure 46 Phase Properties dialog » Navigation tab.

You can set the following options. 

Help Phase: Select the Phase that will enable you to implement Phase level help.

56

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Security Tab The Security Tab allows you to specify a Phase to go to if edgeConnect encounters a security violation.

Figure 47 Phase Properties dialog » Security tab.

You can set the following options. 

Exposed Data Item(s): Select Data Items to expose when your Process is running.



Exposed Button(s): Exposed Buttons are Buttons that cannot be clicked by the user, because they are hidden, but are activated programmatically. They are used to run Rules which cannot be associated with Questions, for example Goto Phase Rules. These Buttons must be listed to prevent an access violation as ordinarily this would violate the security model, as you are activating a hidden Button.



Access Violation Phase: Select the Phase to jump to when an access violation error occurs.

57

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Phase » Offline Phase What you need to know A Hybrid solution requires Offline Phases. 

Offline Error: An Offline Error Phase is displayed when your Hybrid App cannot “talk” to your Web Server most usually because your Device has no signal.



SSL Error: A Secure Sockets Layer (SSL) Error Phase is displayed when your Web Server SSL certificate is not valid.



Jailbreak Error: A Jailbreak Error Phase is displayed when you try to run your Hybrid App on a jail broken Device.

Offline Phases are packaged as part of your Hybrid App and therefore stored on the (client) Device. This is in contrast to (online) Phases that are requested by the Hybrid App and stored on and dished up by the Web Server. This means that Offline Phases can be displayed even when a Device does not have a connection to a network. Offline Phases are useful when you need to display an Error Web Page or for example when you want to display static information to a user such as a Help web page. (If a web page is already on a Device then you can display it more quickly than having to request a web page across a network and via a Web Server.) You normally want to add navigation functionality to Offline Phases to allow a user to return to the online solution or to progress to other Offline Phases.

Figure 48 Offline Phase.

58

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example The Offline Phase property is only displayed if your Project is a Hybrid Project. Mark the property to designate the Phase as offline.

Figure 49 Phase Properties dialog » Options tab.

In Process Editor, an Offline Phase Icon is different from a normal Phase Icon.

Figure 50 Process Editor » Offline Phases » Icons.

59

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Phase » Output Phase To File What you need to know The Phase, Output Phase To File Property allows you to save a static copy of Phase Web Code to an HTML File; Web Code that would normally be sent directly to a browser. 

Web Page Size Analysis: The Output Phase to File Property can be useful when analysing the size of a particular web page (or in other words the amount of Web Code that is sent to the browser). For Example, used in conjunction with the Presentation object Optimise Java Script property you can analyse web page size before and after Java Script Optimisation.

Figure 51 Output Phase To File.

60

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Best Practice It is best practice to place all Phase to File Documents that belong to your solution into a Folder that is NOT within your Project Home folder.  C:\ECProject\\

Figure 52 Best practice Phase to File folder.

61

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example Mark the Output Phase To File property to save a static copy of Phase Web Code to an HTML File.

Figure 53 Phase Properties dialog » Options tab.

62

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Output tab is displayed. Select a Path and HTML File Name.

Figure 54 Phase Properties dialog » Phase Output tab.

63

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Process What you need to know A Process is comprised of a set of directed steps that allow you to provide a product or a service to a user. A Process step is called a Phase. A Process can have Pre Phase and Post Phase Items. These represent a Header and Footer that are displayed on all Phases that comprise the Process. 

Pre Phase Item: A Pre Phase Item is displayed on all Process Phases before Phase Items are rendered.



Post Phase Item: A Post Phase Item is displayed on all Process Phases after Phase Items are rendered.

Figure 55 Process.

Best Practice

It is Best Practice to split your solution into separate Processes. For example, you can create one Process to implement Phases for your core solution, and a second Process to manage error Phases.

 Best Practice

It is Best Practice to use meaningful Customer and/or Project Specific Process names.



64

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example For example, at run-time for each Process Phase, display (i) Pre Phase Items; (ii) Phase Items; (iii) Post Phase Items.

Figure 56 Pre Phase Items (Header), Phase Items and Post Phase Items (Footer).

65

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Essential Commands Manage Process Process Editor allows you to manage Processes. Right-click Process root node. 

Add Process: Display the Add Process dialog. Add a new Process.

Right-click Process. 

Insert Process: Display the Add Process dialog. Insert Process before the Process you right-clicked on.



Cut: Cut an existing Process.



Copy: Copy an existing Process.



Paste: Paste an existing Process.



Move Up: Move a Process above the previous Process.



Move Down: Move a Process below the next Process.



Properties: Display the Process Properties dialog. The dialog allows you to edit the Process.



Run: Run a Process.

Figure 57 Manage Process.

66

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Process Dialog and Process Properties Dialog The Add Process dialog and Process Properties dialog are identical. The Add Process dialog allows you to add a new Process. The Process Properties dialog allows you to edit an existing Process. Process Tab The Process tab allows you to name your Process.

Figure 58 Process Properties dialog » Process tab.

You can set the following options. 

Process Name: Enter the name of your Process.



Publish as Component: Mark to publish the Process as a Component. This option is only available if the Process is part of a Library Project.

67

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Start Tab The Start Tab allows you to specify two Phases that are used when the Process runs.

Figure 59 Process Properties dialog » Start tab.

You can set the following options. 

Initial Phase: Select the Phase that represents the first Process step.



Error Phase: Select the Phase to jump to when a General Error occurs.

68

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Options Tab The Options Tab allows you to specify Phases that are used for Session Timeout, Navigation, Help and Customisation conditions.

Figure 60 Process Properties dialog » Options tab.

You can set the following options. 

On Navigating Back: Determine Process behaviour when a Back Navigation Button is pressed at run-time. 

Invalidate Data: Data remains in the Data Store but is not counted as valid when a Back Button is clicked.



Leave Data Unchanged: Data remains in the Data Store and is counted as valid when a Back Button is clicked.



Session Timeout Phase: Select the Phase to jump to when a user session times out.



Data Items to Restore: Select the Data Items that are counted as valid when a Back Button is clicked.



Navigation Phase: A Navigation Phase is invoked (using Java Script) from the context of Phase 1 and allows you to navigate to Phase 2 using a Goto Phase Rule. For example, a HighCharts Widget on Phase 1 uses Java Script to invoke a Navigation Phase when you click on a Chart Item (such as a bar or pie slice). The Navigation Phase uses a Goto Phase Rule to navigate to Phase 2.



Help Phase: Select the Phase that will enable you to implement Process level help.



Customize Phase: Select the Phase to jump to when deploying the Process as a Portlet.

69

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Security Tab The Security Tab allows you to specify a Phase to go to if edgeConnect encounters a security violation.

Figure 61 Process Properties dialog » Security tab.

You can set the following options. 

Initial Exposed Data Item(s): Select Data Items to expose when your Process starts.



Exposed Data Item(s): Select Data Items to expose when your Process is running.



Access Violation Phase: Select a Phase (or web page) to jump to when a security error occurs.

70

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Tab The Component tab is only available if the Process is part of a Library Project.

Figure 62 Process Properties dialog » Component tab.

You can set the following options. 

Rules Only: Mark to designate the Component Process as a Rules Only Component.

71

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Tab » Component Comment Tab The Component Comment tab allows you to add a descriptive comment to a Component.

Figure 63 Process Properties dialog » Component tab » Component Comment tab.

You can set the following options. 

Comment: Enter a comment to describe your Component.

72

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Tab » Data Store Tab The Data Store tab allows you to specify Data Items that will be used to transfer data between the (child) Component and the (parent) Project (that uses the Component) at run-time.

Figure 64 Process Properties dialog » Component tab » Data Store tab.

You can set the following options. 

Show only data items currently used by this process: Mark to show only Data Items that are currently used by this Process.



Component: (Child) Component Data Items. 



In: Mark to expose (child) Data Item that allows you to map data from the (parent) Project to the (child) Component. 

Mandatory: Mark to force the (parent) Project to create a mapping to the (child) Component In Data Item.



Default Value: Enter a default value for the In Data Item.

Out: Mark to expose (child) Data Item that allows you to map data to the (parent) Project from the (child) Component.

73

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Component Tab » Presentation Tab The Presentation tab allows you to select a Presentation to associate with the Component.

Figure 65 Process Properties dialog » Component tab » Presentation tab.

You can set the following options. 

Can be used: Mark to indicate that the Presentation can be used. If you do not select a Presentation then the Component becomes a Rules Only Component.



Export All Designs: Mark to expose Designs that are used by (child) Components that are part of this (parent) Component.

74

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Process » Access Violation Phase What you need to know An Access Violation Error occurs when you are on any web page that has a Question that is not bound to a Data Item and you attempt to navigate forwards to a next web page.

Figure 66 Access Violation Error.

75

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process dialog Access Violation Phase Property allows you to specify a Phase (or web page) to jump to at runtime if an Access Violation Error occurs.

Figure 67 Process Dialog » Security Tab » Access Violation Phase Property.

76

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Process » Error Phase What you need to know A General Error occurs when you are on a first web page and attempt to navigate back to a previous web page (that obviously does not exist).

Figure 68 General Error.

77

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process dialog Error Phase Property allows you to specify a Phase (or web page) to jump to at run-time if a General Error occurs.

Figure 69 Process Dialog » Start Tab » Error Phase Property.

78

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Process » Exposed Data Item What you need to know The Process Dialog Security Tab provides properties that allow you to specify Exposed Data Items. 

Initial Exposed Data Item: An Initial Exposed Data Item is a Data Item that is referenced in file named Index.html; this file is executed when you run a Process. An Initial Exposed Data Item invokes a Security Error unless (i) the Data Item exists in the Initial Phase that belongs to the Process or (ii) you specify the Data Item at Process level using the Initial Exposed Data Item Property.



Exposed Data Item: An Exposed Data Item is a Data Item that is referenced in a Template Document or a Widget when a Process is running. An Exposed Data Item invokes a Security Error unless (i) the Data Item exists on the same Phase as the Template Document or Widget or (ii) you specify the Data Item at Process level using the Exposed Data Item Property.

Figure 70 Exposed Data Item.

79

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process dialog Security Tab allows you to add Exposed Data Items at Process Level.

Figure 71 Process Dialog » Start Tab » Exposed Data Item Properties.

80

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Process » Navigation Phase What you need to know A Navigation Phase is invoked (using Java Script) from the context of Phase 1 and allows you to navigate to Phase 2 using a Goto Phase Rule. For example, a HighCharts Widget on Phase 1 uses Java Script to invoke a Navigation Phase when you click on a Chart Item (such as a bar or pie slice). The Navigation Phase uses a Goto Phase Rule to navigate to Phase 2.

Figure 72 Navigation Phase.

81

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Navigation Phase Property allows you to specify a Phase (or web page) to jump to at run-time.

Figure 73 Process Dialog » Options Tab » Navigation Phase Property.

82

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Process » Session Timeout Phase What you need to know A Timeout Error occurs when you are on any web page and your user session times out.

Figure 74 Timeout Error.

83

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process dialog Session Timeout Phase Property allows you to specify a Phase (or web page) to jump to at runtime if a Timeout Error occurs.

Figure 75 Process Dialog » Options Tab » Session Timeout Phase Property.

84

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Process Editor What you need to know Process Editor allows you to add one or more (Business) Processes to describe solution functionality. You can add one or more Phase objects to each Process. You can add items (such as Headings, Questions and Buttons) and Rules to Process and Phase objects.

Figure 76 Process Editor.

Best Practice

It is best practice to split your solution into separate Processes. For example, you can create one Process to implement Phases for your core solution, and a second Process to manage error Phases.

 Best Practice

It is best practice to use meaningful Customer and/or Project Specific Process names.



85

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Essential Commands Open Process Editor Click Window » Process Editor to open the Process Editor.

Figure 77 Open Process Editor.

86

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Process Editor Process Editor allows you to add one or more Processes, Phases and Items to describe your solution.

Figure 78 Process Editor.

87

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Progress Bar and Progress Step What you need to know A Progress Bar allows you to display the Phase-By-Phase Progress Steps that a user follows to progress through a Process. You can add a Progress Bar (and Progress Steps) to a Phase or to a Process as a Pre or Post Phase Item.

Figure 79 Progress Bar and Progress Steps.

Best Practice

It is best practice to use meaningful Customer and/or Project Specific Progress Bar and Progress Step names.



88

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example A user can click a Progress Bar Step to Navigate to a different Phase.

Figure 80 Progress Bar and Progress Steps at run-time.

In Process Editor, a Progress Bar is constructed as a single Progress Bar object followed by child Progress Step objects.

Figure 81 Progress Bar and Progress Steps at design-time.

89

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Progress Bar Dialog and Progress Bar Properties Dialog The Add Progress Bar dialog and Progress Bar Properties dialog are identical. The Add Progress Bar dialog allows you to add a new Progress Bar. The Progress Bar Properties dialog allows you to edit an existing Progress Bar. Details Tab The Details Tab allows you to configure a Progress Bar.

Figure 82 Progress Bar dialog » Details tab.

You can set the following options. 

Name: Enter a Progress Bar Name.



Hint Text: Enter text that you want to display as tool-tip-text when you hover the mouse pointer over the Progress Bar at run-time.



Allow Back Navigation: Mark to allow the user to click Progress Bar steps to navigate back to previous Process Phases.



Save Data on Back: Mark to save Question Answer data to the Data Store when a user navigates to a previous Process Phase.

90

Dr Kevin M Potter Strategy-Dev

FEAtures Process



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Progress Bar is displayed to the user.



Generate Steps: Mark to automatically generate Progress Bar Steps based on Process Phases.



Allow Forward Navigation: Mark to allow the user to click Progress Bar steps to navigate forward to a next Process Phase.



Check Mandatory Questions: Mark to force the user to enter Answers for All Mandatory Questions on the current Phase before being allowed to navigate to another Phase.

91

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Add Progress Step Dialog and Progress Step Properties Dialog The Add Progress Step dialog and Progress Step Properties dialog are identical. The Add Progress Step dialog allows you to add a new Progress Step. The Progress Step Properties dialog allows you to edit an existing Progress Step. Details Tab The Details Tab allows you to configure a Progress Step.

Figure 83 Progress Bar dialog » Details tab.

You can set the following options. 

Display Text: Enter Progress Step Display Text.



Hint Text: Enter text that you want to display as tool-tip-text when you hover the mouse pointer over the Progress Step at run-time.



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Progress Step is displayed to the user at run-time.



Phases: Use the Phase Chooser dialog to multi-select the Phases that the Progress Step represents.

92

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Question What you need to know A Question is a textual message that you add to prompt a user to enter an Answer. An Answer is an item of Business Data, bound to a Data Item in the Data Store. By default, all Question Answers are Mandatory; a user cannot progress to the next Phase until all Questions are answered. However there may be optional Answers; not every user has a Mobile Telephone Number. By default, a user can always enter a Question Answer. However, on a Summary Phase you may want to simply display an Answer and not allow a user to change it. The Process Editor Question Properties dialog allows you to determine whether a Question Answer is Mandatory and/or Read Only. You can add a Question to a Phase or to a Process as a Pre or Post Phase Item.

Figure 84 Question.

Best Practice

It is best practice to use meaningful Customer and/or Project Specific Question names.



93

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example Questions allow you to get or display business data at run-time.

Figure 85 Questions at run-time.

94

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Question Dialog and Question Properties Dialog The Add Question dialog and Question Properties dialog are identical. The Add Question dialog allows you to add a new Question. The Question Properties dialog allows you to edit an existing Question. Question Tab The Question Tab allows you to set Question display text.

Figure 86 Question dialog » Question tab.

You can set the following options. 

Display Text: Question text as displayed on the Phase web page.



Help Text: Enter text that you want to display in a pop-up window when you hover the mouse pointer over the Question at run-time.



Hint Text: Enter text that you want to display as tool-tip-text when you hover the mouse pointer over the Question at run-time.



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Question is displayed to the user.



Allow Question Level Rules: Mark to allow Rules to be added directly to the Question.

95

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Answer Tab The Answer Tab allows you to configure a Question Answer.

Figure 87 Question dialog » Answer tab.

You can set the following options. 

Mandatory: Mark to make a Question Answer Mandatory.



Read Only: Mark to make a Question Answer Read Only.



Data Item: Bind a Question Answer to a Data Item in the Data Store Editor.

96

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Validation Tab The Validation Tab allows you to override Validation belonging to the bound Data Item for all Data Types except List.

Figure 88 Question dialog » Answer tab.

Best Practice



It is best practice to explicitly create a new Custom Data Type to represent each Regular Expression (and Min-Max Data Constraint) that you need to add to your solution. You are likely to use the Custom Data Type more than once. Your solution is simplified, easier to manage and promotes reusability and explicit Data Binding.  Custom Data Type  Data Item  Question You can also add a Regular Expression (and Min-Max Data Constraint) directly to a Data Item or to a Question. This is an ad hoc and repetitive approach that risks adding unnecessary work and complexity to your solution and is NOT best practice.

97

Dr Kevin M Potter Strategy-Dev

FEAtures Process

You can set the following options. 

Override Data Store Validation: Mark to replace Data Store Validation with your own validation.



Validation Type (Text Type Only): The type of validation that applies to the Custom Data Type. 

Regular Expression.



Alpha.



Alphanumeric.



Date.



Decimal.



Numeric.



Min Field Length (Text Type Only): Minimum valid Answer length.



Max Field Length (Text Type Only): Maximum valid Answer length.



Regular Expression (Text Type Only): Answer format described as a Regular Expression.



Min Value (All other Types): Minimum value.



Max Value (All other Types): Maximum value.

98

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Rules Only Phase What you need to know A Rules Only Phase controls the execution of Rules (or Business Decisions) that act on Data as a background Business Process Step on the Web Server. Rules are executed sequentially. The final Rule is often a Goto Phase Rule; this directs business process flow to the next Phase.

Figure 89 Rules Only Phase.

Best Practice

It is best practice to use meaningful Customer and/or Project Specific Rules Only Phase names.



99

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Essential Commands Manage Rules Only Phase Process Editor allows you to manage Rules Only Phases. Right-click Process. 

Add Rules Only Phase: Display the Add Rules Only Phase dialog. Add a new Rules Only Phase to the Process.

Right-click Phase. 

Insert Phase: Display the Add Rules Only Phase dialog. Insert Rules Only Phase before the Phase you rightclicked on.



Cut: Cut an existing Rules Only Phase.



Copy: Copy an existing Rules Only Phase.



Paste: Paste an existing Rules Only Phase.



Move Up: Move a Rules Only Phase above the previous Phase.



Move Down: Move a Rules Only Phase below the next Phase.



Properties: Display the Rules Only Phase Properties dialog. The dialog allows you to edit the Rules Only Phase.

Figure 90 Manage Rules Only Phase.

100

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Rules Only Phase Dialog and Rules Only Phase Properties Dialog The Add Rules Only Phase dialog and Rules Only Phase Properties dialog are identical. The Add Rules Only Phase dialog allows you to add a new Rules Only Phase. The Rules Only Phase Properties dialog allows you to edit an existing Rules Only Phase. Properties Tab The Properties Tab allows you to name a Rules Only Phase.

Figure 91 Rules Only Phase Properties dialog » Properties tab.

You can set the following options. 

Phase Name: Enter the Rules Only Phase name.

101

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Security Tab The Security Tab allows you to specify a Phase to go to if edgeConnect encounters a security violation.

Figure 92 Phase Properties dialog » Security tab.

You can set the following options. 

Exposed Data Item(s): Select Data Items to expose when your Process is running.



Exposed Button(s): Exposed Buttons are Buttons that cannot be clicked by the user, because they are hidden, but are activated programmatically. They are used to run Rules which cannot be associated with Questions, for example Goto Phase Rules. These Buttons must be listed to prevent an access violation as ordinarily this would violate the security model, as you are activating a hidden Button.



Access Violation Phase: Select the Phase to jump to when an access violation error occurs.

102

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Table What you need to know A Table displays Question-Answer data in a tabular format. Each Question is rendered as a column. The Question Answers are bound to Data Items that are contained in a repeating Data Group. You can add a Table to a Phase or to a Process as a Pre or Post Phase Item.

Figure 93 Table.

You can construct several different types of Table to display or to capture Business Data. A Table displays and/or stores Business Data from/to a bound Data Group that contains Data Items linked to Questions. A Table displays a column for each Question. You can enhance user interaction by adding Button, Menu and Row Selector columns to a Table. Best Practice

It is best practice to use meaningful Customer and/or Project Specific Table names.



103

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Type 

Simple Table: A Simple Table creates a column for each Item that you add to the Table. The first row contains Item Headings; subsequent rows contain Item Data.



Linear Table: A Linear Table creates a single column with multiple cells. Each cell contains a row for each Item that you add to the Table.



Data Grid Table: A Data Grid Table displays Items in a spreadsheet format and provides copy-paste functionality that is compatible with Microsoft Excel and Google Spreadsheet.



Nested Table: A Nested Table provides a column for every Data Item in a parent-child Data Group hierarchy and produces a Table within a Table structure.

Selection 

Button: You can add a column of Buttons to a Table. Button Rules allow you to select and/or process Business Data on a specific row when a Button is clicked.



Menu: You can add a column of Menus to a Table. Menu Rules allow you to select and/or process Business Data on a specific row when a Menu Item is clicked.



Selector: You can add a column of option buttons to enable single row selection. You can add a column of check-boxes to enable multi-row selection.

Layout 

Size: You can alter Table width and height. You can alter column width.



Pagination: You can create a paged Table which provides navigation features that allow you to move forwards and backwards through Table Business Data page-by-page.

Figure 94 Table Options.

104

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example A Table allows a user to interact with large amounts of data.

Figure 95 Table at run-time.

105

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Add Table Dialog and Table Properties Dialog The Add Table dialog and Table Properties dialog are identical. The Add Table dialog allows you to add a new Table. The Table Properties dialog allows you to edit an existing Table. Table Tab The Table Tab allows you to set the Table name.

Figure 96 Table Properties dialog » Table tab.

You can set the following options. 

Table Name: Enter a Table Name.



Multi-select Rows: Mark to allow a user to select multiple rows.



Selected Row Data Item: Store selected row indexes in this Data Item.



Auto Selector: Mark to automatically store the row index.



Selection mandatory: Mark to force the user to select a row.



Not Applicable: Mark to allow you to add a Conditional Rule that determines whether the Table is displayed to the user.



Row Not Applicable: Mark to allow you to add a Conditional Rule that determines whether specific Rows are displayed to the user.

106

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For Example You can drag a Data Group from Data Store Editor to a Phase in Process Editor to create a new Table. 

Figure 97 Drag BankAccountDetailsData Data Group onto Enter Bank Account Details Phase to create a new Table.

Information The Generate Table Within option is only available when the Data Group Set Maximum Instances property is unmarked or when the Data Group Set Maximum Instances property is marked and the Data Group Maximum Instances property value is greater than 1 (>1).

107

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Table » Add a Table with Drag-Drop What you need to know The easiest way to add a Table is to drag-drop a multi-instance Data Group from Data Store Editor to a Process Editor Phase. Depending on the type of Table that you need you may also need to use Presentation Editor and the Rich Presentation Table Properties dialog to set Display Type. Add a Simple Table You can add a Simple Table by dragging a single-level Data Group from Data Store Editor to a Process Editor Phase and selecting the Generate Table Within option.

Figure 98 Add a Simple Table.

108

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Add a Linear Table You can add a Linear Table by dragging a Data Group from Data Store Editor to a Process Editor Phase and selecting the Generate Table Within option.

Figure 99 Add a Linear Table – Part 1.

Then… select Presentation Editor » Rich Presentation Table Properties » Appearance tab. 

Design: Set Design to Custom.



Display Type: Set Display Type to edgeConnect Linear Table.

Figure 100 Add a Linear Table – Part 2.

109

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Add a Data Grid Table You can add a Data Grid Table by dragging a Data Group from Data Store Editor to a Process Editor Phase and selecting the Generate Table Within option.

Figure 101 Add a Data Grid Table – Part 1.

Then… select Presentation Editor » Rich Presentation Table Properties » Appearance tab. 

Design: Set Design to Custom.



Display Type: Set Display Type to Data Grid (jquery).

Figure 102 Add a Data Grid Table – Part 2.

110

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Add a Nested Table You can add a Nested Table by dragging a multi-level Data Group from Data Store Editor to a Process Editor Phase and selecting the Generate Nested Tables Within option.

Figure 103 Add a Nested Table.

111

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Table » Row Selection What you need to know You can select and remember Table rows in several different ways. 

Auto Selector: You can use the Auto Selector option to automatically set the current instance of the Data Group to the selected Table row.



Single Row Selection with Option Buttons: You can add a column of option buttons to a Table, mark an option button to indicate a selected row and store the row index in a single-value Data Item.



Single Row Selection without Option Buttons: You can mark a Table row by clicking the row rather than using option buttons and store the row index in a single-value Data Item.



Multi Row Selection with Check Boxes: You can add a column of check boxes to a Table, mark multiple check boxes to indicate selected rows and store the row indexes in a multi-value-list Data Item.

Figure 104 Row Selection.

112

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Auto Selector You can use the Auto Selector option to automatically set the current instance of the Data Group to the selected Table row. Select Process Editor » Table Properties dialog. 

Auto Selector: Mark Auto Selector.

Figure 105 Auto Selector.

113

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Single Row Selection You can add a column of option buttons to a Table, mark an option button to indicate a selected row and store the row index in a single-value Data Item. Or… You can mark a Table row by clicking the row rather than using option buttons and store the row index in a singlevalue Data Item. Select Process Editor, Table Properties dialog. 

Selected row Data Item: Select a single-value Data Item to store the index of the selected row.



Auto Selector: Unmark Auto Selector.

Figure 106 Single Row Selection.

114

Dr Kevin M Potter Strategy-Dev

FEAtures Process

If you do not want to display the Selector column then… Select Presentation Editor » Table Properties dialog » Selector tab. 

Hide Selector: Mark Hide Selector.

Figure 107 Rich Presentation Table Properties » Selector tab.

115

Dr Kevin M Potter Strategy-Dev

FEAtures Process

If you want to display a Selector Column Heading and select the location of the Selector Column then… Select Presentation Editor » Table Properties dialog » Selector tab. 

Hide Selector: Unmark Hide Selector.



Selector Label: Enter a Selector column heading.



Selector Position: Select Before or After to show the Selector column as the first or last Table column.

Figure 108 Rich Presentation Table Properties » Selector tab.

116

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Multi Row Selection You can add a column of check boxes to a Table, mark multiple check boxes to indicate selected rows and store the row indexes in a multi-value-list Data Item. Select Process Editor » Table Properties dialog. 

Multi-select Rows: Mark Multi-select rows.



Selected row Data Item: Select a multi-value Data Item to store the indexes of the selected rows.



Auto Selector: Unmark Auto Selector.

Figure 109 Multi Row Selection.

117

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Visualise Flow What you need to know Visualise Flow allows you to display an overview diagram of the Phases involved in a Process and their interconnecting Goto Phase Rules. At Process level no Rule decisions are shown on the diagram, just the presence of a relationship. However, you can also Visualise Flow at Phase level, where you can see any true and false Rules and the flow between them.

Figure 110 Visualise Flow at Process Level.

Figure 111 Visualise Flow at Phase Level.

118

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Essential Commands Open Visualise Process/Phase Flow Process Editor allows you to Visualise Process and Phase Flow. Right-click Process. 

Visualise Flow: Display the Process/Phase Flow dialog. Visualise Process Flow.

Right-click Phase. 

Visualise Flow: Display the Process/Phase Flow dialog. Visualise Phase Flow.

Figure 112 Open Visualise Process/Phase Flow.

119

Dr Kevin M Potter Strategy-Dev

FEAtures Process

What Can I Build? Error Management Process What you need to know The Exercises in this Chapter show you how to build a Process that has three “error managing” web pages (or Phases). 

General Error: A general error occurs when you are on a first web page and attempt to navigate back to a previous web page.



Timeout Error: A timeout error occurs when you are on any web page and your user session times out.



Access Violation Error: An access violation error occurs when you are on any web page that has a Question that is not bound to a Data Item and you attempt to navigate forwards to a next web page.

Each Error Management web page (or Phase) contains two Headings that together convey a user friendly error message.

Figure 113 Sketch a Design » Error Management Process.

120

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Each Error Management web page (or Phase) contains two Headings that together convey a user friendly error message.

Figure 114 Example Error Management web page.

121

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Process Step-By-Step The following steps show you how to use Developer’s Process Editor to add a new Error Management Process. 1.

Start Developer.

2.

Select Window menu » Process Editor.

Figure 115 Process Editor.

3.

Right-click Processes root node » Add Process.

4.

Enter Process Name. Error Management

Figure 116 Add Process dialog » Process tab.

5.

Click OK.

122

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Error Management Process is added to the Process Editor tree-structure.

Figure 117 Process Editor » Error Management Process.

6.

Select File menu » Save.

123

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Number of Backups Step-By-Step The following steps show you how to set the maximum number of Project File backup copies that Developer is allowed to create. A new copy is created each time you save your Project. 1.

Select Tools menu » Options.

2.

Drag the Number of Backups indicator from 5 to 10.

Figure 118 Options Properties dialog » System Options tab.

3.

Click OK.

124

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Developer will create and manage up to 10 backup copies of your Project. 4.

Open Windows Explorer.

5.

Navigate to the Project Folder. C:\ECProject\Projects\FEAturesHybridSolution

6.

Confirm that you can see the original Project file. FEAturesHybridSolution.ifp

7.

Confirm that you can see one or more Backup copies of the original Project file. FEAturesHybridSolution.ifp~1

Figure 119 Windows Explorer » FEAturesHybridSolution Project Folder » Original Project file and Backup copy.

8.

Close Windows Explorer.

125

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Add a Phase to a Process Step-By-Step The following steps show you how to add a new Test Me Phase to the Error Management Process. You are simply adding this Phase so that you can test the required Error Management Phases. 1.

Select Process Editor.

2.

Right-click Error Management Process » Add » Phase.

3.

Enter Phase Name. Test Me

Figure 120 Add Phase dialog » Properties tab.

4.

Click OK.

126

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Test Me Phase is added to the Error Management Process tree-structure.

Figure 121 Error Management Process » Test Me Phase.

5.

Select File menu » Save.

127

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test A Phase is just a web page. Preview allows you to see what the Phase (or web page) looks like at run-time.  1.

Right-click Test Me Phase » Preview.

2.

Close browser.

Figure 122 Preview Test Me Phase.

128

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Auto Generate Navigation Buttons Step-By-Step When you created the Test Me Phase in the previous Exercise a Back and a Forward button were automatically added to the Phase. These are Navigation Buttons.

Figure 123 Test Me Phase » Automatically Generated Navigation Buttons.

We will make use of these buttons in the Test Me Phase but do not want the buttons to be added to any other Phases that you create.

129

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The following steps show you how to tell Developer to stop automatically generating Back and Forward Navigation Buttons. 1.

Select Tools menu » Options.

2.

Unmark Auto Generate Navigation Buttons.

Figure 124 Options Properties dialog » System Options tab.

3.

Click OK.

When you create Phases in the next Exercise you’ll note that Navigation Buttons are no longer automatically generated. 

130

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Add a Phase to a Process Step-By-Step The following steps show you how to add the General Error web page (or Phase) to the Error Management Process. 1.

Select Process Editor.

2.

Right-click Error Management Process » Add » Phase.

3.

Enter Phase Name. General Error

Figure 125 Add Phase dialog » Properties tab.

4.

Click OK.

131

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The General Error Phase is added to the Error Management Process tree-structure.

Figure 126 Error Management Process » General Error Phase.

Note that because you unmarked the Auto Generate Navigation Buttons property in the last Exercise that Navigation Buttons are no longer automatically generated.  5.

Select File menu » Save.

132

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Phases to the Error Management Process.

Phase Process Name

Phase Name

Error Management

Timeout Error

Error Management

Access Violation Error

Table 1 Phase.

The Error Management Process now has four Phases.

Figure 127 Error Management Process Phases.

133

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 6 » Set Process Properties Step-By-Step The following steps show you how to edit Error Management Process Properties so that it can make use of its own Error Management Phases when an error occurs. 1.

Select Process Editor.

2.

Right-click Error Management Process » Properties.

3.

Select Start tab.

4.

Click Initial Phase Select button.

Figure 128 Process Properties dialog » Start tab.

134

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 5.

Expand Error Management Process.

6.

Select Phase. Test Me

Figure 129 Phase Chooser dialog.

7.

Click OK to close the Phase Chooser dialog.

135

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 8.

Confirm that the Initial Phase is correctly set. Error Management.Test Me

Figure 130 Process Properties dialog » Start tab.

136

Dr Kevin M Potter Strategy-Dev

FEAtures Process

9.

Click Error Phase Select button.

Figure 131 Process Properties dialog » Start tab.

137

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 10.

Expand Error Management Process.

11.

Select Phase. General Error

Figure 132 Phase Chooser dialog.

12.

Click OK to close the Phase Chooser dialog.

138

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 13.

Confirm that the Error Phase is correctly set. Error Management.General Error

Figure 133 Process Properties dialog » Start tab.

139

Dr Kevin M Potter Strategy-Dev

FEAtures Process

14.

Select Options tab.

15.

Click Session Timeout Phase Select button.

Figure 134 Process Properties dialog » Options tab.

140

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 16.

Expand Error Management Process.

17.

Select Phase. Timeout Error

Figure 135 Phase Chooser dialog.

18.

Click OK to close the Phase Chooser dialog.

141

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 19.

Confirm that the Session Timeout Phase is correctly set. Error Management.Timeout Error

Figure 136 Process Properties dialog » Options tab.

142

Dr Kevin M Potter Strategy-Dev

FEAtures Process

20.

Select Security tab.

21.

Click Access Violation Phase Select button.

Figure 137 Process Properties dialog » Security tab.

143

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 22.

Expand Error Management Process.

23.

Select Phase. Access Violation Error

Figure 138 Phase Chooser dialog.

24.

Click OK to close the Phase Chooser dialog.

144

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 25.

Confirm that the Access Violation Phase is correctly set. Error Management.Access Violation Error

Figure 139 Process Properties dialog » Security tab.

26.

Click OK.

27.

Select File menu » Save.

145

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 7 » Add a Heading to a Phase Step-By-Step The following steps show you how to add a new Heading to a Phase. 1.

Select Process Editor.

2.

Expand Error Management Process.

3.

Right-click Test Me Phase » Add » Heading.

4.

Enter Display Text. Test Me

5.

Select Heading Level. Level 1

Figure 140 Add Heading dialog » Heading tab.

6.

Click OK.

146

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Heading is added to the Test Me Phase.

Figure 141 Test Me Heading as last Item in Test Me Phase.

3.

Move the Heading above the Back Button by dragging and dropping the Heading onto the Back Button.

Figure 142 Test Me Heading as first Item in Test Me Phase.

4.

Select File menu » Save.

147

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Test Me Phase to see what the Heading looks like at run-time.  1.

Right-click Test Me Phase » Preview.

2.

Close browser.

Figure 143 Preview Test Me Phase.

148

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Headings to Phases that belong to the Error Management Process. Productivity The following Heading table contains three identical “OOPs” Headings. Whenever you see a pattern Tip like this you can save time by using copy and paste. You can right-click on a source Item and select Copy or select a source Item and press + C. You can right-click on a target Item and select Paste or select a target Item and press + V.

Heading Phase Name

Display Text

General Error

OOPs

Level 1

General Error

Really sorry but a general error occurred. Please try again...

Level 2

Timeout Error

OOPs

Level 1

Timeout Error

Really sorry but your user session timed out. Please try again...

Level 2

Access Violation Error

OOPs

Level 1

Access Violation Error

Really sorry but an access violation error occurred. Please try again...

Level 2

Table 2 Heading.

149

Dr Kevin M Potter Strategy-Dev

Heading Level

FEAtures Process

The Error Management Process Phases now have Headings. 

Figure 144 Error Management Process Headings.

150

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Headings are correctly displayed. 1.

General Error.

2.

Timeout Error.

3.

Access Violation Error.

Figure 145 General Error Phase.

Figure 146 Timeout Error Phase.

Figure 147 Access Violation Error Phase.

151

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 8 » Add a Question to a Phase Step-By-Step The following steps show you how to add a new Question to the Test Me Phase. You are simply adding this Question so that you can test the functionality of the Access Violation Error. 1.

Select Process Editor.

2.

Expand Error Management Process.

3.

Right-click Test Me Phase » Add » Question.

4.

Enter Display Text. Unbound Test Question

Figure 148 Add Question dialog » Question tab.

5.

Click OK.

152

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Question is added to the Test Me Phase.

Figure 149 Unbound Test Question as last Item in Test Me Phase.

6.

Move the Question above the Back Button by dragging and dropping the Question onto the Back Button.

Figure 150 Unbound Test Question as second Item in Test Me Phase.

7.

Select File menu » Save.

153

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Test Me Phase to see what the Question looks like at run-time.  1.

Right-click Test Me Phase » Preview.

2.

Close browser.

Figure 151 Preview Test Me Phase.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

154

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Error Management Process » Test and Annotate What you need to know Exercises in this Chapter show you how to test your solution; invoke General, Timeout and Access Violation errors that force the Error Management Phases (or web pages) to be displayed. A Test Me Phase is used to invoke the errors. 

General Error: A general error occurs when you are on a first web page and attempt to navigate back to a previous web page.



Timeout Error: A timeout error occurs when you are on any web page and your user session times out.



Access Violation Error: An access violation error occurs when you are on any web page that has a Question that is not bound to a Data Item and you attempt to navigate forwards to a next web page.

Further Exercises in this Chapter show you how to add Notes; these allow you to annotate your solution.

Figure 152 Sketch a Design » Error Management Process » Test and Annotate.

Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 155

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Throw a General Error Step-By-Step The following steps show you how to force edgeConnect to throw a General Error and also show you what happens when you use the browser navigation buttons. 1.

Start Developer.

2.

Select Window menu » Process Editor.

3.

Right-click Error Management Process » Run.

4.

Click the Back Button.

Figure 153 Test Me Phase.

The General Error Phase is displayed.

Figure 154 General Error Phase.

A general error occurs when you are on a first web page and attempt to navigate back to a previous web page (that obviously does not exist ).

156

Dr Kevin M Potter Strategy-Dev

FEAtures Process

5.

Click the browser back button.

Figure 155 Browser navigation.

157

Dr Kevin M Potter Strategy-Dev

FEAtures Process

A browser error occurs. The look and feel of the error will depend on which browser you are using. Not nice, not helpful. 

Figure 156 Browser error.

Let’s fix it! 

158

Dr Kevin M Potter Strategy-Dev

FEAtures Process

6.

Close browser.

7.

Select Developer.

8.

Select Project menu » Properties.

9.

Select Details tab.

The browser error occurred because the Browser Navigation Behaviour property is set to Do Nothing.

Figure 157 Project Properties dialog » Details tab.

159

Dr Kevin M Potter Strategy-Dev

FEAtures Process

10.

Select Browser Navigation Behaviour. Process Automatically

Figure 158 Project Properties dialog » Details tab.

11.

Click OK.

12.

Select File menu » Save.

160

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Let’s run the Error Management Process again and see what happens. 13.

Select Process Editor.

14.

Right-click Error Management Process » Run.

15.

Click the Back Button.

Figure 159 Test Me Phase.

The General Error Phase is displayed.

Figure 160 General Error Phase.

161

Dr Kevin M Potter Strategy-Dev

FEAtures Process

16.

Click the browser back button.

Figure 161 Browser navigation.

162

Dr Kevin M Potter Strategy-Dev

FEAtures Process

This time the General Error Phase is displayed again rather than the browser error message.

Figure 162 Browser navigation.

17.

Close browser.

163

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Throw a Timeout Error Step-By-Step The following steps show you how to force edgeConnect to throw a Timeout Error by altering the Session Timeout property. 1.

Select Tools menu » Options.

2.

Select Run/Preview tab.

3.

Enter Session Timeout (seconds). 10

Figure 163 Options Properties dialog » Run/Preview tab » Session Timeout (seconds) Property.

4.

Click OK.

164

Dr Kevin M Potter Strategy-Dev

FEAtures Process

When you run the Error Management Process your user session should now timeout after 10 seconds. So, let’s run the Error Management Process and see what happens. 5.

Select Process Editor.

6.

Right-click Error Management Process » Run.

7.

Wait for 10 seconds!

Figure 164 Test Me Phase.

8.

Click the Back Button.

Figure 165 Test Me Phase.

165

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Timeout Error Phase is displayed.

Figure 166 Timeout Error Phase.

9.

Close browser.

166

Dr Kevin M Potter Strategy-Dev

FEAtures Process

You probably don’t want to leave the Session Timeout property set to 10 seconds so let’s reset this property. 10.

Select Developer.

11.

Select Tools menu » Options.

12.

Select Run/Preview tab.

13.

Clear Session Timeout (seconds). 10

Figure 167 Options Properties dialog » Run/Preview tab » Session Timeout (seconds) Property.

14.

Click OK.

167

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Throw an Access Violation Error Step-By-Step The following steps show you how to force edgeConnect to throw an Access Violation Error. When the error is thrown the Runtime Error dialog is displayed. The Runtime Error dialog allows you to access the View Logs dialog. You can determine log verbosity by setting the Debug Level property in the Options Properties dialog… phew!  1.

Select Tools menu » Options.

2.

Select Run/Preview tab.

3.

Select Debug Level. Level 4 (All Information)

Figure 168 Options Properties dialog » Run/Preview tab » Debug Level Property.

4.

Click OK.

168

Dr Kevin M Potter Strategy-Dev

FEAtures Process

5.

Select Process Editor.

6.

Right-click Error Management Process » Run.

7.

Enter an Answer for Unbound Test Question. Any Value

8.

Click the Continue Button.

Figure 169 Test Me Phase.

The Access Violation Error Phase is displayed.

Figure 170 Access Violation Error Phase.

An access violation error occurs when you are on any web page that has a Question that is not bound to a Data Item and you attempt to navigate forwards to a next web page. edgeConnect wants to store the Question Answer but has nowhere to put it. 

169

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Runtime Error dialog is also displayed. This dialog provides a summary description of the error that occurred and provides you with one click access to the log files; these provide a detailed description of the error that occurred.

Figure 171 Runtime Error dialog.

Specifically, the Unbound Test Question is (by default) mandatory; edgeConnect expects a value and expects to be able to save the value.

170

Dr Kevin M Potter Strategy-Dev

FEAtures Process

For additional information you can click the View Logs button. 9.

Click View Logs Button.

Figure 172 Runtime Error dialog.

171

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Runtime Error dialog is closed and the View Logs dialog is displayed.

Figure 173 View Logs dialog » Runtime Error tab.

The View Logs dialog provides you with easy access to your Project’s 4 log files and to 2 additional log files that provide specific information about Developer. 10.

Click OK to close the View Logs dialog.

172

Dr Kevin M Potter Strategy-Dev

FEAtures Process

You do not need to wait until an error occurs in order to gain access to the View Logs dialog. The dialog is available at any time via the Tools Menu. 11.

Select Tools menu » View Logs.

Figure 174 View Logs dialog.

173

Dr Kevin M Potter Strategy-Dev

FEAtures Process

From time-to-time you may want to clear the run-time log files to make it easier for you to find new error information. 12.

Click Clear Runtime Logs button.

Figure 175 View Logs dialog » Clear Runtime Logs button.

The Clear Logs confirmation message is displayed.

Figure 176 Clear Logs confirmation message.

13.

Click Yes.

174

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The View Logs dialog is displayed. The Log Files have been cleared.

Figure 177 View Logs dialog.

14.

Click OK to close the View Logs dialog.

175

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Configure Note Look and Feel Step-By-Step The following steps show you how to configure Note look and feel using the Options Properties dialog. 1.

Select Tools menu » Options.

2.

Select Notes tab.

3.

Select Notes Font Name. Arial Black

4.

Select Notes Font Size. 11

5.

Mark Italic.

Figure 178 Options Properties dialog » Notes tab.

6.

Click OK.

176

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Add a Note Type Step-By-Step By default, edgeConnect provides you with three types of Note. 

To Do: A message that explains an outstanding task that is part of your solution.



Specification: A message that explains a customer specification or requirement.



Comment: A general message that describes any part of your solution.

The following steps show you how to add your own Note Type. 1.

Select Project Menu » Notes » Types.

2.

Click the Add button.

3.

Enter Type Name. FEAtures Info

Figure 179 Note Types Properties dialog.

4.

Click OK.

5.

Select File menu » Save.

177

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 6 » Add a Note at Design Time Step-By-Step The following steps show you how to add a Note within an Editor window at Design Time. Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 1.

Select Process Editor.

2.

Expand Error Management Process.

3.

Right-click Test Me Phase » Add » Note.

4.

Select Note Type. FEAtures Info

5.

Enter Note Text. A Test Phase for the Error Management Solution.

Figure 180 Note Properties dialog » Detail tab.

6.

Click OK.

178

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The FEAtures Info Note is added to the Test Me Phase.

Figure 181 FEAtures Info Note.

7.

Select File Menu » Save.

179

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Notes to Phases that belong to the Error Management Process.

Note Phase Name

Note Type

Note Text

General Error

FEAtures Info

A general error occurs when you are on a first web page and attempt to navigate back to a previous web page.

Timeout Error

FEAtures Info

A timeout error occurs when you are on any web page and your user session times out.

Access Violation Error

FEAtures Info

An access violation error occurs when you are on any web page that has a Question that is not bound to a Data Item and you attempt to navigate forwards to a next web page.

Table 3 Note.

180

Dr Kevin M Potter Strategy-Dev

FEAtures Process

You have now added Notes to annotate your solution for your benefit and for the benefit of others in the future! 

Figure 182 Using Notes to annotate the Error Management Process.

181

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 7 » Use Tool Tip Text to View a Note Step-By-Step A Note (in an Editor) is displayed on a single line and for this reason the text is sometimes truncated. To view a complete Note you can hold the mouse pointer over the Note and allow it to be displayed as tool-tip text. The following steps show you how to display a complete Note as tool-tip text. 1.

Hold the mouse pointer over the Timeout Error Note.

Figure 183 Note tool-tip text.

182

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 8 » Add a Note at Run Time Step-By-Step So far you have added useful Notes to your solution within Developer at Design time. edgeConnect also allows you to add Notes at run-time! The following steps show you how to add a Note to the Error Management solution at run-time. 1.

Select Process Editor.

2.

Right-click Error Management Process » Run with » Notes.

Figure 184 Test Me Phase and Notes run-time user interface.

183

Dr Kevin M Potter Strategy-Dev

FEAtures Process

3.

Expand Error Management Process.

4.

Select Error Management Process.

5.

Select Note Type. Specification

6.

Click New Note Button.

7.

Enter Note Text. Error Management Phases are required for all other FEAtures solutions.

Figure 185 Add a Note at run-time.

184

Dr Kevin M Potter Strategy-Dev

FEAtures Process

8.

Click Save Changes Button.

Figure 186 Save a Note at run-time.

The Note is displayed in the Process tree structure. 9.

Close browser.

185

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Note is displayed in Process Editor.

Figure 187 Specification Note.

10.

Select File menu » Save.

186

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Show and Hide Notes Step-By-Step Sometimes you may want to view your solution in an Editor Window without the additional clutter of Notes. The following steps show you how to selectively show and hide Notes. 1.

Select Process Editor.

2.

Expand Error Management Process.

3.

Expand Test Me Phase.

4.

Expand General Error Phase.

5.

Expand Timeout Error Phase.

6.

Expand Access Violation Error Phase.

7.

Click Toolbar Notes Icon.

8.

Unmark FEAtures Info.

Figure 188 Toolbar » Notes Icon.

187

Dr Kevin M Potter Strategy-Dev

FEAtures Process

FEAtures Info Notes are no longer shown in Process Editor.

Figure 189 FEAtures Info Notes are no longer shown.

9.

Click Toolbar Notes Icon.

10.

Mark FEAtures Info.

Figure 190 Toolbar » Notes Icon.

188

Dr Kevin M Potter Strategy-Dev

FEAtures Process

FEAtures Info Notes are shown in Process Editor.

Figure 191 FEAtures Info Notes are shown.

189

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 10 » Review Notes using Utility Editor Step-By-Step Sometimes you may want to view your Notes in the Utility Editor Window without the additional clutter of your solution. The following steps show you how to review your Notes using Utility Editor. 1.

Select Project Menu » Notes » Review.

To review ALL Notes… 2.

Select Notes to review. All

3.

Select Statuses to include. All

4.

Click Search button.

Figure 192 Utility Editor » Notes tab.

190

Dr Kevin M Potter Strategy-Dev

FEAtures Process

To review Specific Notes… 5.

Select Notes to review. Specification

6.

Click Search button.

Figure 193 Utility Editor » Notes tab.

7.

Close Utility Editor.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

191

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Hybrid Error Management Process What you need to know The Exercises in this Chapter show you how to build a Process that has three Hybrid App specific “error managing” web pages (or Phases). 

Offline Error: An Offline Error Phase is displayed when your Hybrid App cannot “talk” to your Web Server most usually because your Device has no signal.



SSL Error: A Secure Sockets Layer (SSL) Error Phase is displayed when your Web Server SSL certificate is not valid.



Jailbreak Error: A Jailbreak Error Phase is displayed when you try to run your Hybrid App on a jail broken Device.

Each Hybrid Error Management Phase is an Offline Phase; this means that each Phase will be packaged (or stored) within the Hybrid App that you are going to create when you build the Home Page solution.

Figure 194 Sketch a Design » Hybrid Error Management Process.

192

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface Each Hybrid Error Management web page (or Phase) contains two Headings that together convey a user friendly error message. Each web page (or Phase) also contains a Button; the Buttons will allow you to navigate back to the FEAtures Home Page solution when an error occurs. (Of course you still need to build the FEAtures Home Page solution ).

Figure 195 Example Hybrid Error Management web page.

Information SSL (Secure Sockets Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all data passed between the web server and browsers remain private and integral. Solutions that are secured with SSL display a padlock in the browser URL and possibly a green address bar if secured by an Extended Validation (EV) SSL certificate.

Information Jailbreaking is the process of removing hardware restrictions imposed by iOS (and other Unix based operating systems) on Devices running it through the use of software exploits. Jailbreaking permits root access to the file system and manager, allowing the download of additional applications, extensions, and themes that are unavailable through official App Stores. For example: Apple checks apps for compliance with its iOS Developer Program License Agreement before accepting them for distribution in the App Store. To access banned apps, users rely on jailbreaking to circumvent Apple's censorship of content and features. Jailbreaking permits the downloading of programs not approved by Apple such as customization apps used to change the user Interface.

193

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Process Step-By-Step The following steps show you how to use Developer’s Process Editor to add a new Hybrid Error Management Process. 1.

Start Developer.

2.

Select Window menu » Process Editor.

3.

Right-click Processes root node » Add Process.

4.

Enter Process Name. Hybrid Error Management

Figure 196 Add Process dialog.

5.

Click OK.

194

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Hybrid Error Management Process is added to the Process Editor tree-structure.

Figure 197 Process Editor » Hybrid Error Management Process.

6.

Select File menu » Save.

195

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Add a Phase to a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Phase to the Hybrid Error Management Process. 1.

Select Process Editor.

2.

Right-click Hybrid Error Management Process » Add » Phase.

3.

Enter Phase Name. Offline Error

Figure 198 Add Phase dialog » Properties tab.

196

Dr Kevin M Potter Strategy-Dev

FEAtures Process

4.

Select Options tab.

5.

Mark Offline Phase.

Figure 199 Add Phase dialog » Options tab.

6.

Click OK.

197

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Offline Phase is added to the Hybrid Error Management Process tree-structure.

Figure 200 Hybrid Error Management Process » Offline Phase.

7.

Select File menu » Save. Test

Look and Feel Test A Phase is just a web page. Preview allows you to see what the Phase (or web page) looks like at run-time.  1.

Right-click Offline Error Phase » Preview.

2.

Close browser.

Figure 201 Preview Offline Error Phase.

OK not very impressive yet, it’s an empty web page ready for us to start adding items to. 

198

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Phases to the Hybrid Error Management Process.

Phase Process Name

Phase Name

Offline Phase

Hybrid Error Management

SSL Error

Yes

Hybrid Error Management

Jailbreak Error

Yes

Table 4 Phase.

The Hybrid Error Management Process now has three Phases.

Figure 202 Hybrid Error Management Process Phases.

199

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Add a Heading to a Phase Step-By-Step The following steps show you how to add a new Heading to a Phase. 1.

Select Process Editor.

2.

Expand Hybrid Error Management Process.

3.

Right-click Offline Error Phase » Add » Heading.

4.

Enter Display Text. OOPs

5.

Select Heading Level. Level 1

Figure 203 Add Heading dialog » Heading tab.

6.

Click OK.

200

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Heading is added to the Offline Error Phase.

Figure 204 OOPs Heading in Offline Error Phase.

7.

Select File menu » Save. Test

Look and Feel Test Let’s see what the Heading is going to look like at run-time.  1.

Right-click Offline Error Phase » Preview.

2.

Close browser.

Figure 205 Preview Offline Error Phase.

201

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Headings to Phases that belong to the Hybrid Error Management Process. Productivity The following Heading table contains two identical “OOPs” Headings. Whenever you see a pattern Tip like this you can save time by using copy and paste. You can right-click on a source Item and select Copy or select a source Item and press + C. You can right-click on a target Item and select Paste or select a target Item and press + V.

Heading Phase Name

Display Text

Offline Error

Really sorry but you’ve lost your signal. Please try again…

Level 2

SSL Error

OOPs

Level 1

SSL Error

Really sorry but the web server certificate is not valid. Please try again…

Level 2

Jailbreak Error

OOPs

Level 1

Jailbreak Error

Really sorry but your Device is jailbroken. You are not allowed to run this app…

Level 2

Table 5 Heading.

202

Dr Kevin M Potter Strategy-Dev

Heading Level

FEAtures Process

The Hybrid Error Management Process Phases now have Headings. 

Figure 206 Hybrid Error Management Process Headings.

203

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Headings are correctly displayed. 

Offline Error.



SSL Error.



Jailbreak Error.

Figure 207 Offline Error Phase.

Figure 208 SSL Error Phase.

Figure 209 Jailbreak Error Phase.

204

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Add an Action Button to a Phase Step-By-Step The following steps show you how to add a new Action Button to the Offline Error Phase. 1.

Select Process Editor.

2.

Expand Hybrid Error Management Process.

3.

Right-click Offline Error Phase » Add » Button.

4.

Select Button Type. Action

5.

Enter Action Command. (This is just the caption that is displayed on the Button). Try Again

Figure 210 Add Button dialog.

6.

Click OK.

205

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Action Button is added to the Offline Error Phase.

Figure 211 Try Again Action Button in Offline Error Phase.

7.

Select File menu » Save. Test

Look and Feel Test Let’s see what the Button is going to look like at run-time.  1.

Right-click Offline Error Phase » Preview.

2.

Close browser.

Figure 212 Preview Offline Error Phase.

206

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Action Buttons to Phases that belong to the Hybrid Error Management Process. Productivity The following Button table contains two identical “Try Again” Action Buttons. Whenever you see a Tip pattern like this you can save time by using copy and paste. You can right-click on a source Item and select Copy or select a source Item and press + C. You can right-click on a target Item and select Paste or select a target Item and press + V.

Button Phase

Button Type

Action Command

SSL Error

Action

Try Again

Jailbreak Error

Action

Try Again

Table 6 Button.

207

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Hybrid Error Management Process Phases now have Action Buttons. 

Figure 213 Hybrid Error Management Process Action Buttons.

208

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Action Buttons are correctly displayed. 

SSL Error.



Jailbreak Error.

Figure 214 SSL Error Phase.

Figure 215 Jailbreak Error Phase.

209

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Add Notes Step-By-Step The following steps show you how to add Notes to annotate your solution for others. Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 1.

Select Process Editor.

2.

Right-click Hybrid Error Management Process » Add » Note.

3.

Select Note Type. Specification

4.

Enter Note Text. Hybrid Error Management Phases are required for Hybrid App solutions.

Figure 216 Add Note Properties dialog » Detail tab.

5.

Click OK.

210

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Specification Note is added to the Hybrid Error Management Process.

Figure 217 Specification Note.

6.

Select File menu » Save.

211

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Notes to Phases that belong to the Hybrid Error Management Process.

Note Phase Name

Note Type

Note Text

Offline Error

FEAtures Info

An offline error occurs when your Hybrid App cannot “talk” to your edgeConnect Web Server.

SSL Error

FEAtures Info

A SSL error occurs when your edgeConnect Web Server SSL certificate is not valid.

Jailbreak Error

FEAtures Info

A Jailbreak Error occurs when your Hybrid App is forbidden from running on a Jail-Broken Device.

Table 7 Note.

212

Dr Kevin M Potter Strategy-Dev

FEAtures Process

You have now added FEAtures Info Notes to annotate your solution.

Figure 218 Hybrid Error Management Process FEAtures Info Notes.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

213

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Header and Footer Process What you need to know The Exercises in this Chapter show you how to build a header for a Process as a collection of Pre Phase Items and how to build a footer for a Process as a collection of Post Phase Items. 

Pre Phase Item: A Pre Phase Item is displayed on all Process Phases before Phase Items are rendered.



Post Phase Item: A Post Phase Item is displayed on all Process Phases after Phase Items are rendered.

The Header has the following Items. 

Heading: A Heading will be used to display the name of the Phase (or web page) that is rendered immediately after the header is rendered. We’ll do this with something really cool named a System Word; …well the name might not be cool but what it does is .



Buttons: An “English” and a “French” Action Button will enable web page localisation. In this solution the Buttons are just for show; localisation is properly covered as part of the Home Page solution.



Menu: A Menu will enable access to all FEAtures solutions. In this solution the Menu is just for show; it will become more and more functional as you implement more and more solutions .

The Footer has the following items. 

Button: A “Home Page” Action Button will enable any-time navigation back to the FEAtures Home Page. In this solution the Button is just for show; it will become functional when you implement the Home Page solution .

214

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 219 Sketch a Design » Header and Footer Process.

Once you have implemented the Header and Footer Process you will be able to Copy-Link the Header and Footer to all other Processes that you build. 

Link: edgeConnect provides a Link option in addition to Cut, Copy and Paste. This time-saving feature allows you to create Items and replicate them in many places in your solution. To make changes to all copies of an Item, you only need to edit the original. Productivity Linking is very useful when you want to reuse an item in several different places. Change the Tip original; the change is automatically reflected across all linked items.

215

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface The Header and Footer are built using Pre and Post Phase Items.

Figure 220 Header and Footer at run-time.

216

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Process. 1.

Start Developer.

2.

Select Window menu » Process Editor.

3.

Right-click Processes root node » Add Process.

4.

Enter Process Name. Header and Footer

Figure 221 Add Process dialog » Process tab.

5.

Click OK.

217

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Header and Footer Process is added to the Process Editor tree-structure.

Figure 222 Process Editor » Header and Footer Process.

6.

Select File menu » Save.

218

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Add a Phase to a Process Step-By-Step The following steps show you how to add a new Test Me Phase to the Header and Footer Process. You are simply adding this Phase so that you can test the look-and-feel of the required Header and Footer Pre and Post Phase Items. 1.

Select Process Editor.

2.

Right-click Header and Footer Process » Add » Phase.

3.

Enter Phase Name. Test Me

Figure 223 Add Phase dialog » Properties tab.

4.

Click OK.

219

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Test Me Phase is added to the Header and Footer Process tree-structure.

Figure 224 Header and Footer Process » Test Me Phase.

5.

Select File menu » Save. Test

Look and Feel Test A Phase is just a web page. Preview allows you to see what the Phase (or web page) looks like at run-time.  1.

Right-click Test Me Phase » Preview.

2.

Close browser.

Figure 225 Preview Test Me Phase.

OK not very impressive yet, it’s an empty web page ready for us to start adding items to. 

220

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Set Process Properties Step-By-Step The following steps show you how to edit Header and Footer Process Properties so that it knows what the Initial Phase is and can make use of Error Management Process Phases when an error occurs. 1.

Select Process Editor.

2.

Right-click Header and Footer Process » Properties.

3.

Select Start tab.

4.

Click Initial Phase Select button.

Figure 226 Process Properties dialog » Start tab.

221

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 5.

Expand Header and Footer Process.

6.

Select Phase. Test Me

Figure 227 Phase Chooser dialog.

7.

Click OK to close the Phase Chooser dialog.

222

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 8.

Confirm that the Initial Phase is correctly set. Header and Footer.Test Me

Figure 228 Process Properties dialog » Start tab.

223

Dr Kevin M Potter Strategy-Dev

FEAtures Process

9.

Click Error Phase Select button.

Figure 229 Process Properties dialog » Start tab.

224

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 10.

Expand Error Management Process.

11.

Select Phase. General Error

Figure 230 Phase Chooser dialog.

12.

Click OK to close the Phase Chooser dialog.

225

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 13.

Confirm that the Error Phase is correctly set. Error Management.General Error

Figure 231 Process Properties dialog » Start tab.

226

Dr Kevin M Potter Strategy-Dev

FEAtures Process

14.

Select Options tab.

15.

Click Session Timeout Phase Select button.

Figure 232 Process Properties dialog » Options tab.

227

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 16.

Expand Error Management Process.

17.

Select Phase. Timeout Error

Figure 233 Phase Chooser dialog.

18.

Click OK to close the Phase Chooser dialog.

228

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 19.

Confirm that the Session Timeout Phase is correctly set. Error Management.Timeout Error

Figure 234 Process Properties dialog » Options tab.

229

Dr Kevin M Potter Strategy-Dev

FEAtures Process

20.

Select Security tab.

21.

Click Access Violation Phase Select button.

Figure 235 Process Properties dialog » Security tab.

230

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 22.

Expand Error Management Process.

23.

Select Access Violation Error Phase. Access Violation Error

Figure 236 Phase Chooser dialog.

24.

Click OK to close the Phase Chooser dialog.

231

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 25.

Confirm that the Access Violation Phase is correctly set. Error Management.Access Violation Error

Figure 237 Process Properties dialog » Security tab.

26.

Click OK.

27.

Select File menu » Save.

232

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Add an Item Group to a Process as a Pre Phase Item Step-By-Step The following steps show you how to add a new Item Group to a Process as a Pre Phase Item. We are adding an Item Group so that we can (for lack of a better word) group all Header Items together. This will make it easy for us to Copy-Paste or Copy-Link the Header in later solutions. Best Practice



It is Best Practice to use Item Groups to (for lack of a better word) group other Process Items together. This will make it easy for you to Copy-Paste or Copy-Link related Items, makes it easier to navigate in the Process Editor tree structure and is also simply good housekeeping. 

1.

Select Process Editor.

2.

Right-click Header and Footer Process » Add » Pre Phase Item » Item Group.

3.

Enter Item Group Name. Header

Figure 238 Add Item Group dialog.

4.

Click OK.

233

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Header Item Group is added to the Header and Footer Process as a Pre Phase Item.

Figure 239 Item Group as a Pre Phase Item.

5.

Select File menu » Save.

234

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Add an Action Button to an Item Group Step-By-Step The following steps show you how to use the Process Editor to add an Action Button to an Item Group. 1.

Select Process Editor.

2.

Expand Header and Footer Process.

3.

Right-click Header Item Group » Add » Button.

4.

Select Button Type. Action

5.

Enter Action Command. (This is just the caption that is displayed on the Button). English

Figure 240 Add Button dialog.

6.

Click OK.

235

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Action Button is added to the Header Item Group.

Figure 241 English Action Button in Header Item Group.

7.

Select File menu » Save. Test

Look and Feel Test Let’s see what the Button is going to look like at run-time.  1.

Right-click Header and Footer Process » Run.

2.

Close browser.

Figure 242 Run Header and Footer Process.

236

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add an Action Button to the Header Item Group that belongs to the Header and Footer Process.

Button Item Group

Button Type

Action Command

Header

Action

French

Table 8 Button.

The Header Item Group now has two Action Buttons. 

Figure 243 Header Item Group Action Buttons.

237

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Run the Header and Footer Process and confirm that all Action Buttons are correctly displayed.

Figure 244 Run Header and Footer Process.

238

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 6 » Add a Heading with a System Word to an Item Group Step-By-Step The following steps show you how to use the Process Editor to add a new Heading to an Item Group. The Heading will use the PHASE System Word; this displays the name of the Phase (or web page) that is rendered immediately after the Header is rendered.

Figure 245 Heading with a System Word.

239

Dr Kevin M Potter Strategy-Dev

FEAtures Process

1.

Select Process Editor.

2.

Expand Header and Footer Process.

3.

Right-click Header Item Group » Add » Heading.

4.

Click Display Text ellipsis […] button.

Figure 246 Add Heading dialog » Heading tab.

240

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Text Editor is displayed. 5.

Click Text Editor ellipsis […] button.

Figure 247 Text Editor.

241

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Value Chooser dialog is displayed. We need to find the PHASE System Word. 6.

Expand System Words node.

7.

Expand Session Node.

8.

Select System Word. PHASE

Figure 248 Value Chooser dialog.

9.

Click OK to close the Value Chooser dialog.

242

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Text Editor is displayed. Note that the PHASE System Word is now enclosed in $$...$. This is just edgeConnect syntax. 

Figure 249 Text Editor.

10.

Click OK to close the Text Editor.

243

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Add Heading dialog is displayed. 11.

Confirm that the Display Text property is correctly set. $$PHASE$

12.

Select Heading Level. Level 3

Figure 250 Add Heading dialog » Heading tab.

13.

Click OK.

244

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Heading is added to the Header Item Group.

Figure 251 Heading in Header Item Group.

14.

Select File menu » Save. Test

Look and Feel Test Let’s see what the Heading is going to look like at run-time.  1.

Right-click Header and Footer Process » Run.

2.

Confirm that the Heading (with the $$PHASE$ System Word) displays the name of the current Phase. Test Me

3.

Close browser.

Figure 252 Run Header and Footer Process.

245

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 7 » Add a Menu to an Item Group Step-By-Step The following steps show you how to add a new Menu to an Item Group. 1.

Select Process Editor.

2.

Expand Header and Footer Process.

3.

Right-click Header Item Group » Add » Menu.

4.

Enter Name. FEAtures Menu

Figure 253 Add Menu dialog » Details tab..

5.

Click OK.

246

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The FEAtures Menu is added to the Header Item Group.

Figure 254 FEAtures Menu in Header Item Group.

6.

Select File menu » Save.

247

Dr Kevin M Potter Strategy-Dev

FEAtures Process

7.

Right-click FEAtures Menu » Add Menu Item.

8.

Enter Display Text. Solutions

Figure 255 Add Menu Item dialog » Menu Item tab.

9.

Click OK.

248

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Solutions Menu Item is added to the FEAtures Menu.

Figure 256 Solution Menu Item added to FEAtures Menu in Header Item Group.

10.

Select File menu » Save. Test

Look and Feel Test Let’s see what the Menu is going to look like at run-time.  1.

Right-click Header and Footer Process » Run.

2.

Close browser.

Figure 257 Run Header and Footer Process.

249

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Menu Items to the FEAtures Menu. Information You can add Menu Items to Menu Items (as well as to a Menu). This allows you to create an arbitrarily rich hierarchical menu structure. 

Information Items shown in green in the following table already exist. These have been included to help you to put Menu Items in the right place within the Menu. 

Menu Item Menu Name

Display Text

FEAtures Menu

Solutions 

Device



Application Form



Login



Table



Chart

Options 

Switch to Theme



Switch to Sub Theme

Table 9 Menu Item.

250

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Header and Footer Process FEAtures Menu should now have the following structure. 

Figure 258 Header and Footer Process FEAtures Menu.

251

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s see what the Menu is going to look like at run-time.  1.

Right-click Header and Footer Process » Run.

2.

Confirm that the Solutions and Options Menu Items are displayed.

3.

Confirm that the Solutions and Options Menu items are highlighted and expand to show (sub) Menu Items when you move the mouse cursor over each Menu Item.

4.

Confirm that the Solutions and Options (sub) Menu Items are highlighted when you move the mouse cursor over each Menu Item.

5.

Close browser.

Figure 259 Run Header and Footer Process.

252

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 8 » Add an Item Group to a Process as a Post Phase Item Step-By-Step The following steps show you how to add a new Item Group to a Process as a Post Phase Item. We are adding an Item Group so that we can (for lack of a better word) group all Footer Items together. This will make it easy for us to copy-paste or copy-link the Footer in later solutions. Best Practice



It is Best Practice to use Item Groups to (for lack of a better word) group other Process Items together. This will make it easy for you to copy-paste or copy-link related Items, makes it easier to navigate in the Process Editor tree structure and is also simply good housekeeping. 

1.

Select Process Editor.

2.

Right-click Header and Footer Process.

3.

Select Add » Post Phase Item » Item Group.

4.

Enter Item Group Name. Footer

Figure 260 Add Item Group dialog.

5.

Click OK.

253

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Footer Item Group is added to the Header and Footer Process as a Post Phase Item.

Figure 261 Item Group as a Post Phase Item.

6.

Select File menu » Save.

254

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Add an Action Button to an Item Group Step-By-Step The following steps show you how to use the Process Editor to add an Action Button to an Item Group. 1.

Select Process Editor.

2.

Expand Header and Footer Process.

3.

Right-click Footer Item Group » Add » Button.

4.

Select Button Type. Action

5.

Enter Action Command. (This is just the caption that is displayed on the Button). Home Page

Figure 262 Add Button dialog.

6.

Click OK.

255

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Action Button is added to the Footer Item Group.

Figure 263 Home Page Action Button in Footer Item Group.

7.

Select File menu » Save. Test

Look and Feel Test Let’s see what the Button is going to look like at run-time.  1.

Right-click Header and Footer Process » Run.

2.

Close browser.

Figure 264 Run Header and Footer Process.

256

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 10 » Add Notes Step-By-Step The following steps show you how to add Notes to annotate your solution for others. Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 1.

Select Process Editor.

2.

Right-click Header and Footer Process » Add » Note.

3.

Select Note Type. Specification

4.

Enter Note Text. Header and Footer Pre and Post Phase Item Groups are required for other FEAtures solutions.

Figure 265 Add Note Properties dialog » Detail tab.

5.

Click OK.

257

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Note is added to the Header and Footer Process.

Figure 266 Note.

6.

Select File menu » Save.

258

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Notes to Item Groups that belong to the Header and Footer Process.

Note Item Group Name

Note Type

Note Text

Header

FEAtures Info

Header Pre Phase Item Group.

Footer

FEAtures Info

Footer Post Phase Item Group.

Table 10 Note.

259

Dr Kevin M Potter Strategy-Dev

FEAtures Process

You have now added FEAtures Info Notes to annotate your solution.

Figure 267 Header and Footer Process Notes.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

260

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Home Page Process What you need to know The Exercises in this Chapter show you how to build the FEAtures Home Page Solution; the solution will advertise and provide access to all other FEAtures solutions that you build. Each advertised FEAtures solution has the following items. 

Heading: A Heading will be used to display the name of the FEAtures solution.



Image: An Image Display Item will be used to provide a visual description of the FEAtures solution. I’m jumping ahead a little as we’ll add this when you get to the “Home Page Presentation” Chapter. .



Text: A Text Display Item will be used to provide a textual description of the FEAtures solution. I’m jumping ahead a little (again) as we’ll add this when you get to the “Home Page Presentation” Chapter. .



Button: An Action Button will enable any-time navigation to a FEAtures Solution. In this solution the Buttons are just for show; they will become more and more functional as you implement more and more solutions .



Header and Footer: You are going to Copy-Link the Header and Footer solution to the Home Page solution. You are also going to enable the Header and Footer Solution “Home Page” Action Button by adding a Goto Phase Rule that will enable the user to navigate to the Home Page solution.



Hybrid Error Management Solution: You are going to enable the Hybrid Error Management Solution “Try Again” Action Buttons by adding Goto Phase Rules that will always attempt to navigate the user back to the Home Page solution.

261

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 268 Sketch a Design » Home Page Process.

262

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface The Exercises in this Chapter show you how to build the FEAtures Home Page Solution; the solution will advertise and provide access to all other FEAtures solutions that you build.

Figure 269 Home Page at run-time.

263

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Process. 1.

Start Developer.

2.

Select Window menu » Process Editor.

3.

Right-click Processes root node » Add Process.

4.

Enter Process Name. Home Page

Figure 270 Add Process dialog » Process tab.

5.

Click OK.

264

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Home Page Process is added to the Process Editor tree-structure.

Figure 271 Process Editor » Home Page Process at bottom of Process Editor tree structure.

6.

Move the Home Page Process above all other Processes in Process Editor by dragging the Process onto the Error Management Process.

Figure 272 Process Editor » Home Page Process at top of Process Editor tree structure.

7.

Select File menu » Save.

265

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Add a Phase to a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Phase to a Process. 1.

Select Process Editor.

2.

Right-click Home Page Process » Add » Phase.

3.

Enter Phase Name. Home Page

Figure 273 Add Phase dialog.

4.

Click OK.

266

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Home Page Phase is added to the Home Page Process tree-structure.

Figure 274 Home Page Process » Home Page Phase.

5.

Select File menu » Save. Test

Look and Feel Test A Phase is just a web page. Preview allows you to see what the Phase (or web page) looks like at run-time.  1.

Right-click Home Page Phase » Preview.

2.

Close browser.

Figure 275 Preview Home Page Phase.

OK not very impressive yet, it’s an empty web page ready for us to start adding items to. 

267

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Set Process Properties Step-By-Step The following steps show you how to edit Home Page Process Properties so that it knows what the Initial Phase is and can make use of Error Management Phases when an error occurs. 1.

Select Process Editor.

2.

Right-click Home Page Process » Properties.

3.

Select Start tab.

4.

Click Initial Phase Select button.

Figure 276 Process Properties dialog » Start tab.

268

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 5.

Expand Home Page Process.

6.

Select Phase. Home Page

Figure 277 Phase Chooser dialog.

7.

Click OK to close the Phase Chooser dialog.

269

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 8.

Confirm that the Initial Phase is correctly set. Home Page.Home Page

Figure 278 Process Properties dialog » Start tab.

270

Dr Kevin M Potter Strategy-Dev

FEAtures Process

9.

Click Error Phase Select button.

Figure 279 Process Properties dialog » Start tab.

271

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 10.

Expand Error Management Process.

11.

Select Phase. General Error

Figure 280 Phase Chooser dialog.

12.

Click OK to close the Phase Chooser dialog.

272

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 13.

Confirm that the Error Phase is correctly set. Error Management.General Error

Figure 281 Process Properties dialog » Start tab.

273

Dr Kevin M Potter Strategy-Dev

FEAtures Process

14.

Select Options tab.

15.

Click Session Timeout Phase Select button.

Figure 282 Process Properties dialog » Options tab.

274

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 16.

Expand Error Management Process.

17.

Select Timeout Error Phase. Timeout Error

Figure 283 Phase Chooser dialog.

18.

Click OK to close the Phase Chooser dialog.

275

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 19.

Confirm that the Session Timeout Phase is correctly set. Error Management.Timeout Error

Figure 284 Process Properties dialog » Options tab.

276

Dr Kevin M Potter Strategy-Dev

FEAtures Process

20.

Select Security tab.

21.

Click Access Violation Phase Select button.

Figure 285 Process Properties dialog » Security tab.

277

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 22.

Expand Error Management Process.

23.

Select Phase. Access Violation Error

Figure 286 Phase Chooser dialog.

24.

Click OK to close the Phase Chooser dialog.

278

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 25.

Confirm that the Access Violation Phase is correctly set. Error Management.Access Violation Error

Figure 287 Process Properties dialog » Security tab.

26.

Click OK.

27.

Select File menu » Save.

279

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Add a Heading to a Phase Step-By-Step The following steps show you how to add a new Heading to a Phase. 1.

Select Process Editor.

2.

Expand Home Page Process.

3.

Right-click Home Page Phase » Add » Heading.

4.

Enter Display Text. Device

5.

Select Heading Level. Level 1

Figure 288 Add Heading dialog » Heading tab.

6.

Click OK.

280

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Device Heading is added to the Home Page Phase.

Figure 289 Device Heading added to Home Page Phase.

7.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the Home Page Phase to see what the Heading looks like at run-time.  1.

Right-click Home Page Phase » Preview.

2.

Close browser.

Figure 290 Preview Home Page Phase.

281

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Headings to the Home Page Phase.

Heading Phase Name

Display Text

Home Page

Application Form

Level 1

Home Page

Login

Level 1

Home Page

Table

Level 1

Home Page

Chart

Level 1

Table 11 Heading.

The Home Page Phase now has Headings. 

Figure 291 Home Page Phase Headings.

282

Dr Kevin M Potter Strategy-Dev

Heading Level

FEAtures Process

Test

Look and Feel Test Preview the Home Page Phase and confirm that all Headings are correctly displayed.

Figure 292 Home Page Phase.

283

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Add an Action Button to a Phase Step-By-Step The following steps show you how to add a new Action Button to the Home Page Phase. 1.

Select Process Editor.

2.

Expand Home Page Process.

3.

Right-click Home Page Phase » Add » Button.

4.

Select Button Type. Action

5.

Enter Action Command. (This is just the caption that is displayed on the Button). Find Out More

Figure 293 Add Button dialog.

6.

Click OK.

284

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Action Button is added to the Home Page Phase.

Figure 294 Find Out More Action Button as last item in Home Page Phase.

7.

Move the Find Out More Action Button immediately below the Device Heading by dragging and dropping the Button onto the Application Form Heading.

Figure 295 Find Out More Action Button immediately below Device Heading in Home Page Phase.

8.

Select File menu » Save.

285

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Home Page Phase to see what the Button looks like at run-time.  1.

Right-click Home Page Phase » Preview.

2.

Close browser.

Figure 296 Preview Home Page Phase.

286

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Action Buttons to the Home Page Phase. Productivity The following Button table contains three identical “Find Out More” Action Buttons. Whenever you Tip see a pattern like this you can save time by using copy and paste. You can right-click on a source Item and select Copy or select a source Item and press + C. You can right-click on a target Item and select Paste or select a target Item and press + V.

Button Phase

Button Type

Action Command

Immediately Below Heading

Home Page

Action

Find Out More

Application Form

Home Page

Action

Find Out More

Login

Home Page

Action

Find Out More

Table

Home Page

Action

Find Out More

Chart

Table 12 Button.

287

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Home Page Phase now has Action Buttons. 

Figure 297 Home Page Phase Action Buttons.

288

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the Home Page Phase and confirm that all Action Buttons are correctly displayed.

Figure 298 Home Page Phase.

289

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 6 » Link Header and Footer to a Process Step-By-Step The following steps show you how to Link the Header and Footer (Item Groups) that you previously built to the Home Page Process.

Figure 299 Link Header and Footer to Home Page Process.

Productivity Linking is very useful when you want to reuse an item in several different places. Change the Tip original; the change is automatically reflected across all linked items.

290

Dr Kevin M Potter Strategy-Dev

FEAtures Process

1.

Select Process Editor.

2.

Expand the Header and Footer Process.

3.

Right-click Header Item Group » Copy.

Figure 300 Copy Header Item Group.

4.

Right-click Home Page Process » Link » As Pre Phase Item.

Figure 301 Link Header Item Group.

291

Dr Kevin M Potter Strategy-Dev

FEAtures Process

5.

Select Header and Footer Process.

6.

Right-click Footer Item Group » Copy.

Figure 302 Copy Footer Item Group.

7.

Right-click Home Page Process » Link » As Post Phase Item.

Figure 303 Link Footer Item Group.

8.

Select File menu » Save.

292

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Run the Home Page Process to see what the Header and Footer look like at run-time.  1.

Right-click Home Page Process » Run.

2.

Confirm that the Header and Footer Item Groups are displayed.

3.

Close browser.

Figure 304 Run Home Page Process.

293

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 7 » Highlight Items with Links Step-By-Step edgeConnect enables you to highlight original Items that have been used to create Linked Items. This allows you to identify Link dependencies at a glance.  The following steps show you how to highlight Items with Links using the Options Properties dialog. 1.

Select Tools menu » Options.

2.

Select Look and Feel tab.

3.

Mark Highlight Items with Links.

Figure 305 Options Properties dialog » Look and Feel tab.

4.

Click OK.

294

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Let’s see if the original Header and Footer Item Groups have been highlighted.  5.

Expand Header and Footer Process.

Figure 306 Highlight Items with Links.

Great, you now have a simple way to visually identify original Items that have been used to create Linked Items. 

295

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 8 » Add a Goto Phase Rule to the Home Page Button Step-By-Step The Header and Footer solution has an Item Group named Footer and the Item Group has an Action Button named Home Page. The following steps show you how to add a Goto Phase Rule to the Home Page Action Button that enables navigation to the Home Page Phase on click.

Figure 307 Home Page Action Button and Goto Phase Rule.

296

Dr Kevin M Potter Strategy-Dev

FEAtures Process

1.

Select Process Editor.

2.

Expand Header and Footer Process.

3.

Expand Footer Item Group.

4.

Right-click Home Page Action Button » Add » Button Rule » Goto Phase Rule.

5.

Enter Rule Name. Goto Phase Home Page

6.

Click the Phase Name Select button.

Figure 308 Add Goto Phase Rule dialog » Phase Details tab.

297

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 7.

Expand Home Page Process.

8.

Select Phase. Home Page

Figure 309 Phase Chooser dialog.

9.

Click OK to close the Phase Chooser dialog.

298

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 10.

Confirm that the Phase Name is correctly set. Home Page.Home Page

Figure 310 Add Goto Phase Rule dialog » Phase Details tab.

11.

Click OK.

299

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Home Page Action Button.

Figure 311 Action Button with a Goto Phase Rule.

12.

Select File menu » Save.

300

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Display Rule Names Step-By-Step When you created the Goto Phase Rule in the previous Exercise it was named in Process Editor as a concatenation of Goto Phase Rule type and target Phase.

Figure 312 Rule with default naming convention.

This is a bit long winded and unnecessary if you adopt a proper naming convention (as you would in any Software Engineering venture! ) as edgeConnect allows you to display your Rules by Rule Name instead.

Figure 313 Rule with Rule Name naming convention.

301

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Best Practice

It is Best Practice to use meaningful Customer and/or Project Specific Rule names that indicate Rule type and purpose.

 The following steps show you how to tell Developer to display Rule Names in Process Editor (and Rule Editor). 1.

Select Tools menu » Options.

2.

Select Look and Feel tab.

3.

Mark Display Rule Names.

Figure 314 Options Properties dialog » Look and Feel tab.

4.

Click OK.

302

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule that you added in the previous exercise is now shown in Process Editor by Rule Name.

Figure 315 Rule with Rule Name naming convention.

303

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 10 » Add Goto Phase Rules to the Hybrid Error Management Buttons Step-By-Step The Hybrid Error Management solution has Action Buttons named Try Again. The following steps show you how to add a Goto Phase Rule to each Try Again Action Button to enable navigation to the Home Page Phase on click. 1.

Select Process Editor.

2.

Expand the Hybrid Error Management Process.

3.

Expand the Offline Error Phase.

4.

Right-click Try Again Button » Add » Button Rule » Goto Phase Rule.

5.

Enter Rule Name. Goto Phase Home Page

6.

Click Phase Name Select button.

Figure 316 Add Goto Phase Rule dialog » Phase Details tab.

304

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 7.

Expand Home Page Process.

8.

Select Phase. Home Page

Figure 317 Phase Chooser dialog.

9.

Click OK to close the Phase Chooser dialog.

305

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 10.

Confirm that the Phase Name is correctly set. Home Page.Home Page

Figure 318 Add Goto Phase Rule dialog » Phase Details tab.

11.

Click OK.

306

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Try Again Action Button.

Figure 319 Action Button with a Goto Phase Rule.

12.

Select File menu » Save.

307

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add Goto Phase Rules to Action Buttons that belong to the Hybrid Error Management Process. Productivity The following Goto Phase Rule table contains two identical Goto Phase Rules. Whenever you see a Tip pattern like this you can save time by using copy and paste. You can right-click on a source Item and select Copy or select a source Item and press + C. You can right-click on a target Item and select Paste or select a target Item and press + V.

Goto Phase Rule Phase Name

Button Name

Rule Name

(Target) Phase Name

SSL Error

Try Again

Goto Phase Home Page

Home Page

Jailbreak Error

Try Again

Goto Phase Home Page

Home Page

Table 13 Goto Phase Rule.

308

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Hybrid Error Management Process Try Again Action Buttons now have Goto Phase Rules. 

Figure 320 Hybrid Error Management Process Action Buttons with Goto Phase Rules.

309

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 11 » Add Notes Step-By-Step The following steps show you how to add Notes to annotate your solution for others. Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 1.

Select Process Editor.

2.

Right-click Home Page Process » Add » Note.

3.

Select Note Type. Specification

4.

Enter Note Text. The FEAtures Home Page describes and provides access to other FEAtures solutions.

Figure 321 Add Note Properties dialog » Detail tab.

5.

Click OK.

310

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Specification Note is added to the Home Page Process.

Figure 322 Note.

6.

Select File menu » Save.

311

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Notes to Phases that belong to the Home Page Process.

Note Phase Name

Note Type

Home Page

FEAtures Info Add a Level 1 Heading and a Find Out More Button to describe each new FEAtures solution.

Table 14 Note.

312

Dr Kevin M Potter Strategy-Dev

Note Text

FEAtures Process

You have now added Notes to annotate your solution.

Figure 323 Home Page Process Notes.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

313

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Device Process What you need to know The Exercises in this Chapter show you how to build the Device Process; this has a single informational Phase (or web page) that uses Headings to display DEVICE_INFO System word information at run-time. Later exercises will show you how to use this information to dynamically alter solution look-and-feel when interacting with a Device at run-time. The Device Process has the following items. 

Heading and the DEVICE_INFO System Word: Headings display all DEVICE_INFO System Word information. The information tells you about the Device that your solution is running on. 

Figure 324 Sketch a Design » Device Process.

314

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface The Exercises in this Chapter show you how to build the Device Process; this has a single informational Phase (or web page) that uses Headings to display DEVICE_INFO System word information at run-time.

Figure 325 About My Device Phase.

315

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Process. 1.

Start Developer.

2.

Select Window menu » Process Editor.

3.

Right-click Processes root node » Add Process.

4.

Enter Process Name. Device

Figure 326 Add Process dialog » Process tab.

5.

Click OK.

316

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Device Process is added to the Process Editor tree-structure.

Figure 327 Process Editor » Device Process.

6.

Select File menu » Save.

317

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Add a Phase to a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Phase to a Process. 1.

Select Process Editor.

2.

Right-click Device Process » Add » Phase.

3.

Enter Phase Name. About My Device

Figure 328 Add Phase dialog » Properties tab.

4.

Click OK.

318

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The About My Device Phase is added to the Device Process tree-structure.

Figure 329 Device Process » About My Device Phase.

5.

Select File menu » Save. Test

Look and Feel Test A Phase is just a web page. Preview allows you to see what the Phase (or web page) looks like at run-time.  1.

Right-click About My Device Phase » Preview.

2.

Close browser.

Figure 330 Preview About My Device Phase.

OK not very impressive yet, it’s an empty web page ready for us to start adding items to. 

319

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Set Process Properties Step-By-Step The following steps show you how to edit Device Process Properties so that it knows what the Initial Phase is and can make use of Error Management Phases when an error occurs. 1.

Select Process Editor.

2.

Right-click Device Process » Properties.

3.

Select Start tab.

4.

Click Initial Phase Select button.

Figure 331 Process Properties dialog » Start tab.

320

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 5.

Expand Device Process.

6.

Select Phase. About My Device

Figure 332 Phase Chooser dialog.

7.

Click OK to close the Phase Chooser dialog.

321

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 8.

Confirm that the Initial Phase is correctly set. Device.About My Device

Figure 333 Process Properties dialog » Start tab.

322

Dr Kevin M Potter Strategy-Dev

FEAtures Process

9.

Click Error Phase Select button.

Figure 334 Process Properties dialog » Start tab.

323

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 10.

Expand Error Management Process.

11.

Select Phase. General Error

Figure 335 Phase Chooser dialog.

12.

Click OK to close the Phase Chooser dialog.

324

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 13.

Confirm that the Error Phase is correctly set. Error Management.General Error

Figure 336 Process Properties dialog » Start tab.

325

Dr Kevin M Potter Strategy-Dev

FEAtures Process

14.

Select Options tab.

15.

Click Session Timeout Phase Select button.

Figure 337 Process Properties dialog » Options tab.

326

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 16.

Expand Error Management Process.

17.

Select Timeout Error Phase. Timeout Error

Figure 338 Phase Chooser dialog.

18.

Click OK to close the Phase Chooser dialog.

327

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 19.

Confirm that the Session Timeout Phase is correctly set. Error Management.Timeout Error

Figure 339 Process Properties dialog » Options tab.

328

Dr Kevin M Potter Strategy-Dev

FEAtures Process

20.

Select Security tab.

21.

Click Access Violation Phase Select button.

Figure 340 Process Properties dialog » Security tab.

329

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 22.

Expand Error Management Process.

23.

Select Phase. Access Violation Error

Figure 341 Phase Chooser dialog.

24.

Click OK to close the Phase Chooser dialog.

330

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 25.

Confirm that the Access Violation Phase is correctly set. Error Management.Access Violation Error

Figure 342 Process Properties dialog » Security tab.

26.

Click OK.

27.

Select File menu » Save.

331

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Add a Heading to a Phase Step-By-Step The following steps show you how to add a new Heading to a Phase. 1.

Select Process Editor.

2.

Expand Device Process.

3.

Right-click About My Device Phase » Add » Heading.

4.

Enter Display Text. Body Height:

5.

Click the Display Text ellipsis […] button.

Figure 343 Add Heading dialog » Heading tab.

332

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Text Editor is displayed. 6.

Click the Text Editor ellipsis […] button.

Figure 344 Text Editor.

333

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Value Chooser dialog is displayed. 7.

Expand System Words node.

8.

Expand Session Node.

9.

Expand DEVICE_INFO System Word.

10.

Select System Word Property. bodyHeight

Figure 345 Value Chooser dialog.

11.

Click OK to close the Value Chooser dialog.

334

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Text Editor is displayed.

Figure 346 Text Editor.

12.

Click OK to close the Text Editor.

335

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Add Heading dialog is displayed. 13.

Confirm that the Display Text property is correctly set. Body Height:$$DEVICE_INFO.bodyHeight$

14.

Select Heading Level. Level 2

Figure 347 Add Heading dialog » Heading tab.

15.

Click OK.

336

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Heading is added to the About My Device Phase.

Figure 348 Heading added to About My Device Phase.

16.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the About My Device Phase to see what the Heading looks like at run-time.  1.

Right-click About My Device Phase » Preview.

2.

Close browser.

Figure 349 Preview About My Device Phase.

337

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Headings to the About My Device Phase.

Heading Display Text

Heading Level

Body Width:$$DEVICE_INFO.bodyWidth$

Level 2

Body Messaging ID:$$DEVICE_INFO.bodyMessagingID$

Level 2

Cordova:$$DEVICE_INFO.cordova$

Level 2

Current Device:$$DEVICE_INFO.currentDevice$

Level 2

Document Height:$$DEVICE_INFO.documentHeight$

Level 2

Document Width:$$DEVICE_INFO.documentWidth$

Level 2

Is Hybrid:$$DEVICE_INFO.isHybrid$

Level 2

Model:$$DEVICE_INFO.model$

Level 2

Platform:$$DEVICE_INFO.platform$

Level 2

Screen Height:$$DEVICE_INFO.screenHeight$

Level 2

Screen Width:$$DEVICE_INFO.screenWidth$

Level 2

Screen Orientation:$$DEVICE_INFO.screenOrientation$

Level 2

Push Notifications:$$DEVICE_INFO.PushNotifications$

Level 2

UUID:$$DEVICE_INFO.uuid$

Level 2

Version:$$DEVICE_INFO.version$

Level 2

Window Height:$$DEVICE_INFO.windowHeight$

Level 2

Window Width:$$DEVICE_INFO.windowWidth$

Level 2

Table 15 Heading.

338

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The About My Device Phase now has Headings. 

Figure 350 About My Device Phase Headings.

339

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the About My Device Phase and confirm that all Headings are correctly displayed. Note: If you use Google Chrome you should see some real DEVICE_INFO! 

Figure 351 About My Device Phase.

340

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Link Header and Footer to a Process Step-By-Step The following steps show you how to Link the Header and Footer (Item Groups) that you previously built to the Device Process.

Figure 352 Link Header and Footer to Device Process.

Productivity Linking is very useful when you want to reuse an Item in several different places. Change the Tip original; the change is automatically reflected across all linked Items.

341

Dr Kevin M Potter Strategy-Dev

FEAtures Process

9.

Select Process Editor.

10.

Expand the Header and Footer Process.

11.

Right-click Header Item Group » Copy.

Figure 353 Copy Header Item Group.

12.

Right-click Device Process » Link » As Pre Phase Item.

Figure 354 Link Header Item Group.

342

Dr Kevin M Potter Strategy-Dev

FEAtures Process

13.

Select Header and Footer Process.

14.

Right-click Footer Item Group » Copy.

Figure 355 Copy Footer Item Group.

15.

Right-click Device Process » Link » As Post Phase Item.

Figure 356 Link Footer Item Group.

16.

Select File menu » Save.

343

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Run the Device Process to see what the Header and Footer look like at run-time.  1.

Right-click Device Process » Run.

2.

Confirm that the Header and Footer Item Groups are displayed.

3.

Close browser.

Figure 357 Run Device Process.

344

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 6 » Add Device to Home Page Step-By-Step The following steps show you how to use the Process Editor to add the Device Process to the Home Page Process assuming that you have already built the Home Page Process. 1.

Select Process Editor.

2.

Expand Header and Footer Process.

3.

Expand Header Item Group.

4.

Expand FEAtures Menu.

5.

Expand Solutions Menu Item.

6.

Right-click Device Menu Item » Add » Menu Rule » Goto Phase Rule.

7.

Enter Rule Name. Goto Phase About My Device

8.

Click the Phase Name Select button.

Figure 358 Add Goto Phase Rule dialog » Phase Details tab.

345

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 9.

Expand Device Process.

10.

Select Phase. About My Device

Figure 359 Phase Chooser dialog.

11.

Click OK to close the Phase Chooser dialog.

346

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 12.

Confirm that the Phase Name is correctly set. Device.About My Device

Figure 360 Add Goto Phase Rule dialog » Phase Details tab.

13.

Click OK.

347

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Device Menu Item. 14.

Copy Goto Phase About My Device Rule.

Figure 361 Menu Item with a Goto Phase Rule.

348

Dr Kevin M Potter Strategy-Dev

FEAtures Process

We want to Link the Goto Phase Rule to the Find Out More Button that belongs to the FEAtures Home Page Device topic!  So… 15.

Expand Home Page Process.

16.

Expand Home Page Phase.

17.

Right-click Device “Find Out More” Button » Link.

The Goto Phase Rule is now linked to the Find Out More Button.

Figure 362 Goto Phase Rule linked to a Button.

18.

Select File menu » Save.

349

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Home Page Process and confirm that you can now navigate to the Device Process. See if you can navigate from Process to Process by “going on” the following journey. 1.

Right-click Home Page Process » Run.

2.

When you run the Home Page Process you start on the Home Page Phase.

3.

Open the Solutions Menu.

4.

Click the Device Menu Item to navigate to the Device Process.

5.

Click the Home Page Button (in the Footer) to navigate to the Home Page Process (again).

6.

Click the Device Article Find Out More Button to navigate to the Device Process (again).

7.

Click the Home Page Button (in the Footer) to navigate to the Home Page Process (again).

8.

Close browser.

350

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 7 » Add Notes Step-By-Step The following steps show you how to add Notes to annotate your solution for others. Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 1.

Select Process Editor.

2.

Right-click Device Process » Add » Note.

3.

Select Note Type. Specification

4.

Enter Note Text. The Device solution shows you how to obtain Device information and how to use the information to dynamically alter the look-and-feel of your solution.

Figure 363 Add Note Properties dialog » Detail tab.

5.

Click OK.

351

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Specification Note is added to the Device Process.

Figure 364 Note.

6.

Select File menu » Save.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

352

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Application Form Process What you need to know The Exercises in this Chapter show you how to build the FEAtures Application Form Business Processes. The Application Form Process enables and demonstrates flow between Phases (or web pages). The Application Form Floating Areas Process provides additional Phases (or web pages) that are displayed as floating areas (or popup windows) on top of various Application Form Process Phases (or web pages). (I’m jumping ahead a little as we’ll add the “floating area” functionality when you get to the “Application Form Presentation” Chapter. .) The FEAtures Application Form Business Processes have the following Items. 

Header and Footer: You are going to Copy and Link the Header and Footer solution to the Application Form solution. You are also going to add an Application Form specific header that will contain a Progress Bar and an Application Form specific footer that will contain a “navigation” Button panel; in conjunction with Goto Phase Rules the Button panel allows you to navigate from Phase to Phase.



Phase and Phase Items: The Application Form Process is made up of 9 Phases (or web pages). Each Phase contains Items that you should already be familiar with  such as Headings, Questions and Buttons. Nothing new here… but… we need these Items to allow us to focus on this examples main raison d'être – learning about Data and Decisions. 

Figure 365 Sketch a Design » Application Form Process.

353

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface The Exercises in this Chapter show you how to build the FEAtures Application Form Business Processes.

Figure 366 About You web page.

354

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 367 Contact Details web page.

355

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 368 Bank Accounts web page.

356

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 369 Declaration web page.

357

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 370 Summary web page.

358

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 371 Save Data to XML web page.

Figure 372 Reload Data from XML web page.

Figure 373 Enter Bank Account Details web page.

359

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Process. 1.

Start Developer.

2.

Select Window menu » Process Editor.

3.

Right-click Processes root node » Add Process.

4.

Enter Process Name. Application Form

Figure 374 Add Process dialog » Process tab.

5.

Click OK.

360

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Application Form Process is added to the Process Editor tree-structure.

Figure 375 Process Editor » Application Form Process.

6.

Select File menu » Save.

361

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Process.

Process Process Name Application Form Floating Areas Table 16 Process.

The Application Form solution requires two Processes.

Figure 376 Application Form solution Processes.

362

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Add a Rules Only Phase to a Process Step-By-Step The following steps show you how to add the Initialise Application Form Rules Only Phase to the Application Form Process. 1.

Select Process Editor.

2.

Right-click Application Form Process » Add » Rules Only Phase.

3.

Enter Phase Name. Initialise Application Form

Figure 377 Add Rules Only Phase dialog » Properties tab.

4.

Click OK.

363

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Initialise Application Form Rules Only Phase is added to the Application Form Process tree-structure.

Figure 378 Application Form Process » Initialise Application Form Rules Only Phase.

5.

Select File menu » Save.

364

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Add a Phase to a Process Step-By-Step The following steps show you how to add the About You web page (or Phase) to the Application Form Process. 1.

Select Process Editor.

2.

Right-click Application Form Process » Add » Phase.

3.

Enter Phase Name. About You

Figure 379 Add Phase dialog » Properties tab.

4.

Click OK.

365

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The About You Phase is added to the Application Form Process tree-structure.

Figure 380 Application Form Process » About You Phase.

5.

Select File menu » Save. Test

Look and Feel Test A Phase is just a web page. Preview allows you to see what the Phase (or web page) looks like at run-time.  1.

Right-click About You Phase » Preview.

2.

Close browser.

Figure 381 Preview About You Phase.

366

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Phases to the Application Form and Application Form Floating Areas Processes.

Phase Process Name

Phase Name

Application Form

Contact Details

Application Form

Bank Accounts

Application Form

Declaration

Application Form

Summary

Application Form Floating Areas

Save Data to XML

Application Form Floating Areas

Reload Data from XML

Application Form Floating Areas

Enter Bank Account Details

Table 17 Phase.

The Application Form solution now has some Phases. 

Figure 382 Application Form solution Phases.

367

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Set Process Properties (the FAST way! ) Step-By-Step Although you can set Initial Phase, Error Phase and other Process Properties using the Process Properties dialog it is much faster to simply drag-drop the Phases that you need onto your Process.  Productivity It is much faster to use drag-drop to set Initial Phase, Error Phase and other Process Properties than Tip to use the Process Properties dialog.

The following steps show you how to set Initial Phase, Error Phase and other Process Properties using drag-drop. 1.

Select Process Editor.

2.

Expand Error Management Process.

3.

Expand Application Form Process.

4.

Drag-drop Initialise Application Form Phase onto Application Form Process.

5.

Select Set ‘Initial Phase’.

Figure 383 Drag-drop a Phase onto a Process to set a Phase in Process Properties.

6.

Select File menu » Save.

368

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to drag-drop Phases from the Error Management Process onto the Application Form Process to set Process Properties the FAST way. 

Process Phase Properties Drag Phase from Error Management Process…

Drop onto Application Form Process As…

General Error

Set ‘Error Phase’

Timeout Error

Set ‘Session Timeout Phase’

Access Violation Error

Set ‘Access Violation Phase’

Table 18 Process Phase Properties.

369

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Add an Item Group to a Process Step-By-Step The following steps show you how to add a new Item Group to a Process as a Pre Phase Item. We are adding an Item Group so that we can (for lack of a better word) group all Header Items together. Best Practice



It is Best Practice to use Item Groups to (for lack of a better word) group other Process Items together. This will make it easy for you to copy-paste or copy-link related items, makes it easier to navigate in the Process Editor tree structure and is also simply good housekeeping. 

1.

Select Process Editor.

2.

Right-click Application Form Process » Add » Pre Phase Item » Item Group.

3.

Enter Item Group Name. Application Form Header

Figure 384 Add Item Group dialog » Item Group tab.

4.

Click OK.

370

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Application Form Header Item Group is added to the Application Form Process as a Pre Phase Item.

Figure 385 Item Group as a Pre Phase Item.

5.

Select File menu » Save.

371

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add an Item Group to the Application Form Process as a Post Phase Item.

Item Group Process

Pre or Post Phase Item Item Group Name

Application Form

Post Phase Item

Application Form Footer

Table 19 Item Group.

The Application Form Process now has a Header and a Footer Item Group. 

Figure 386 Header and Footer Item Groups.

372

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 6 » Add a Button Step-By-Step The following steps show you how to add a new Button to the Application Form Process Contact Details Phase. 1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Right-click Contact Details Phase » Add » Button.

4.

Select Button Type. Action

5.

Enter Action Command. (This is just the caption that is displayed on the Button). Search For Address

Figure 387 Add Button dialog » Button tab.

6.

Click OK.

373

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Action Button is added to the Application Form Process Contact Details Phase.

Figure 388 Search For Address Action Button.

7.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the Contact Details Phase to see what the Button looks like at run-time.  1.

Right-click Contact Details Phase » Preview.

2.

Close browser.

Figure 389 Preview Contact Details Phase.

374

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Buttons to Phases or to Process level Item Groups.

Button Process

Phase or Item Group

Button Type

Action Command

Application Form

Contact Details

Action

Confirm Address

Application Form

Bank Accounts

Action

Add Bank Account Details

Application Form

Application Form Footer

Action

Create PDF

Application Form

Application Form Footer

Action

Save Data

Application Form

Application Form Footer

Action

Reload Data

Application Form

Application Form Footer

Back

Application Form

Application Form Footer

Forward

Application Form Floating Areas

Save Data To XML

Action

Save Data and Return to Application Form

Application Form Floating Areas

Reload Data From XML

Action

Reload Data and Return to Application Form

Application Form Floating Areas

Enter Bank Account Details

Action

Return to Application Form

Table 20 Button.

375

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The specified Phases and Item Groups should now have Buttons.

Figure 390 Application Form solution Buttons.

376

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and ensure that all Buttons are displayed in the correct order. 

Contact Details.



Bank Accounts.



Save Data to XML.



Reload Data from XML.



Enter Bank Account Details.

Figure 391 Contact Details Phase.

Figure 392 Bank Accounts Phase.

377

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 393 Save Data to XML Phase.

Figure 394 Reload Data from XML Phase.

Figure 395 Enter Bank Account Details Phase.

378

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 7 » Add a Goto Phase Rule to a Rules Only Phase Step-By-Step The following steps show you how to use the Process Editor to add a new Goto Phase Rule to the Initialise Application Form Rules Only Phase. 1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Right-click Initialise Application Form Rules Only Phase » Add » Rule » Goto Phase Rule.

4.

Enter Rule Name. Goto Phase About You

5.

Click the Phase Name Select button.

Figure 396 Add Goto Phase Rule dialog » Phase Details tab.

379

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 6.

Expand Application Form Process.

7.

Select Phase. About You

Figure 397 Phase Chooser dialog.

8.

Click OK to close the Phase Chooser dialog.

380

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 9.

Confirm that the Phase Name property is correctly set. Application Form.About You

Figure 398 Add Goto Phase Rule dialog » Phase Details tab.

10.

Click OK.

381

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Initialise Application Form Rules Only Phase.

Figure 399 Rules Only Phase with a Goto Phase Rule.

11.

Select File menu » Save. Best Practice

It is Best Practice to use meaningful Customer and/or Project Specific Rule names that indicate Rule type and purpose.

 Productivity When testing Process Flow you may not always want to enter Answers for All Mandatory Questions. Tip Select Tools » Options » Run/Preview » Mark Disable Mandatory Checking.

382

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 8 » Functionality Test with Process Analyser Phase Stack Step-By-Step The following steps show you how to use Process Analyser and Process Editor to confirm the functionality of a Rules Only Phase that has a Goto Phase Rule. 1.

Mark Process Analyser Details button on the Developer Toolbar to display Process Analyser.

Figure 400 Toolbar » Process Analyser Details.

383

Dr Kevin M Potter Strategy-Dev

FEAtures Process

2.

Select Window menu » Process Editor.

3.

Position Process Analyser below Process Editor.

4.

Using Process Editor expand the Application Form Business Process.

5.

Using Process Analyser select the Phase Stack tab.

Figure 401 Process Editor and Process Analyser.

384

Dr Kevin M Potter Strategy-Dev

FEAtures Process

6.

Mark Toolbar » Run Options » Run with analyser.

Figure 402 Toolbar » Run Options » Run with analyser.

7.

Right-click Application Form Process » Run With » Analyser.

The About You Phase (or web page) is displayed.

Figure 403 About You Phase.

385

Dr Kevin M Potter Strategy-Dev

FEAtures Process

8.

Select Developer.

9.

Confirm that the About You Phase is highlighted in Process Editor.

10.

Confirm that the Process Analyser Phase Stack shows that the solution began on the Initialise Application Form Phase and moved forward (thanks to the Goto Phase Rule) to the About You Phase.

Figure 404 Process Editor and Process Analyser at run-time.

386

Dr Kevin M Potter Strategy-Dev

FEAtures Process

11.

Close browser.

12.

Click Process Analyser » Stop Analyser toolbar button.

Figure 405 Process Analyser Toolbar » Stop Analyser.

13.

Close Process Analyser window.

Debugging Process Analyser provides a Phase Stack View that allows you to monitor the Phase Stack as you use Goto Phase Rules to journey forwards and backward through your solution. Tip This can help you to debug navigation issues. 

387

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Add a Goto Phase Rule to a Phase or to a Button Step-By-Step The following steps show you how to use Process Editor to add a new Goto Phase Rule to the About You Phase as a Post Phase Rule. 1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Right-click About You Phase » Add » Post Phase Rule » Goto Phase Rule.

4.

Enter Rule Name. Goto Phase Contact Details

5.

Select Operation Type. Go Forward to a Named Phase

6.

Click the Phase Name Select button.

Figure 406 Add Goto Phase Rule dialog » Phase Details tab.

388

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 7.

Expand Application Form Process.

8.

Select Phase. Contact Details

Figure 407 Phase Chooser dialog.

9.

Click OK to close the Phase Chooser dialog.

389

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 10.

Confirm that the Phase Name property is correctly set. Application Form.Contact Details

Figure 408 Add Goto Phase Rule dialog » Phase Details tab.

11.

Click OK.

390

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the About You Phase as a Post Phase Rule.

Figure 409 About You Phase with a Post Phase Goto Phase Rule.

12.

Select File menu » Save. Best Practice

It is Best Practice to use meaningful Customer and/or Project Specific Rule names that indicate Rule type and purpose.



391

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test with Process Analyser Run the Application Form Process and use Process Analyser to confirm that you can now navigate from the About You Phase to the Contact Details Phase.  1.

Mark Process Analyser Details button on the Developer Toolbar to display Process Analyser.

2.

Mark Run Options: Process Analyser button on the Developer Toolbar.

3.

Select Window menu » Process Editor.

4.

Position Process Analyser below Process Editor.

5.

Using Process Editor expand the Application Form Business Process.

6.

Using Process Analyser select the Phase Stack tab.

7.

Right-click Application Form Process » Run With » Analyser.

8.

Select Developer.

9.

Use Process Editor and Process Analyser to confirm that you are on the About You Phase.

10. Select Web Browser. 11. Click Continue Button. 12. Select Developer. 13. Use Process Editor and Process Analyser to confirm that you are on the Contact Details Phase. 14. Close browser. 15. Click Process Analyser » Stop Analyser toolbar button. 16. Close Process Analyser window.

392

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 410 Process Editor and Process Analyser at run-time.

393

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Goto Phase Rules to Phases as Post Phase Rules or to Buttons as Button Rules.

Goto Phase Rule Add Rule to Item…

As…

Contact Details Phase

Operation Type

Phase Name

Post Phase Goto Phase Bank Rule Accounts

Go Forward to a Named Phase

Bank Accounts

Bank Accounts Phase

Post Phase Goto Phase Rule Declaration

Go Forward to a Named Phase

Declaration

Declaration Phase

Post Phase Goto Phase Rule Summary

Go Forward to a Named Phase

Summary

Save Data Button

Button Rule

Goto Phase Save Data to XML

Jump out to a Named Phase

Save Data To XML

Button Rule

Goto Phase Reload Data from XML

Jump out to a Named Phase

Reload Data From XML

Add Bank Account Details Button Button Rule (In Bank Accounts Phase)

Goto Phase Enter Bank Account Details

Jump out to a Named Phase

Enter Bank Account Details

Save Data and Return to Application Form Button

Button Rule

Goto Previous Application Form Phase

Go Forward to Next Phase

Button Rule

Goto Previous Application Form Phase

Go Forward to Next Phase

Button Rule

Goto Previous Application Form Phase

Go Forward to Next Phase

(In Application Form Footer Item Group) Reload Data Button (In Application Form Footer Item Group)

(In Save Data to XML Phase) Reload Data and Return to Application Form Button (In Reload Data From XML Phase) Return to Application Form Button (In Enter Bank Account Details Phase) Table 21 Goto Phase Rule.

394

Dr Kevin M Potter Strategy-Dev

Rule Name

FEAtures Process

Application Form solution navigation (from Phase to Phase) is now enabled thanks to the Goto Phase Rules that you have just added. 

Figure 411 Contact Details Phase Goto Phase Rules.

Figure 412 Bank Accounts Phase Goto Phase Rules.

Figure 413 Declaration Phase Goto Phase Rules.

Figure 414 Application Form Footer Item Group Goto Phase Rules.

395

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 415 Application Form Floating Areas Process Phases Goto Phase Rules.

396

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test with Process Analyser Run the Application Form Process and use Process Analyser to confirm that you can now navigate from Phase to Phase using Goto Phase Rules.  1.

Mark Process Analyser Details button on the Developer Toolbar to display Process Analyser.

2.

Mark Run Options: Process Analyser button on the Developer Toolbar.

3.

Select Window menu » Process Editor.

4.

Position Process Analyser below Process Editor.

5.

Using Process Editor expand the Application Form Process.

6.

Using Process Analyser select the Phase Stack tab.

7.

Right-click Application Form Process » Run With » Analyser.

See if you can navigate to all Phases by “going on” the following journey. (At each step swap between the browser and Developer to see what’s happening with Process Analyser and Process Editor. 8.

When you run the Application Form Process you start on the About You Phase.

9.

Click the Continue Button to navigate to the Contact Details Phase.

10. Click the Continue Button to navigate to the Bank Accounts Phase. 11. Click the Continue Button to navigate to the Declaration Phase. 12. Click the Continue Button to navigate to the Summary Phase. 13. Click the Back Button to navigate to the Declaration Phase (again). 14. Click the Back Button to navigate to the Bank Accounts Phase (again). 15. Click the Add Bank Account Details Button to navigate to the Enter Bank Account Details Phase. 16. Click the Return to Application Form Button to navigate to the Bank Accounts Phase (again). 17. Click the Save Data Button to navigate to the Save Data to XML Phase. 18. Click the Save Data and Return to Application Form Button to navigate to the Bank Accounts Phase (again). 19. Click the Reload Data Button to navigate to the Reload Data from XML Phase. 20. Click the Reload Data and Return to Application Form Button to navigate to the Bank Accounts Phase (again). 21. Close browser. 22. Click Process Analyser » Stop Analyser toolbar button. 23. Close Process Analyser window.

397

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 416 Process Editor and Process Analyser at run-time.

398

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 10 » Visualise Flow Step-By-Step Visualise flow is a simple tool that allows you to diagrammatically “see the flow” of your Business Process at Process and Phase level. The following steps show you how to use the Process Editor Visualise Flow tool. 1.

Select Process Editor.

2.

Right-click Application Form Process » Visualise Flow.

Figure 417 Visualise Process Flow.

3.

Close the Process/Phase Flow window.

399

Dr Kevin M Potter Strategy-Dev

FEAtures Process

4.

Right-click the About You Phase » Visualise Flow.

Figure 418 Visualise Phase Flow.

5.

Close Process/Phase Flow window.

400

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 11 » Add a Progress Bar to an Item Group Step-By-Step The following steps show you how to add a new Progress Bar to an Item Group. 1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Right-click Application Form Header Item Group » Add » Progress Bar.

4.

Enter Name. Application Form Progress Bar

5.

Mark Allow Back Navigation.

6.

Mark Save Data on Back.

7.

Mark Allow Forward Navigation.

8.

Mark Generate Steps.

Figure 419 Add Progress Bar dialog.

9.

Click OK.

401

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Application Form Progress Bar is added to the Application Form Header Item Group. 10.

Expand Application Form Progress Bar to show generated Progress Steps.

Figure 420 Application Form Progress Bar in Application Form Header Item Group.

11.

Select File menu » Save.

402

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s see what the Progress Bar is going to look like at run-time.  1.

Right-click About You Phase » Preview.

2.

Close browser.

Figure 421 Preview About You Phase.

Test

Functionality Test Let’s confirm that you can use Progress Bar Forward and Backward navigation to move from Phase to Phase. 1.

Select Process Editor.

2.

Right-click Application Form Process » Run.

3.

Navigate forward by clicking on the following Progress Steps.

4.

5.



Contact Details.



Bank Accounts.



Declaration.



Summary.

Navigate backwards by clicking on the following Progress Steps. 

Declaration.



Bank Accounts.



Contact Details.



About You.

Close browser.

403

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 12 » Add a Heading to a Phase Step-By-Step The following steps show you how to add a new Heading to a Phase. 1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Right-click Contact Details Phase » Add » Heading.

4.

Enter Display Text. Customer Name

5.

Select Heading Level. Level 1

Figure 422 Add Heading dialog » Heading tab.

6.

Click OK.

404

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Heading is added to the Contact Details Phase.

Figure 423 Customer Name Heading as last Item in Contact Details Phase.

7.

Move the Heading above the Search For Address Button by dragging and dropping the Heading onto the Search For Address Button.

Figure 424 Customer Name Heading as first Item in Contact Details Phase.

8.

Select File menu » Save.

405

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Contact Details Phase to see what the Heading looks like at run-time.  1.

Right-click Contact Details Phase » Preview.

2.

Close browser.

Figure 425 Preview Contact Details Phase.

406

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Headings to Phases that belong to the Application Form solution.

Heading Process

Phase

Application Form

Contact Details Telephone and Email

Level 1

Search For Address

Application Form

Contact Details Address

Level 1

Search For Address

Application Form

Declaration

Declaration

Level 1

Application Form

Declaration

Agreement

Level 1

Application Form Floating Areas

Save Data to XML

Save Application Form Level 1 Data

Save Data and Return to Application Form

Application Form Floating Areas

Reload Data from XML

Reload Application Form Data

Level 1

Reload Data and Return to Application Form

Application Form Floating Areas

Enter Bank Enter Bank Account Account Details Details

Level 1

Return to Application Form

Table 22 Heading.

407

Dr Kevin M Potter Strategy-Dev

Heading Display Text Heading Level Drag Above Button

FEAtures Process

The Application Form solution Phases now have Headings. 

Figure 426 Application Form Solution Headings.

408

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Headings are correctly displayed. 

Contact Details.



Declaration.



Save Data to XML.



Reload Data from XML.



Enter Bank Account Details.

Figure 427 Contact Details Phase.

409

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 428 Declaration Phase.

Figure 429 Save Data to XML Phase.

Figure 430 Reload Data from XML Phase.

410

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 431 Enter Bank Account Details Phase.

411

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 13 » Add a Question to a Phase Step-By-Step The following steps show you how to add a new Question to the About You Phase. 1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Right-click About You Phase » Add » Question.

4.

Enter Display Text. Title

Figure 432 Add Question dialog » Question tab.

5.

Click OK.

412

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Question is added to the About You Phase.

Figure 433 Title Question in About You Phase.

6.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the About You Phase to see what the Question looks like at run-time.  1.

Right-click About You Phase » Preview.

2.

Close browser.

Figure 434 Preview About You Phase.

413

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Add the following Questions to the About You Phase. Information Items shown in green in the following table already exist. These have been included to help you to put Questions in the right place within the Phase. 

Question Display Text Title Other Title First Name Last Name Date Of Birth Age Region Nationality Existing Customer Gross Annual Income Amount To Deposit Table 23 About You Phase Questions.

414

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The About You Phase now has Questions. 

Figure 435 About You Phase Questions.

415

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phase and confirm that all Questions are correctly displayed. 

About You.

Figure 436 Preview About You Phase.

416

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Add the following Questions to the Contact Details Phase. Information Items shown in green in the following table already exist. These have been included to help you to put Questions in the right place within the Phase. 

Question Display Text Customer Name Application Reference Number Telephone and Email Telephone Number Email Address Confirm Email Address Address Property Postcode Search for Address Address List Confirm Address Building Number Street City Postcode Table 24 Contact Details Phase Questions.

417

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Contact Details Phase now has Questions. 

Figure 437 Contact Details Phase Questions.

418

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phase and confirm that all Questions are correctly displayed. 

Contact Details.

Figure 438 Preview Contact Details Phase.

419

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Add the following Questions to the Bank Accounts Phase. Information Items shown in green in the following table already exist. These have been included to help you to put Questions in the right place within the Phase. 

Question Display Text Number Of Bank Accounts Add Bank Account Details Table 25 Bank Accounts Phase Questions.

The Bank Accounts Phase now has Questions. 

Figure 439 Bank Accounts Phase Questions.

420

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Questions are correctly displayed. 

Bank Accounts.

Figure 440 Preview Bank Accounts Phase.

421

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Add the following Questions to the Declaration Phase. Information Items shown in green in the following table already exist. These have been included to help you to put Questions in the right place within the Phase. 

Question Display Text Agreement Personal Data Agreement Account Terms Agreement Marketing Information Agreement Product And Service Updates Company Visibility Table 26 Declaration Phase Questions.

422

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Declaration Phase now has Questions. 

Figure 441 Declaration Phase Questions.

423

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Questions are correctly displayed. 

Declaration.

Figure 442 Preview Declaration Phase.

424

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try This time you need to multi-select (with ), and Copy-Paste Questions from other Phases to the Summary Phase.

Summary Phase Question Copy From Phase

Question

About You

Title

About You

Other Title

About You

First Name

About You

Last Name

About You

Date Of Birth

About You

Nationality

About You

Existing Customer

About You

Gross Annual Income

About You

Amount To Deposit

Contact Details

Telephone Number

Contact Details

Email Address

Contact Details

Building Number

Contact Details

Street

Contact Details

City

Contact Details

Postcode

Declaration

Personal Data Agreement

Declaration

Account Terms Agreement

Declaration

Marketing Information Agreement

Declaration

Product And Service Updates

Declaration

Company Visibility

Table 27 Summary Phase Questions.

425

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Summary Phase now has Questions. 

Figure 443 Summary Phase Questions.

426

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Questions are correctly displayed. 

Summary.

Figure 444 Preview Summary Phase.

427

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Add the following Questions to the Reload Data from XML Phase. Information Items shown in green in the following table already exist. These have been included to help you to put Questions in the right place within the Phase. 

Question Display Text Reload Application Form Data Application Reference Number Reload Data and Return to Application Form Table 28 Reload Data From XML Phase Questions.

The Reload Data From XML Phase now has Questions. 

Figure 445 Reload Data From XML Phase Questions.

428

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Questions are correctly displayed. 

Reload Data From XML.

Figure 446 Preview Reload Data From XML Phase.

429

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 14 » Set Question Mandatory and Read Only with Question Dialog Step-By-Step The following steps show you how to use the Question Properties dialog to set Question Mandatory and Read Only Status. 1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Expand About You Phase.

4.

Right-click Age Question » Properties.

5.

Select Answer tab.

6.

Unmark Mandatory.

7.

Mark Read Only.

Figure 447 Question Properties dialog » Answer tab.

8.

Click OK.

9.

Select File menu » Save.

430

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the About You Phase to see what the Age Question looks like at run-time.  1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Right-click About You Phase » Preview.

4.

Confirm that an asterisk (*) is no longer displayed next to the Age Question. This is because the Question is no longer Mandatory.

5.

Confirm that a Text Box control is no longer displayed next to the Age Question. This is because the Question is now Read Only.

6.

Close browser.

Figure 448 Preview About You Phase.

431

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use the Question Properties dialog set Question Answer Mandatory and Read Only Status properties.

Question Answer Phase

Question

Mandatory

Read Only

Contact Details

Application Reference Number

No

Yes

Contact Details

Telephone Number

No

No

Contact Details

Building Number

No

Yes

Contact Details

Street

No

Yes

Contact Details

City

No

Yes

Contact Details

Postcode

No

Yes

Table 29 Question Answer.

432

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that Question Mandatory and Read Only properties are correctly set. 

Contact Details.

Figure 449 Preview Contact Details Phase.

433

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 15 » Set Question Mandatory and Read Only with Quick Edit Step-By-Step The following steps show you how to use Quick Edit to set Question Mandatory and Read Only Status. 1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Right-click Summary Phase » Quick Edit.

4.

Unmark Mandatory for ALL Questions.

5.

Mark Read Only for ALL Questions.

Figure 450 Question Properties dialog » Answer tab.

6.

Click OK.

7.

Select File menu » Save.

434

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Summary Phase to see what the Questions look like at run-time.  1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Right-click Summary Phase » Preview.

4.

Confirm that an asterisk (*) is no longer displayed next to the Questions. This is because the Questions are no longer Mandatory.

5.

Confirm that a Text Box control is no longer displayed next to the Questions. This is because the Questions are now Read Only.

6.

Close browser.

Figure 451 Preview Summary Phase.

435

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 16 » Add an Item Group to a Phase Step-By-Step The following steps show you how to add a new Item Group to a Phase. We are adding an Item Group so that we can (for lack of a better word) group Items together. This will make it easy for us to work with the Process Editor tree-structure as our solution grows. Best Practice



It is Best Practice to use Item Groups to (for lack of a better word) group other Process Items together. This will make it easy for you to copy-paste or copy-link related Items, makes it easier to navigate in the Process Editor tree structure and is also simply good housekeeping. 

1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Expand Contact Details Phase.

4.

Multi-select Items.

5.



H1 Telephone and Email



Q Telephone Number



Q Email Address



Q Confirm Email Address

Right-click selected items » Move to New Item Group.

436

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Insert Item Group dialog is displayed. 6.

Enter Item Group Name. Telephone and Email Group

Figure 452 Insert Item Group dialog » Item Group tab.

7.

Click OK.

437

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Telephone and Email Group Item Group is added to the Contact Details Phase.

Figure 453 Telephone and Email Group Item Group.

8.

Select File menu » Save.

438

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Item Groups to the Contact Details Phase.

Item Group Phase

Multi-select Items to Move to New Item Group

Contact Details 

H1 Address



Q Property Postcode



B Search For Address



Q Address List



B Confirm Address



Q Building Number



Q Street



Q City



Q Postcode

Table 30 Item Group.

439

Dr Kevin M Potter Strategy-Dev

Item Group Name Address Group

FEAtures Process

The Contact Details Phase now has several Item Groups. 

Figure 454 Item Group.

440

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 17 » Copy and Link an Item Step-By-Step The following steps show you how to use the Process Editor to link a Question that exists in one Phase to a second Phase. Productivity Linking is very useful when you want to reuse an Item in several different places. Change the Tip original; the change is automatically reflected across all linked Items.

1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Expand Contact Details Phase.

4.

Right-click Application Reference Number Question » Copy.

Figure 455 Copy Application Reference Number Question.

441

Dr Kevin M Potter Strategy-Dev

FEAtures Process

5.

Right-click Bank Accounts Phase » Link.

Figure 456 Linked Application Reference Number Question as last Item in Bank Accounts Phase.

6.

Move the Linked Application Reference Number Question (in the Bank Accounts Phase) above the Number of Bank Accounts Question by dragging and dropping the Linked Application Reference Number Question onto the Number Of Bank Accounts Question.

Figure 457 Linked Application Reference Number Question as first Item in Bank Accounts Phase.

442

Dr Kevin M Potter Strategy-Dev

FEAtures Process

7.

Right-click Linked Application Reference Number Question (in Bank Accounts Phase) » Locate » Original.

8.

Note that focus jumps to the original Application Reference Number Question.

Figure 458 Locate Original.

9.

Select File menu » Save.

443

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Bank Accounts Phase to see what the Question looks like at run-time.  1.

Select Process Editor.

2.

Expand Application Form Process.

3.

Right-click Bank Accounts Phase » Preview.

4.

Close browser.

Figure 459 Preview Bank Accounts Phase.

444

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Linked Items to the Application Form solution.

Linked Item Copy from Phase

Item to Copy

Link to Phase

Drag Linked Item onto this Item

Contact Details

Q Application Reference Number

Declaration

H Declaration

Contact Details

Q Application Reference Number

Summary

Q Title

Contact Details

Q Application Reference Number

Save Data to XML B Save Data and Return to Application Form

Contact Details

H Customer Name

Bank Accounts

Application Reference Number

Contact Details

H Customer Name

Declaration

Application Reference Number

Contact Details

H Customer Name

Summary

Application Reference Number

Table 31 Linked Item.

Each of the specified Phases now have Linked Items.

Figure 460 Bank Accounts Phase Linked Items.

Figure 461 Declaration Phase Linked Items.

445

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 462 Summary Phase Linked Items.

Figure 463 Save Data to XML Phase Linked Items.

446

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Linked Items are correctly displayed. 

Bank Accounts.



Declaration.



Summary.



Save Data to XML.

Figure 464 Preview Bank Accounts Phase.

Figure 465 Preview Declaration Phase.

447

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 466 Preview Summary Phase.

Figure 467 Preview Save Data to XML Phase.

448

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 18 » Link Header and Footer to a Process Step-By-Step The following steps show you how to Link the Header and Footer (Item Groups) that you previously built to the Application Form Process.

Figure 468 Link Header and Footer to Application Form Process.

Productivity Linking is very useful when you want to reuse an Item in several different places. Change the Tip original; the change is automatically reflected across all linked Items.

449

Dr Kevin M Potter Strategy-Dev

FEAtures Process

1.

Select Process Editor.

2.

Expand the Header and Footer Process.

3.

Right-click Header Item Group » Copy.

Figure 469 Copy Header Item Group.

4.

Right-click Application Form Process » Link » As Pre Phase Item.

5.

Move the Linked Header Item Group above the Application Form Header Item Group by dragging and dropping the Linked Header Item Group onto the Application Form Header Item Group. (When prompted select the “Move Before” option).

Figure 470 Link Header Item Group.

450

Dr Kevin M Potter Strategy-Dev

FEAtures Process

6.

Select Header and Footer Process.

7.

Right-click Footer Item Group » Copy.

Figure 471 Copy Footer Item Group.

8.

Right-click Application Form Process » Link » As Post Phase Item.

Figure 472 Link Footer Item Group.

9.

Select File menu » Save.

451

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Run the Application Form Process to see what the Header and Footer look like at run-time.  1.

Select Process Editor.

2.

Right-click Application Form Process » Run.

3.

Confirm that the Header and Footer Item Groups are displayed.

4.

Close browser.

Figure 473 Application Form solution with Header and Footer.

452

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 19 » Add Application Form to Home Page Step-By-Step The following steps show you how to use the Process Editor to add the Application Form Process to the Home Page Process assuming that you have already built the Home Page Process. 1.

Select Process Editor.

2.

Expand Header and Footer Process.

3.

Expand Header Item Group.

4.

Expand FEAtures Menu.

5.

Expand Solutions Menu Item.

6.

Right-click Application Form Menu Item » Add » Menu Rule » Goto Phase Rule.

7.

Enter Rule Name. Goto Phase Initialise Application Form

8.

Click the Phase Name Select button.

Figure 474 Add Goto Phase Rule dialog » Phase Details tab.

453

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 9.

Expand Application Form Process.

10.

Select Phase. Initialise Application Form

Figure 475 Phase Chooser dialog.

11.

Click OK to close the Phase Chooser dialog.

454

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 12.

Confirm that the Phase Name is correctly set. Application Form.Initialise Application Form

Figure 476 Add Goto Phase Rule dialog » Phase Details tab.

13.

Click OK.

455

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Application Form Menu Item. 14.

Copy Goto Phase Initialise Application Form Rule.

Figure 477 Menu Item with a Goto Phase Rule.

456

Dr Kevin M Potter Strategy-Dev

FEAtures Process

We want to Link the Goto Phase Rule to the “Find Out More” button that belongs to the FEAtures Home Page Application Form topic!  So… 15.

Expand Home Page Process.

16.

Expand Home Page Phase.

17.

Right-click Application Form “Find Out More” Button » Link.

The Goto Phase Rule is now linked to the Find Out More Button.

Figure 478 Goto Phase Rule linked to a Button.

18.

Select File menu » Save.

457

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Home Page Process and confirm that you can now navigate to the Application Form Process. See if you can navigate from Process to Process by “going on” the following journey. 1.

Select Process Editor.

2.

Right-click Home Page Process » Run.

3.

When you run the Home Page Process you start on the Home Page Phase.

4.

Open the Solutions Menu.

5.

Click the Application Form Menu Item to navigate to the Application Form Process.

6.

Click the Home Page Button (in the Footer) to navigate to the Home Page Process (again).

7.

Click the Application Form Article Find Out More Button to navigate to the Application Form Process (again).

8.

Click the Home Page Button (in the Footer) to navigate to the Home Page Process (again).

9.

Close browser.

458

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 20 » Add Notes Step-By-Step The following steps show you how to add Notes to annotate your solution for others. Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 1.

Select Process Editor.

2.

Right-click Application Form Process » Add » Note.

3.

Select Note Type. Specification

4.

Enter Note Text. The Application Form Process is designed to help you to learn about Data and Rules.

Figure 479 Add Note Properties dialog » Detail tab.

5.

Click OK.

459

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Note is added to the Application Form Process.

Figure 480 Note.

6.

Select File menu » Save.

460

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Notes to Processes or Phases that belong to the Application Form solution.

Note Process Name

Note Type

Application Form Floating Areas

Specification The Application Form Floating Areas Process provides Phases that are accessible via the Application Form Process and displayed as pop-up windows.

Table 32 Note.

461

Dr Kevin M Potter Strategy-Dev

Note Text

FEAtures Process

You have now added Notes to annotate your solution.

Figure 481 Application Form Solution Notes.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

462

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Login Component Process What you need to know The Exercises in this Chapter show you how to build the Login Component Business Process. The Login Component Process enables and demonstrates flow between Phases (or web pages). The Login Component Process has the following items. 

Phase and Phase Items: The Login Component Process is made up of 6 Phases (or web pages). Each Phase contains Items that you should already be familiar with  such as Headings, Questions and Buttons. Nothing new here… but… we need these items to allow us to focus on this examples main raison d'être – learning about Components. 

Figure 482 Sketch a Design » Login Component Process.

463

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface The Exercises in this Chapter show you how to build the Login Component Business Process. The Login Component Process enables and demonstrates flow between Phases (or web pages).

Figure 483 Login Home Page Phase.

Figure 484 Create A New Account Phase.

464

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 485 Account Created Phase.

Figure 486 My Account Phase.

Figure 487 I Forgot My Password Phase.

465

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 488 Password Email Sent Phase.

466

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Process to the FEAturesLibrary Project. 1.

Start Developer.

2.

Select File Menu » Open from Local File.

The Open dialog is displayed. 3.

Navigate to the FEAturesLibrary Project Folder. C:\ECProject\Libraries\FEAturesLibrary

4.

Select Project File. FEAturesLibrary.ifp

Figure 489 Open (Project) dialog.

5.

Click Open to Open the FEAturesLibrary Project.

467

Dr Kevin M Potter Strategy-Dev

FEAtures Process

6.

Select Window menu » Process Editor.

7.

Right-click Processes root node » Add Process.

8.

Enter Process Name. Login Component

Figure 490 Add Process dialog » Process tab.

9.

Click OK.

The Login Component Process is added to the Process Editor tree-structure.

Figure 491 Process Editor » Login Component Process.

10.

Select File menu » Save.

468

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Add a Phase to a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Phase to a Process. 1.

Select Process Editor.

2.

Right-click Login Component Process » Add » Phase.

3.

Enter Phase Name. Login Home Page

Figure 492 Add Phase dialog » Properties tab.

4.

Click OK.

469

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Login Home Page Phase is added to the Login Component Process tree-structure.

Figure 493 Login Component Process » Contact Details Phase.

5.

Select File menu » Save. Test

Look and Feel Test A Phase is just a web page. Preview allows you to see what the Phase (or web page) looks like at run-time.  1.

Right-click Login Home Page Phase » Preview.

2.

Close browser.

Figure 494 Preview Login Phase.

470

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Phases to the Login Component Process.

Phase Process Name

Phase Name

Login Component

Create A New Account

Login Component

Account Created

Login Component

My Account

Login Component

I Forgot My Password

Login Component

Password Email Sent

Table 33 Phase.

The Login Component Process now has some Phases. 

Figure 495 Login Component Process Phases.

471

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Set Process Properties (the FAST way! ) Step-By-Step Although you can set Initial Phase, Error Phase and other Process Properties using the Process Properties dialog it is much faster to simply drag-drop the Phases that you need onto your Process.  Productivity It is much faster to use drag-drop to set Initial Phase, Error Phase and other Process Properties than Tip to use the Process Properties dialog.

The following steps show you how to set Initial Phase, Error Phase and other Process Properties using drag-drop. 1.

Select Process Editor.

2.

Expand Error Management Process.

3.

Expand Login Component Process.

4.

Drag-drop Login Home Page Phase onto Login Component Process.

5.

Select Set ‘Initial Phase’.

Figure 496 Drag-drop a Phase onto a Process to set a Phase in Process Properties.

6.

Select File menu » Save.

472

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to drag-drop Phases from the Error Management Process onto the Login Component Process to set Process Properties the FAST way. 

Process Phase Properties Drag Phase from Error Management Process…

Drop onto Login Component Process As…

General Error

Set ‘Error Phase’

Timeout Error

Set ‘Session Timeout Phase’

Access Violation Error

Set ‘Access Violation Phase’

Table 34 Process Phase Properties.

473

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Add a Heading to a Phase Step-By-Step The following steps show you how to add a new Heading to a Phase. 1.

Select Process Editor.

2.

Expand Login Component Process.

3.

Right-click Login Home Page Phase » Add » Heading.

4.

Enter Display Text. Login Home Page

5.

Select Heading Level. Level 1

Figure 497 Add Heading dialog » Heading tab.

6.

Click OK.

474

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Heading is added to the Login Home Page Phase.

Figure 498 Login Heading in Login Home Page Phase.

7.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the Login Home Page Phase to see what the Heading looks like at run-time.  1.

Right-click Login Home Page Phase » Preview.

2.

Close browser.

Figure 499 Preview Login Home Page Phase.

475

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Headings to Phases that belong to the Login Component Solution.

Heading Phase Name

Display Text

Create A New Account

Create A New Account

Level 1

Account Created

Account Created

Level 1

My Account

My Account

Level 1

I Forgot My Password

I Forgot My Password

Level 1

Password Email Sent

Password Email Sent

Level 1

Table 35 Heading.

The Login Component solution Phases now have Headings. 

Figure 500 Login Component Solution Headings.

476

Dr Kevin M Potter Strategy-Dev

Heading Level

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Headings are correctly displayed. 

Create a New Account.



New Account Created.



My Account.



I Forgot My Password.



Password Email Sent.

Figure 501 Create A New Account Phase.

Figure 502 Account Created Phase.

477

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 503 My Account Phase.

Figure 504 I Forgot My Password Phase.

Figure 505 Password Email Sent Phase.

478

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Add a Question to a Phase Step-By-Step The following steps show you how to use the Process Editor to add a new Question to a Phase. 1.

Select Process Editor.

2.

Expand Login Component Process.

3.

Right-click Login Home Page Phase » Add » Question.

4.

Enter Display Text. User Name

Figure 506 Add Question dialog.

5.

Click OK.

479

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Question is added to the Login Home Page Phase.

Figure 507 User Name Question in Login Home Page Phase.

6.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the Login Home Page Phase to see what the Question looks like at run-time.  1.

Right-click Login Home Page Phase » Preview.

2.

Close browser.

Figure 508 Preview Login Home Page Phase.

480

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Questions to Phases that belong to the Login Component Process.

Question Phase

Question

Mandatory

Read Only

Login Home Page

Password

Yes

No

Create A New Account

Email Address

Yes

No

Create A New Account

User Name

Yes

No

Create A New Account

Password

Yes

No

Account Created

Account Created with User Name

No

Yes

My Account

My User Name

No

Yes

My Account

My Email Address

No

Yes

I Forgot My Password

Send New Password To Email Address

Yes

No

Password Email Sent

Password Sent To Email Address

No

Yes

Table 36 Question.

481

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Login Component solution Phases now have Questions. 

Figure 509 Login Component Solution Questions.

482

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and confirm that all Questions are correctly displayed. 

Login Home Page



Create a New Account.



Account Created.



My Account.



I Forgot My Password.



Password Email Sent.

Figure 510 Login Home Page Phase.

Figure 511 Create A New Account Phase.

483

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 512 Account Created Phase.

Figure 513 My Account Phase.

Figure 514 I Forgot My Password Phase.

484

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 515 Password Email Sent Phase.

485

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 6 » Add a Button to a Phase Step-By-Step The following steps show you how to add a new Button to the Login Component Process Login Details Phase. 1.

Select Process Editor.

2.

Expand Login Component Process.

3.

Right-click Login Home Page Phase » Add » Button.

4.

Select Button Type. Action

5.

Enter Action Command. Login To My Account

Figure 516 Add Button dialog.

6.

Click OK.

486

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Action Button is added to the Login Component Process Login Home Page Phase.

Figure 517 Login To My Account Action Button.

7.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the Login Home Page Phase to see what the Button looks like at run-time.  1.

Right-click Login Home Page Phase » Preview.

2.

Close browser.

Figure 518 Preview Login Home Page Phase.

487

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Action Buttons to Login Component Process Phases.

Button Process

Phase

Button Type

Action Command

Login Component

Login Home Page

Action

Create A New Account

Login Component

Login Home Page

Action

I Forgot My Password

Login Component

Create A New Account

Action

Create Account

Login Component

Account Created

Action

Goto My Account

Login Component

My Account

Action

Remember My Name

Login Component

My Account

Action

Goto Next Screen

Login Component

My Account

Action

Logout

Login Component

I Forgot My Password

Action

Get A New Password

Login Component

Password Email Sent

Action

Go Back To Login Screen

Table 37 Button.

488

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The specified Phases should now have Buttons.

Figure 519 Login Component solution Buttons.

489

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phases and ensure that all Buttons are displayed in the correct order. 

Login Home Page.



Create A New Account.



Account Created.



My Account.



I Forgot My Password.



Password Email Sent.

Figure 520 Login Home Page Phase.

490

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 521 Create A New Account Phase.

Figure 522 Account Created Phase.

491

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 523 My Account Phase.

Figure 524 I Forgot My Password Phase.

Figure 525 Password Email Sent Phase.

492

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 7 » Add a Goto Phase Rule to an Action Button Step-By-Step The following steps show you how to use the Process Editor to add a Goto Phase Rule to an Action Button. 1.

Select Process Editor.

2.

Expand Login Component Process.

3.

Expand Login Home Page Phase.

4.

Right-click Login To My Account Button » Add » Button Rule » Goto Phase Rule.

5.

Enter Rule Name. Goto Phase My Account

6.

Select Operation Type. Go Forward to a Named Phase

7.

Click Phase Name Select button.

Figure 526 Add Goto Phase Rule dialog » Phase Details tab.

493

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 8.

Expand Login Component Process.

9.

Select Phase. My Account

Figure 527 Phase Chooser dialog.

10.

Click OK to close the Phase Chooser dialog.

494

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 11.

Confirm that the Phase Name is correctly set. Login Component.My Account

Figure 528 Add Goto Phase Rule dialog » Phase Details tab.

12.

Click OK.

495

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Login To My Account Button.

Figure 529 Button with a Goto Phase Rule.

13.

Select File menu » Save. Best Practice

It is Best Practice to use meaningful Customer and/or Project Specific Rule names that indicate Rule type and purpose.

 Productivity When testing Process Flow you may not always want to enter Answers for All Mandatory Questions. Tip Select Tools » Options » Run/Preview » Mark Disable Mandatory Checking.

496

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Login Component Process and confirm that you can now navigate from the Login Home Page Phase to the My Account Phase. 1.

Select Process Editor.

2.

Right-click Login Component Process » Run. The Login Home Page Phase is displayed.

3.

Click Login To My Account Button.

4.

Confirm that the My Account Phase is displayed.

5.

Close browser.

Figure 530 Login Home Page Phase at run-time.

Figure 531 My Account Phase at run-time.

497

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Goto Phase Rules to Action Buttons as Button Rules.

Goto Phase Rule Phase

Action Button

Login Home Page

Create a New Account Goto Phase Create A New Account

Login Home Page

I Forgot My Password Goto Phase I Forgot My Go Forward to a Password Named Phase

I Forgot My Password

Create A New Account

Create Account

Goto Phase Account Created

Account Created

Account Created

Goto My Account

Goto Phase My Account Go Forward to a Named Phase

My Account

Goto Next Screen

Goto Next Phase

My Account

Logout

Goto Phase Login Home Go Back to a Named Login Home Page Phase Page

I Forgot My Password

Get a New Password

Goto Phase Password Email Sent

Password Email Sent

Go Back to Login Screen

Goto Phase Login Home Go Back to a Named Login Home Page Phase Page

Table 38 Goto Phase Rule.

498

Dr Kevin M Potter Strategy-Dev

Rule Name

Operation Type

Phase Name

Go Forward to a Named Phase

Create A New Account

Go Forward to a Named Phase

My Account

Go Forward to Next Phase

Go Forward to a Named Phase

Password Email Sent

FEAtures Process

Login Component solution navigation (from Phase to Phase) is now enabled thanks to the Goto Phase Rules that you have just added. 

Figure 532 Login Home Page Phase Goto Phase Rules.

Figure 533 Create A New Account Phase Goto Phase Rules.

Figure 534 Account Created Phase Goto Phase Rules.

499

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 535 My Account Phase Goto Phase Rules.

Figure 536 I Forgot My Password Phase Goto Phase Rules.

Figure 537 Password Email Sent Phase Goto Phase Rules.

500

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Login Component Process and confirm that you can now navigate from Phase to Phase using Goto Phase Rules. See if you can navigate to all Phases by “going on” the following journey. 1.

Select Process Editor.

2.

Right-click Login Component Process » Run. When you run the Login Component Process you start on the Login Home Page Phase.

3.

Click the Login To My Account Button to navigate to the My Account Phase.

4.

Click the Logout Button to navigate to the Login Home Page Phase (again).

5.

Click the Create a New Account Button to navigate to the Create A New Account Phase.

6.

Click the Create Account Button to navigate to the Account Created Phase.

7.

Click the Goto My Account Button to navigate to the My Account Phase.

8.

Click the Logout Button to navigate to the Login Home Page (again).

9.

Click the I Forgot My Password Button to navigate to the I Forgot My Password Phase.

10. Click the Get A New Password Button to navigate to the Password Email Sent Phase. 11. Click the Go Back To Login Screen Button to navigate to the Login Home Page Phase (again). 12. Click the Login To My Account Button to navigate to the My Account Phase (again). 13. Click the Goto Next Screen Button to generate a No Next Phase Specified Error. Don’t panic!  The error will disappear once we start to use the solution as a Component.  14. Close the Runtime Error dialog. 15. Close browser.

501

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 538 Login Component Login Home Page Phase.

Figure 539 General Error Phase displayed because a No Next Phase error occurs.

502

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 540 Runtime-error dialog showing a No Next Phase error.

503

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 8 » Visualise Flow Step-By-Step Visualise flow is a simple tool that allows you to diagrammatically “see the flow” of your Business Process at Process and Phase level. The following steps show you how to use the Process Editor Visualise Flow tool. 1.

Select Process Editor.

2.

Right-click Login Component Process » Visualise Flow.

Figure 541 Visualise Process Flow.

3.

Close the Process/Phase Flow window.

504

Dr Kevin M Potter Strategy-Dev

FEAtures Process

4.

Right-click the Login Home Page Phase » Visualise Flow.

Figure 542 Visualise Phase Flow.

5.

Close Process/Phase Flow window.

505

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Add an Item Group to a Process Step-By-Step The following steps show you how to add a new Item Group to a Process as a Pre Phase Item. We are adding an Item Group so that we can (for lack of a better word) group all header items together. Best Practice



It is Best Practice to use Item Groups to (for lack of a better word) group other Process Items together. This will make it easy for you to copy-paste or copy-link related items, makes it easier to navigate in the Process Editor tree structure and is also simply good housekeeping. 

1.

Select Process Editor.

2.

Right-click Login Component Process » Add » Pre Phase Item » Item Group.

3.

Enter Item Group Name. Login Component Header

Figure 543 Add Item Group dialog.

4.

Click OK.

506

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Login Component Header Item Group is added to the Login Component Process as a Pre Phase Item.

Figure 544 Item Group as a Pre Phase Item.

5.

Select File menu » Save.

507

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 10 » Add a Breadcrumb Trail to an Item Group Step-By-Step The following steps show you how to add a new Breadcrumb Trail to an Item Group. 1.

Select Process Editor.

2.

Expand Login Component Process.

3.

Right-click Login Component Header Item Group » Add » Breadcrumb Trail.

4.

Enter Name. Login Component Breadcrumb Trail

5.

Mark Allow Back Navigation.

6.

Mark Save Data on Back.

Figure 545 Add Breadcrumb Trail dialog.

7.

Click OK.

508

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Login Component Breadcrumb Trail is added to the Login Component Header Item Group.

Figure 546 Login Component Breadcrumb Trail in Login Component Header Item Group.

8.

Select File menu » Save.

509

Dr Kevin M Potter Strategy-Dev

FEAtures Process

9.

Right-click Login Component Breadcrumb Trail » Add Level.

10.

Enter Display Text. STEP 1: Login Home Page

11.

Click Phases Select Button.

Figure 547 Add Breadcrumb Level dialog » Details tab.

510

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 12.

Expand Login Component Process.

13.

Select Phase. Login Home Page

Figure 548 Phase Chooser dialog.

14.

Click OK to close the Phase Chooser dialog.

511

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Add Breadcrumb Level dialog is displayed. 15.

Confirm that the Phases property is correctly set. Login Component.Login Home Page

Figure 549 Add Breadcrumb Level dialog » Details tab.

16.

Click OK.

512

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Breadcrumb Level Item is added to the Breadcrumb Trail.

Figure 550 Breadcrumb Trail with a Breadcrumb Level Item.

17.

Select File menu » Save. Test

Look and Feel Test Let’s see what the Breadcrumb Trail and Breadcrumb Level Item are going to look like at run-time. 1.

Right-click Login Component Process » Run.

2.

Close browser.

Figure 551 Run Login Component Process.

513

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Breadcrumb Level Items to the Login Component Breadcrumb Trail. Information You can add Breadcrumb Level Items to Breadcrumb Level Items (as well as to a Breadcrumb Trail Item). This allows you to create an arbitrarily rich hierarchical Breadcrumb Trail structure. 

Information Items shown in green in the following table already exist. These have been included to help you to put Breadcrumb Level Items in the right place within the Breadcrumb Trail. 

Breadcrumb Level Item Breadcrumb Trail Name

Display Text

Phase

Login Component Breadcrumb Trail

STEP 1: Login Home Page

Login Home Page



STEP 2: My Account

My Account



STEP 2: Create A New Account

Create A New Account



STEP 3: Account Created

Account Created



My Account



Table 39 Breadcrumb Level Item.

514

Dr Kevin M Potter Strategy-Dev

STEP 4: My Account

STEP 2: I Forgot My Password

I Forgot My Password



Password Email Sent

STEP 3: Password Email Sent

FEAtures Process

The Login Component Breadcrumb Trail should now have the following structure in Process Editor. 

Figure 552 Login Component Breadcrumb Trail.

515

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Let’s confirm that the Breadcrumb Trail reflects the path that we take through the Login Component Process. The bold text below shows you what the Breadcrumb Trail should look like at each Process Step. 1.

Select Process Editor.

2.

Right-click Login Component Process »Run. STEP 1: Login Home Page

3.

Click the Login To My Account Button. STEP 1: Login Home Page > STEP 2: My Account

4.

Click the Logout Button. STEP 1: Login Home Page

5.

Click Create A New Account Button. STEP 1: Login Home Page > STEP 2: Create A New Account

6.

Click Create Account Button. STEP 1: Login Home Page > STEP 2: Create A New Account > STEP 3: Account Created

7.

Click Goto My Account Button. STEP 1: Login Home Page > STEP 2: My Account (The Breadcrumb Trail works with a hierarchy oriented collection of web pages but not with a network oriented collection of web pages. It gets confused if two or more paths navigate forwards to the same web page.)

8.

Click the Logout Button. STEP 1: Login Home Page

9.

Click I Forgot My Password Button. STEP 1: Login Home Page > STEP 2: I Forgot My Password

10. Click Get A New Password Button. STEP 1: Login Home Page > STEP 2: I Forgot My Password > STEP 3: Password Email Sent 11. Close browser.

Information A Breadcrumb Trail works with a hierarchy oriented collection of web pages but not with a network oriented collection of web pages. It gets confused if two or more paths navigate forwards to the same web page.

516

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 553 Breadcrumb Trail at run-time.

517

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 11 » Add a Note Type Step-By-Step By default, edgeConnect provides you with three types of Note. 

To Do: A message that explains an outstanding task that is part of your solution.



Specification: A message that explains a specific customer specification or requirement.



Comment: A general message that describes part of your solution.

The following steps show you how to add your own Note Type. 1.

Select Project Menu » Notes » Types.

2.

Click the Add button.

3.

Enter Type Name. FEAtures Info

Figure 554 Note Types Properties dialog.

4.

Click OK.

5.

Select File menu » Save.

518

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 12 » Add Notes Step-By-Step The following steps show you how to add Notes to annotate your Solution for Others. Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 1.

Select Process Editor.

2.

Right-click Login Component Process » Add » Note.

3.

Select Note Type. Specification

4.

Enter Note Text. The Login Component Process is designed to help you to learn about Components.

Figure 555 Add Note Properties dialog » Detail tab.

5.

Click OK.

519

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Note is added to the Login Component Process.

Figure 556 Note.

6.

Select File menu » Save.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

520

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Login Component Process » Publish and Broadcast What you need to know The Exercises in this Chapter show you how to publish a Process as a Component and how to broadcast messages from a child Component to a parent solution project at run-time. 

Publish: Publish the Login Component Process as a Component for reuse with parent solution projects. To try out the Component we’ll need to build the Login Solution; a new Process that is part of the FEAtures Hybrid Solution Project. 



Broadcast: Use a Broadcast Rule to send an asynchronous message to a parent solution project at run-time. To try out the Broadcast Rule we’ll need to build the Login Solution; a new Process that is part of the FEAtures Hybrid Solution Project. 

Figure 557 Sketch a Design » Login Component Process » Publish and Broadcast.

521

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Broadcast Rule to an Action Button Step-By-Step The following steps show you how to use the Process Editor to add a Broadcast Rule to an Action Button. 1.

Start Developer.

2.

Select File Menu » Open from Local File.

The Open dialog is displayed. 3.

Navigate to the FEAturesLibrary Project Folder. C:\ECProject\Libraries\FEAturesLibrary

4.

Select the Project File. FEAturesLibrary.ifp

Figure 558 Open (Project) dialog.

5.

Click Open to Open the FEAturesLibrary Project.

522

Dr Kevin M Potter Strategy-Dev

FEAtures Process

6.

Select Window menu » Process Editor.

7.

Expand Login Component Process.

8.

Expand My Account Phase.

9.

Right-click Remember My Name Button » Add » Button Rule » Other.

10.

Enter Rule Name. Broadcast User Name to Parent Process

11.

Select Rule Class. Broadcast Rule

Figure 559 Add Broadcast Rule dialog » Definition tab.

523

Dr Kevin M Potter Strategy-Dev

FEAtures Process

12.

Select Details tab.

13.

Click Broadcast Message ellipsis […] button.

Figure 560 Add Broadcast Rule dialog » Details tab.

524

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Text Editor is displayed. 14.

Click Text Editor ellipsis […] button.

Figure 561 Text Editor.

525

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Value Chooser dialog is displayed. 15.

Expand Data Store tab.

16.

Expand LoginComponentData Data Group.

17.

Select Data Item. UserName

Figure 562 Value Chooser dialog.

18.

Click OK to close the Value Chooser dialog.

526

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Text Editor is displayed. Note that the Data Item is enclosed in $$...$. This is just edgeConnect syntax. 

Figure 563 Text Editor.

19.

Click OK to close Text Editor.

527

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Add Broadcast Rule dialog is displayed. 20.

Confirm that the Broadcast Message property is correctly set. $$LoginComponentData[1].UserName$

Figure 564 Add Broadcast Rule dialog » Details tab.

21.

Click OK.

528

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Broadcast Rule is added to the Remember My Name Button.

Figure 565 Button with a Broadcast Rule.

22.

Select File menu » Save. Best Practice

It is Best Practice to use meaningful Customer and/or Project Specific Rule names that indicate Rule type and purpose.

 Productivity When testing Process Flow you may not always want to enter Answers for All Mandatory Questions. Tip Select Tools » Options » Run/Preview » Mark Disable Mandatory Checking.

529

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Publish a Process as a Component Step-By-Step The following steps show you how to use the Process Editor to publish the Login Component Process as a Component. 1.

Select Process Editor.

2.

Right-click Login Component Process » Properties.

3.

Mark Publish As Component.

Figure 566 Process Properties dialog » Process tab.

530

Dr Kevin M Potter Strategy-Dev

FEAtures Process

4.

Select Component tab.

5.

Enter Comment. The Login Component Outputs UserName, Password and Email Address and uses the FEAturesLibrary Presentation.

Figure 567 Process Properties dialog » Component tab » Component Comment tab.

531

Dr Kevin M Potter Strategy-Dev

FEAtures Process

6.

Select Data Store tab.

7.

Expand LoginComponentData Data Group.

8.

Mark UserName Data Item Out.

9.

Mark Password Data Item Out.

10.

Mark EmailAddress Data Item Out.

Figure 568 Process Properties dialog » Component tab » Data Store tab.

532

Dr Kevin M Potter Strategy-Dev

FEAtures Process

11.

Select Presentation tab.

12.

Mark FEAturesLibraryPresentation Can be used.

13.

Mark FEAturesLibraryPresentation Export All Designs.

Figure 569 Process Properties dialog » Component tab » Presentation tab.

14.

Click OK.

Note that the Login Component Process Icon has changed to indicate that the Process is now a Component.

Figure 570 Process Icon indicates that Process is now a Component.

533

Dr Kevin M Potter Strategy-Dev

FEAtures Process

15.

Select File menu » Save.

16.

Select File menu » Exit.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

534

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Login Process What you need to know The Exercises in this Chapter show you how to build the Login Process. The Login Process enables and demonstrates the use of Components. 

Component Phase: The Login Process encapsulates the complete Login Component Process (contained in the Login Component Library Project) in a single (Login) Component Phase (that belongs to the Login Process) (contained in the FEAtures Hybrid Solution Project). 

Figure 571 Sketch a Design » Login Process.

535

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface The Exercises in this Chapter show you how to build the Login Process. The Login Process enables and demonstrates the use of Components.

Figure 572 Login Home Page Phase.

Figure 573 Create A New Account Phase.

536

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 574 Account Created Phase.

Figure 575 My Account Phase.

537

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 576 I Forgot My Password Phase.

Figure 577 Password Email Sent Phase.

538

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 578 Next Screen Sent Phase.

539

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Override Libraries Folder Location Step-By-Step The following steps show you how to override the Developer Options Properties dialog Libraries (Locations) property for a specific Project. 1.

Start Developer.

2.

Select File menu » Open from Local File.

The Open dialog is displayed. 3.

Navigate to the FEAtures Project Folder. C:\ECProject\Projects\FEAturesHybridSolution

4.

Select the Project File. FEAturesHybridSolution.ifp

Figure 579 Open (Project) dialog.

5.

Click Open to Open the FEAturesHybridSolution Project.

540

Dr Kevin M Potter Strategy-Dev

FEAtures Process

6.

Select Project menu » Properties.

7.

Select Locations tab.

8.

Click the Libraries Select button.

Figure 580 Project Properties dialog » Locations tab.

541

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Select Libraries folder dialog is displayed. 9.

Navigate to folder C:\ECProject.

10.

Select Folder. Libraries

Figure 581 Select Libraries folder dialog » Select folder C:\ECProject\Libraries.

11.

Click Select button to close the Select Libraries folder dialog.

542

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Project Properties dialog is displayed. 12.

Confirm that the Libraries folder location is correctly set. C:\ECProject\Libraries

Figure 582 Project Properties dialog » Locations tab.

13.

Click OK.

543

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Add a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Process. 1.

Select Window menu » Process Editor.

2.

Right-click Processes » Add Process.

3.

Enter Process Name. Login

Figure 583 Add Process dialog.

4.

Click OK.

544

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Login Process is added to the Process Editor tree-structure.

Figure 584 Process Editor » Login Process.

5.

Select File menu » Save.

545

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Add a Component Phase to a Process using the Component Import Wizard Step-By-Step You can add a Component Phase to a Process in one of two ways: 

Component Dialog: Right-click Login Process » Add » Component Phase.



Component Wizard: Right-click Login Process » Import Component » As Phase.

In this Exercise we’ll use the Component Wizard as it is a little easier to work with. In the next Exercise we’ll edit the Component Phase using the Component dialog. The following steps show you how to add the Component Phase using the Component Wizard. 1.

Select Process Editor.

2.

Right-click Login Process » Import Component » As Phase.

Figure 585 Component Import Wizard » Map Component screen.

3.

Click Next.

546

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Choose Component screen is displayed. 4.

Enter Phase Name. Login Component

5.

Click Library Select button.

Figure 586 Component Import Wizard » Choose Component screen.

547

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Select directory and filename dialog is displayed. 6.

Navigate to the FEAtures Library Project Folder. C:\ECProject\Libraries\FEAturesLibrary

7.

Select the FEAtures Library Project File. FEAturesLibrary.ifp

Figure 587 Select directory and filename dialog.

8.

Click Select to select the FEAtures Library Project.

548

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Choose Component screen is displayed. 9.

Confirm that the Library Property is correctly set. $$LIBRARY_HOME$//FEAturesLibrary/FEAturesLibrary.ifp

10.

Confirm that the Login Component is listed in the Available Components table.

Figure 588 Component Import Wizard » Choose Component screen.

11.

Click Next.

549

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Store screen is displayed. We want to map Login Component Solution Data Items (contained in the FEAtures Library Project) to Login Solution Data Items (contained in the FEAtures Solution Project). 12.

Expand LoginComponentData Data Group.

13.

Select LoginComponentData Data Group Mapping.

14.

Select UserName Data Item Mapping. Maps to

15.

Click UserName Data Item ellipsis button.

Figure 589 Component Import Wizard » Data Store screen.

550

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Item Chooser dialog is displayed. 16.

Expand LoginData Data Group.

17.

Expand MappedLoginComponentData Data Group.

18.

Select Data Item. MappedUserName

Figure 590 Data Item Chooser.

19.

Click OK to close the Data Item Chooser dialog.

551

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Store screen is displayed. 20.

Confirm that the UserName Local Data Group/Data Item is correctly set. LoginData[1].MappedLoginComponentData[1].MappedUserName

21.

Select Password Data Item Mapping. Maps to

22.

Click Password Data Item ellipsis button.

Figure 591 Component Import Wizard » Data Store screen.

552

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Item Chooser dialog is displayed. 23.

Expand LoginData Data Group.

24.

Expand MappedLoginComponentData Data Group.

25.

Select Data Item. MappedPassword

Figure 592 Data Item Chooser.

26.

Click OK to close the Data Item Chooser dialog.

553

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Store screen is displayed. 27.

Confirm that the Password Local Data Group/Data Item is correctly set. LoginData[1].MappedLoginComponentData[1].MappedPassword

28.

Select Email Address Data Item Mapping. Maps to

29.

Click Email Address Data Item ellipsis button.

Figure 593 Component Import Wizard » Data Store screen.

554

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Item Chooser dialog is displayed. 30.

Expand LoginData Data Group.

31.

Expand MappedLoginComponentData Data Group.

32.

Select Data Item. MappedEmailAddress

Figure 594 Data Item Chooser.

33.

Click OK to close the Data Item Chooser dialog.

555

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Store screen is displayed. 34.

Confirm that the EmailAddress Local Data Group/Data Item is correctly set. LoginData[1].MappedLoginComponentData[1].MappedEmailAddress

Figure 595 Component Import Wizard » Data Store screen.

35.

Click Next.

556

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Presentation Screen is displayed. This screen allows you to decide whether you want to set the look-and-feel of a Component using Local or Component Designs. On this occasion we won’t change anything on this screen but it doesn’t hurt to take a look.  36.

Expand FEAturesLibraryPresentation.

37.

Expand FEAturesLibraryTheme.

38.

Confirm that all Design mappings are set to Use Local except for FEAturesLibraryBreadcrumbTrailDesign and FEAturesLibraryModalAnswerDesign. You added these to the Component using Live Designer! .

Figure 596 Component Import Wizard » Presentation screen.

Best Practice

It is Best Practice to use Solution Designs rather than create Component Designs. This enables Components to implement Solution specific look-and-feel.



557

Dr Kevin M Potter Strategy-Dev

FEAtures Process

39.

Select Local Presentation Question Design. FEAturesQuestionDesign

Figure 597 Component Import Wizard » Presentation screen.

558

Dr Kevin M Potter Strategy-Dev

FEAtures Process

40.

Select Local Presentation Heading 1 Design. FEAturesHeading1Design

Figure 598 Component Import Wizard » Presentation screen.

559

Dr Kevin M Potter Strategy-Dev

FEAtures Process

41.

Select Local Presentation Action Button Design. FEAturesButtonDesign

Figure 599 Component Import Wizard » Presentation screen.

42.

Click Next.

560

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Wizard Summary screen is displayed.

Figure 600 Component Import Wizard » Wizard Summary screen.

43.

Click Finish.

The Success dialog is displayed.

Figure 601 Success dialog.

44.

Click OK.

561

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Login Component Phase is added to the Login Process.

Figure 602 Process Editor » Login Component Phase.

45.

Select File menu » Save.

562

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Edit a Component Phase using the Component Dialog Step-By-Step The following steps show you how to edit a Component Phase using the Component dialog. 1.

Select Process Editor.

2.

Expand Login Process.

3.

Right-click Login Component Phase » Properties.

4.

Confirm that the Phase Name is correctly set. Login Component

Figure 603 Component Dialog » Properties tab.

563

Dr Kevin M Potter Strategy-Dev

FEAtures Process

5.

Select Component tab.

6.

Select Choose Component tab.

7.

Confirm that the Library Property is correctly set. $$LIBRARY_HOME$//FEAturesLibrary/FEAturesLibrary.ifp

8.

Unmark Stateful Component. We’re unmarking the Stateful Component property so that a Reset Session Data Rule (that you’ll add later on) will easily allow us to get back to the initial Phase (named Login Home Page). The underlying Library Project is still Stateful so we’ll remember the values of Username, Password and Email Address at run-time.

9.

Confirm that the Login Component is listed in the Available Components table.

Figure 604 Component Dialog » Component tab » Choose Component tab.

564

Dr Kevin M Potter Strategy-Dev

FEAtures Process

10.

Select Component Error Handling tab.

11.

Click Specific Error Phase Select button.

Figure 605 Component Dialog » Component tab » Component Error Handling tab.

565

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Error Phase Chooser dialog is displayed. 12.

Expand Error Management Process.

13.

Select Phase. General Error

Figure 606 Error Phase Chooser.

14.

Click OK to close the Error Phase Chooser dialog.

566

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Component Error Handling tab is displayed. 15.

Confirm that the Specific Error Phase property is correctly set. Error Management.General Error

Figure 607 Component Dialog » Component tab » Component Error Handling tab.

567

Dr Kevin M Potter Strategy-Dev

FEAtures Process

16.

Select the Broadcast Message Handling tab. This tab allows you to run rules when your component sends a broadcast message to the parent solution.

17.

Select If Broadcast Message Received. Run Specific Rules

18.

Click Specific Broadcast Rules Select button.

Figure 608 Component Dialog » Component tab » Broadcast Message Handling tab.

568

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Rule Chooser dialog is displayed. 19.

Select Rule. FEAtures Broadcast Rules

Figure 609 Rule Chooser dialog.

20.

Click OK to close the Rule Chooser dialog.

569

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Broadcast Message Handling tab is displayed. 21.

Confirm that the Specific Broadcast Rules property is correctly set. FEAtures Broadcast Rules

Figure 610 Component Dialog » Component tab » Broadcast Message Handling tab.

570

Dr Kevin M Potter Strategy-Dev

FEAtures Process

22.

Select the Data Store tab.

23.

Expand LoginComponentData Data Group.

24.

Confirm that the UserName mapping is correctly set. LoginData[1].MappedLoginComponentData[1].MappedUserName

25.

Confirm that the Password mapping is correctly set. LoginData[1].MappedLoginComponentData[1].MappedPassword

26.

Confirm that the EmailAddress mapping is correctly set. LoginData[1].MappedLoginComponentData[1].MappedEmailAddress

Figure 611 Component Dialog » Component tab » Data Store tab.

571

Dr Kevin M Potter Strategy-Dev

FEAtures Process

27.

Select the Presentation tab.

28.

Expand FEAturesLibraryPresentation.

29.

Expand FEAturesLibraryTheme.

30.

Confirm that all Design mappings are set to Use Local except for FEAturesLibraryBreadcrumbTrailDesign and FEAturesLibraryModalAnswerDesign. You added these to the Component using Live Designer! 

Figure 612 Component Dialog » Component tab » Presentation tab.

572

Dr Kevin M Potter Strategy-Dev

FEAtures Process

31.

Select the Advanced tab. This tab allows you to dynamically load a Component at runtime.

Figure 613 Component Dialog » Component tab » Advanced tab.

32.

Click OK.

33.

Select File menu » Save.

573

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Set Process Properties (the FAST way! ) Step-By-Step Although you can set Initial Phase, Error Phase and other Process Properties using the Process Properties dialog it is much faster to simply drag-drop the Phases that you need onto your Process.  Productivity It is much faster to use drag-drop to set Initial Phase, Error Phase and other Process Properties than Tip to use the Process Properties dialog.

The following steps show you how to set Initial Phase, Error Phase and other Process Properties using drag-drop. 1.

Select Process Editor.

2.

Expand Error Management Process.

3.

Expand Login Process.

4.

Drag-drop Login Component Phase onto Login Process.

5.

Select Set ‘Initial Phase’.

Figure 614 Drag-drop a Phase onto a Process to set a Phase in Process Properties.

6.

Select File menu » Save.

574

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to drag-drop Phases from the Error Management Process onto the Login Process to set Process Properties the FAST way. 

Process Phase Properties Drag Phase from Error Management Process…

Drop onto Login Process As…

General Error

Set ‘Error Phase’

Timeout Error

Set ‘Session Timeout Phase’

Access Violation Error

Set ‘Access Violation Phase’

Table 40 Process Phase Properties.

575

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Login Process and confirm that Login Component Phase really does encapsulate the Login Component Process. See if you can navigate to all Phases by “going on” the following journey. 1.

Select Process Editor.

2.

Right-click Login Process » Run. When you run the Login Process you start on the Login Home Page Phase.

3.

Click the Login To My Account Button to navigate to the My Account Phase.

4.

Click the Logout Button to navigate to the Login Home Page Phase (again).

5.

Click the Create A New Account Button to navigate to the Create A New Account Phase.

6.

Click the Create Account Button to navigate to the Account Created Phase.

7.

Click the Goto My Account Button to navigate to the My Account Phase.

8.

Click the Logout Button to navigate to the Login Home Page Phase (again).

9.

Click the I Forgot My Password Button to navigate to the I Forgot My Password Phase.

10. Click the Get A New Password Button to navigate to the Password Email Sent Phase. 11. Click the Go Back To Login Screen Button to navigate to the Login Home Page Phase (again). 12. Click the Login To My Account Button to navigate to the My Account Phase (again). 13. Click the Goto Next Screen Button to generate a No Next Phase Specified Error. Don’t panic!  The error will disappear once we add a Goto Phase Rule as a Post Phase Rule to the Login Component Phase.  14. Close the Runtime Error dialog. 15. Close browser.

576

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 615 Login Component Login Home Page Phase.

Figure 616 General Error Phase displayed because a No Next Phase error occurs.

577

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 617 Runtime-error dialog showing a No Next Phase error.

578

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 6 » Add a Phase to a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Phase to a Process. 1.

Select Process Editor.

2.

Right-click Login Process » Add » Phase.

3.

Enter Phase Name. Next Screen

Figure 618 Add Phase dialog.

4.

Click OK.

579

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Next Screen Phase is added to the Login Process tree-structure.

Figure 619 Login Process » Next Screen Phase.

5.

Select File menu » Save.

A Phase is just a web page. Preview allows you to see what the Phase (or web page) looks like at run-time. 6.

Right-click Next Screen Phase » Preview.

Figure 620 Preview Next Screen Phase.

OK not very impressive yet, it’s an empty web page ready for us to start adding items to.  7.

Close browser.

580

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 7 » Add a Question to a Phase Step-By-Step The following steps show you how to use the Process Editor to add a new Question to a Phase. 1.

Select Process Editor.

2.

Expand Login Process.

3.

Right-click Next Screen Phase » Add » Question.

4.

Enter Display Text. User Name

Figure 621 Add Question dialog » Question tab.

581

Dr Kevin M Potter Strategy-Dev

FEAtures Process

5.

Select Answer tab.

6.

Unmark Mandatory.

7.

Mark Read Only.

8.

Click Data Item Select button.

Figure 622 Add Question dialog » Answer tab.

582

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Item Chooser dialog is displayed. 9.

Expand LoginData Data Group.

10.

Expand MappedLoginComponentData Data Group.

11.

Select Data Item. MappedUserName

Figure 623 Data Item Chooser dialog.

12.

Click OK to close the Data Item chooser dialog.

583

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Add Question dialog is displayed. 13.

Confirm that the Data Item property is correctly set. LoginData[1].MappedLoginComponentData[1].MappedUserName

Figure 624 Add Question dialog » Answer tab.

14.

Click OK.

584

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Question is added to the Next Screen Phase.

Figure 625 User Name Question in Next Screen Phase.

15.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the Next Screen Phase to see what the Question looks like at run-time.  1.

Right-click Next Screen Phase » Preview.

2.

Close browser.

Figure 626 Preview Next Screen Phase.

585

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Questions to the Next Screen Phase.

Question Phase

Display Text

Mandatory

Read Only Data Item

Next Screen Password

No

Yes

LoginData[1].MappedLoginComponentData[1]. MappedPassword

Next Screen Email Address

No

Yes

LoginData[1].MappedLoginComponentData[1]. MappedEmailAddress

Table 41 Question.

The Next Screen Phase now has Questions. 

Figure 627 Next Screen Phase Questions.

586

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Phase and confirm that all Questions are correctly displayed. 

Next Screen

Figure 628 Next Screen Phase.

587

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 8 » Add a Button to a Phase Step-By-Step The following steps show you how to add a new Button to the Next Screen Phase. 1.

Select Process Editor.

2.

Expand Login Process.

3.

Right-click Next Screen Phase » Add » Button.

4.

Select Button Type. Action

5.

Enter Action Command. Logout

Figure 629 Add Button dialog.

6.

Click OK.

588

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Action Button is added to the Login Process Next Screen Phase.

Figure 630 Logout Action Button.

7.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the Next Screen Phase to see what the Button looks like at run-time.  1.

Right-click Next Screen Phase » Preview.

2.

Close browser.

Figure 631 Preview Next Screen Phase.

589

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Add a Goto Phase Rule to a Component Phase Step-By-Step So far, whenever we click the Goto Next Screen Button on the My Account Phase that belongs to the Login Component Process, we generate a No Next Phase Specified Error.  To stop this error from occurring, we can add a Goto Phase Rule as a Post Phase Rule to the Login Component Phase; the Rule will take us to the Next Screen Phase.  The following steps show you how to use the Process Editor to add a new Goto Phase Rule to the Login Component Phase as a Post Phase Rule. 1.

Select Process Editor.

2.

Expand Login Process.

3.

Right-click Login Component Phase » Add » Post Phase Rule » Goto Phase Rule.

4.

Enter Rule Name. Goto Phase Next Screen

5.

Click the Phase Name Select button.

Figure 632 Add Goto Phase Rule dialog » Phase Details tab.

590

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 6.

Expand Login Process.

7.

Select Phase. Next Screen

Figure 633 Phase Chooser dialog.

8.

Click OK to close the Phase Chooser dialog.

591

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 9.

Confirm that the Phase Name is correctly set. Login.Next Screen

Figure 634 Add Goto Phase Rule dialog » Phase Details tab.

10.

Click OK.

592

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Login Component Phase.

Figure 635 Phase with a Post Phase Goto Phase Rule.

11.

Select File menu » Save. Best Practice

It is Best Practice to use meaningful Customer and/or Project Specific Rule names that indicate Rule type and purpose.

 Productivity When testing Process Flow you may not always want to enter Answers for All Mandatory Questions. Tip Select Tools » Options » Run/Preview » Mark Disable Mandatory Checking.

593

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Login Process and confirm that the No Next Phase Specified Error is no longer triggered when we click the Goto Next Screen Button. See if you can navigate to all Phases by “going on” the following journey. 1.

Select Process Editor.

2.

Right-click Login Process » Run. When you run the Login Process you start on the Login Home Page Phase.

3.

Click the Login To My Account Button to navigate to the My Account Phase.

4.

Click the Goto Next Screen Button to exit the Login Component Process and navigate to the Next Screen Phase. Success! 

5.

Close browser.

Figure 636 Navigate from Component to Solution.

594

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Goto Phase Rules to Action Buttons as Button Rules.

Goto Phase Rule Phase

Action Button

Rule Name

Operation Type

Next Screen

Logout

Goto Phase Login Component

Go Back to a Named Login Phase Component

Table 42 Goto Phase Rule.

The Goto Phase Login Component Rule lets us re-enter the Component Phase at any time. 

Figure 637 Goto Phase Login Component Goto Phase Rule.

595

Dr Kevin M Potter Strategy-Dev

Phase Name

FEAtures Process

Test

Functionality Test Run the Login Process and confirm that you can now navigate out of and back into the Component Phase. 1.

Select Process Editor.

2.

Right-click Login Process » Run. When you run the Login Process you start on the Login Home Page Phase.

3.

Enter a User Name. Joe Bloggs

4.

Enter a Password. 1234

5.

Click the Login To My Account Button to navigate to the My Account Phase.

6.

Confirm that My User Name Question Answer is set. Joe Bloggs

7.

Click the Goto Next Screen Button to navigate out of the Component Phase and to the Next Screen Phase.

8.

Confirm that User Name Question Answer is set. Joe Bloggs

9.

Confirm that Password Question Answer is set. 1234

10. Click the Logout Button to navigate into the Component Phase and to the My Account Phase. 11. Confirm that My User Name Question Answer is set. Joe Bloggs 12. Click the Logout Button to navigate to the Login Home Page Phase. 13. Confirm that User Name Question Answer is set. Joe Bloggs 14. Confirm that Password Question Answer is set. 1234 15. Close browser.

596

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 638 Login Home Page Phase » Enter User Name and Password.

Figure 639 Next Screen Phase » View User Name and Password.

597

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 10 » Add a Heading to a Phase and Send a Broadcast Message Step-By-Step The following steps show you how to add a new Heading to a Phase and finally allow you to see if you can send a Broadcast Message from the (child) Login Component Process to the (parent) Login Process.  1.

Select Process Editor.

2.

Expand Login Process.

3.

Expand Next Screen Phase.

4.

Right-click User Name Question » Insert » Heading.

5.

Enter Display Text. Hello

6.

Click Display Text ellipsis […] button.

Figure 640 Insert Heading dialog » Heading tab.

598

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Text Editor is displayed. 7.

Enter a <space> after Hello.

8.

Click Text Editor ellipsis […] button.

Figure 641 Text Editor.

599

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Value Chooser is displayed. 9.

Expand LoginData Data Group.

10.

Select Data Item. NextScreenHeading

Figure 642 Value Chooser dialog.

11.

Click OK to close the Value Chooser dialog.

600

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Text Editor is displayed.

Figure 643 Text Editor.

12.

Click OK to close the Text Editor.

601

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Add Heading dialog is displayed. 13.

Confirm that the Display Text property is correctly set. Hello $$LoginData[1].NextScreenHeading$

14.

Select Heading Level. Level 1

Figure 644 Insert Heading dialog » Heading tab.

15.

Click OK.

602

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Heading is added to the Next Screen Phase.

Figure 645 Heading added to Next Screen Phase.

16.

Select File menu » Save.

603

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Let’s Run the Login Process to see what the Heading looks like at run-time and send a Broadcast Message!  1.

Select Process Editor.

2.

Right-click Login Process » Run. When you run the Login Process you start on the Login Home Page Phase.

3.

Enter a User Name. Joe Bloggs

4.

Click the Login To My Account Button to navigate to the My Account Phase.

5.

Confirm that My User Name Question Answer is set. Joe Bloggs

6.

Click the Remember My Name Button.

7.

Click the Goto Next Screen Button to navigate out of the Component Phase and to the Next Screen Phase.

8.

Confirm that the Next Screen Heading is set. Hello JOE BLOGGS

9.

Close browser.

Figure 646 Next Screen Phase.

604

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 11 » Add a Reset Session Data Rule Step-By-Step In an earlier exercise we unmarked the Stateful Component property that belongs to the Component Phase. This makes it easy for us to reset the Component Phase stack using a Reset Session Data Rule. Consequently we can start on the initial Phase (named Login Home Page). The underlying Library Project is still Stateful so we’ll remember the values of Username, Password and Email Address at run-time. The following steps show you how to use the Process Editor to add a Reset Session Data Rule to a Button. 1.

Select Process Editor.

2.

Expand Login Process.

3.

Expand Next Screen Phase.

4.

Right-click Logout Button » Add » Button Rule » Reset Session Data Rule.

5.

Enter Rule Name. Reset the Login Component Phase Stack

6.

Select Components tab.

7.

Click Reset Components Select button.

Figure 647 Add Reset Session Data Rule dialog » Components tab.

605

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Component Chooser dialog is displayed. 8.

Expand Login Process.

9.

Select Component Phase. Login Component

Figure 648 Component Chooser dialog.

10.

Click OK to close the Component Chooser dialog.

606

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Reset Session Data Rule dialog is displayed. 11.

Confirm that the Reset Components property is correctly set. Login.Login Component

Figure 649 Add Reset Session Data Rule dialog » Components tab.

12.

Click OK.

607

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Reset Session Data Rule is added to the Button.

Figure 650 Process Editor » Reset the Login Component Phase Stack Reset Session Data Rule.

13.

Select File menu » Save.

608

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Login Process and confirm that when you navigate back into the Login Component Phase you go straight to the Login Home Page (Initial) Phase. 1.

Select Process Editor.

2.

Right-click Login Process » Run. When you run the Login Process you start on the Login Home Page Phase.

3.

Enter a User Name. Joe Bloggs

4.

Click the Login To My Account Button to navigate to the My Account Phase.

5.

Confirm that My User Name Question Answer is set. Joe Bloggs

6.

Click the Goto Next Screen Button to navigate out of the Component Phase and to the Next Screen Phase.

7.

Confirm that User Name Question Answer is set. Joe Bloggs

8.

Click the Logout Button to navigate into the Component Phase and to the Login Home Page Phase. That’s exactly what we want the Reset Session Data Rule to do. 

9.

Confirm that User Name Question Answer is set. Joe Bloggs

10. Close browser.

Figure 651 Login Home Page Phase » User Name value remembered.

609

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 12 » Open Component and Unmark Stateful Property Step-By-Step In the last exercise we added a Reset Session Data Rule to reset a Component Stack. Because the underlying Library Project is Stateful the Component can still remember previously set user data. In this exercise we’ll finish off our tour of Components by making the Library Project stateless and confirming that Data is no longer remembered between visits to the Component. The following steps show you how to use the Open Component command and how to unmark the Library Project Stateful property. 1.

Select Process Editor.

2.

Expand Login Process.

3.

Right-click Login Component Phase » Open Component.

A new instance of Developer Opens to show the FEAturesLibrary Project that contains the original Login Component Process.

Figure 652 New Instance of Developer showing FEAturesLibrary Project.

610

Dr Kevin M Potter Strategy-Dev

FEAtures Process

4.

Select Project menu » Properties.

5.

Unmark Stateful Library property.

Figure 653 FEAtures Library Project » Project Properties dialog.

6.

Click OK.

7.

Select File menu » Save.

8.

Select File menu » Exit. The Instance of Developer that contains the FEAtures Library Project is closed. The Instance of Developer that contains the FEAtures Solution Project is still open.

611

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Login Process and confirm that when you navigate back into the Login Component Phase you go straight to the Login Home Page (Initial) Phase …and more importantly previous data is no longer remembered!  1.

Select Process Editor.

2.

Right-click Login Process » Run. When you run the Login Process you start on the Login Home Page Phase.

3.

Enter a User Name. Joe Bloggs

4.

Click the Login To My Account Button to navigate to the My Account Phase.

5.

Confirm that My User Name Question Answer is set. Joe Bloggs

6.

Click the Goto Next Screen Button to navigate out of the Component Phase and to the Next Screen Phase.

7.

Confirm that User Name Question Answer is set. Joe Bloggs

8.

Click the Logout Button to navigate into the Component Phase and to the Login Home Page Phase.

9.

Confirm that User Name Question Answer no longer set. That’s exactly what we want! 

10. Close browser.

Figure 654 Login Home Page Phase » User Name value forgotten.

612

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 13 » Link Header and Footer to a Process Step-By-Step The following steps show you how to Link the Header and Footer (Item Groups) that you previously built to the Login Process.

Figure 655 Link Header and Footer to Login Process.

Productivity Linking is very useful when you want to reuse an item in several different places. Change the Tip original; the change is automatically reflected across all linked items.

613

Dr Kevin M Potter Strategy-Dev

FEAtures Process

1.

Select Process Editor.

2.

Expand the Header and Footer Process.

3.

Right-click Header Item Group » Copy.

Figure 656 Copy Header Item Group.

4.

Right-click Login Process » Link » As Pre Phase Item.

Figure 657 Link Header Item Group.

614

Dr Kevin M Potter Strategy-Dev

FEAtures Process

5.

Select Header and Footer Process.

6.

Right-click Footer Item Group » Copy.

Figure 658 Copy Footer Item Group.

7.

Right-click Login Process » Link » As Post Phase Item.

Figure 659 Link Footer Item Group.

8.

Select File menu » Save.

615

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Run the Login Process to see what the Header and Footer look like at run-time.  1.

Select Process Editor.

2.

Right-click Login Process » Run.

3.

Confirm that the Header and Footer Item Groups are displayed.

4.

Close browser.

Figure 660 Login solution with Header and Footer.

616

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 14 » Add Login to Home Page Step-By-Step The following steps show you how to use the Process Editor to add the Login Process to the Home Page Process. 1.

Select Process Editor.

2.

Expand Header and Footer Process.

3.

Expand Header Item Group.

4.

Expand FEAtures Menu.

5.

Expand Solutions Menu Item.

6.

Right-click Login Menu Item » Add » Menu Rule » Goto Phase Rule.

7.

Enter Rule Name. Goto Phase Login Component

8.

Click the Phase Name Select button.

Figure 661 Add Goto Phase Rule dialog » Phase Details tab.

617

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 9.

Expand Login Process.

10.

Select Phase. Login Component

Figure 662 Phase Chooser dialog.

11.

Click OK to close the Phase Chooser dialog.

618

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 12.

Confirm that the Phase Name is correctly set. Login.Login Component

Figure 663 Add Goto Phase Rule dialog » Phase Details tab.

13.

Click OK.

619

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Login Menu Item. 14.

Copy Goto Phase Login Component Rule.

Figure 664 Menu Item with a Goto Phase Rule.

620

Dr Kevin M Potter Strategy-Dev

FEAtures Process

We want to Link the Goto Phase Rule to the “Find Out More” button that belongs to the FEAtures Home Page Login topic!  So… 15.

Expand Home Page Process.

16.

Expand Home Page Phase.

17.

Right-click Login “Find Out More” Button » Link.

The Goto Phase Rule is now linked to the Find Out More Button.

Figure 665 Goto Phase Rule linked to a Button.

18.

Select File menu » Save.

621

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Home Page Process and confirm that you can now navigate to the Login Process. See if you can navigate from Process to Process by “going on” the following journey. 1.

Select Process Editor.

2.

Right-click Home Page Process » Run. When you run the Home Page Process you start on the Home Page Phase.

3.

Open the Solutions Menu.

4.

Click the Login Menu Item to navigate to the Login Process.

5.

Click the Home Page Button (in the Footer) to navigate to the Home Page Process (again).

6.

Click the Find Out More (Login Topic) Button to navigate to the Login Process (again).

7.

Click the Home Page Button (in the Footer) to navigate to the Home Page Process (again).

8.

Close browser.

622

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 15 » Functionality Test with Process Analyser Component Stack Step-By-Step The following steps show you how to use the Process Analyser and Process Editor to confirm the functionality of a Process that contains a Component Phase. 1.

Mark Process Analyser Details button on the Developer Toolbar to display Process Analyser.

Figure 666 Toolbar » Process Analyser Details.

623

Dr Kevin M Potter Strategy-Dev

FEAtures Process

2.

Select Window menu » Process Editor.

3.

Position Process Analyser below Process Editor.

4.

Using Process Editor expand the Login Business Process.

5.

Using Process Analyser select the Component Stack tab.

Figure 667 Process Editor and Process Analyser.

624

Dr Kevin M Potter Strategy-Dev

FEAtures Process

6.

Mark Run Options: Process Analyser button on the Developer Toolbar.

Figure 668 Toolbar » Run Options » Run with analyser.

7.

Right-click Login Process » Run With » Analyser.

The Login Component Login Home Page Phase (or web page) is displayed.

Figure 669 Login Component Login Home Page Phase.

625

Dr Kevin M Potter Strategy-Dev

FEAtures Process

8.

Select Developer.

9.

Confirm that the Login Component Phase is highlighted in Process Editor.

10.

Confirm that the Process Analyser Component Stack shows that the solution is invoking the Login Component Process contained in the FEAturesLibrary Project.

Figure 670 Process Editor and Process Analyser at run-time.

626

Dr Kevin M Potter Strategy-Dev

FEAtures Process

11.

Select browser.

12.

Click Login To My Account Button to navigate to the My Account Phase.

Figure 671 Login Component My Account Phase.

13.

Click Goto Next Screen Button to exit the Login Component Process, navigate to the Login (parent) Process and display the Next Screen Phase.

Figure 672 Login Process Next Screen Phase.

627

Dr Kevin M Potter Strategy-Dev

FEAtures Process

14.

Select Developer.

15.

Confirm that the Next Screen Phase is highlighted in Process Editor.

16.

Confirm that the Process Analyser Component Stack shows that the solution is invoking the FEAturesHybridSolution (parent) Project.

Figure 673 Process Editor and Process Analyser at run-time.

628

Dr Kevin M Potter Strategy-Dev

FEAtures Process

17.

Close browser.

18.

Click Process Analyser » Stop Analyser toolbar button.

Figure 674 Process Analyser Stop button.

19.

Close Process Analyser window.

Debugging Process Analyser provides a Component Phase Stack View that allows you to monitor the Phase Stack as you use Goto Phase Rules to move into and out of Components as you journey through Tip your multi-Component solution. This can help you to debug navigation issues. 

629

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 16 » Add Notes Step-By-Step The following steps show you how to add Notes to annotate your solution for others. Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 1.

Select Process Editor.

2.

Right-click Login Process » Add » Note.

3.

Select Note Type. Specification

4.

Enter Note Text. The Login Process is designed to help you to learn about Components.

Figure 675 Add Note Properties dialog » Detail tab.

5.

Click OK.

630

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Note is added to the Login Process.

Figure 676 Note.

6.

Select File menu » Save.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

631

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Table Process What you need to know The Exercises in this Chapter show you how to build the FEAtures Table Business Process. The Table Process has the following items. 

Header and Footer: You are going to Copy and Link the Header and Footer solution to the Table solution. You are also going to add a Table specific footer that will contain a “navigation” Button panel; in conjunction with Goto Phase Rules the Button panel allows you to navigate from Phase to Phase.



Phase and Phase Items: The Table Process is made up of 6 Phases. Each Phase contains Items that you should already be familiar with  such as Headings, Questions, Menus and Buttons. Nothing new here… but… we need these items to allow us to focus on this examples main raison d'être – learning about Tables. 

Figure 677 Sketch a Design » Table Process.

632

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface The Exercises in this Chapter show you how to build the FEAtures Table Business Process.

Figure 678 Table Home Page web page.

Figure 679 Simple Table web page.

633

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 680 Linear Table web page.

Figure 681 Data Grid Table web page.

634

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 682 Nested Table page.

635

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Process. 1.

Start Developer.

2.

Select File menu » C:/ECProject/Projects/FEAturesHybridSolution/FEAturesHybridSolution.ifp.

3.

Select Window menu » Process Editor.

4.

Right-click Processes root node » Add Process.

5.

Enter Process Name. Table

Figure 683 Add Process dialog » Process tab.

6.

Click OK.

636

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Table Process is added to the Process Editor tree-structure.

Figure 684 Process Editor » Table Process.

7.

Select File menu » Save.

637

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Add a Rules Only Phase to a Process Step-By-Step The following steps show you how to add the Initialise Table Rules Only Phase to the Table Process. 1.

Select Process Editor.

2.

Right-click Table Process » Add » Rules Only Phase.

3.

Enter Phase Name. Initialise Table

Figure 685 Add Rules Only Phase dialog » Properties tab.

4.

Click OK.

638

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Initialise Table Rules Only Phase is added to the Table Process tree-structure.

Figure 686 Table Process » Initialise Table Rules Only Phase.

5.

Select File menu » Save.

639

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Add a Phase to a Process Step-By-Step The following steps show you how to add the Table Home Page web page (or Phase) to the Table Process. 1.

Select Process Editor.

2.

Right-click Table Process » Add » Phase.

3.

Enter Phase Name. Table Home Page

Figure 687 Add Phase dialog » Properties tab.

4.

Click OK.

640

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Table Home Page Phase is added to the Table Process tree-structure.

Figure 688 Table Process » Table Home Page Phase.

5.

Select File menu » Save. Test

Look and Feel Test A Phase is just a web page. Preview allows you to see what the Phase (or web page) looks like at run-time.  1.

Right-click Table Home Page Phase » Preview.

2.

Close browser.

Figure 689 Preview Table Home Page Phase.

641

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Phases to the Table Process.

Phase Process Name

Phase Name

Table

Simple Table

Table

Linear Table

Table

Data Grid Table

Table

Nested Table

Table 43 Phase.

The Table Process now has some Phases. 

Figure 690 Table Process Phases.

642

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Set Process Properties (the FAST way! ) Step-By-Step Although you can set Initial Phase, Error Phase and other Process Properties using the Process Properties dialog it is much faster to simply drag-drop the Phases that you need onto your Process.  Productivity It is much faster to use drag-drop to set Initial Phase, Error Phase and other Process Properties than Tip to use the Process Properties dialog.

The following steps show you how to set Initial Phase, Error Phase and other Process Properties using drag-drop. 1.

Select Process Editor.

2.

Expand Error Management Process.

3.

Expand Table Process.

4.

Drag-drop Initialise Table Phase onto Table Process.

5.

Select Set ‘Initial Phase’.

Figure 691 Drag-drop a Phase onto a Process to set a Phase in Process Properties.

6.

Select File menu » Save.

643

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to drag-drop Phases from the Error Management Process onto the Table Process to set Process Properties the FAST way. 

Process Phase Properties Drag Phase from Error Management Process…

Drop onto Table Process As…

General Error

Set ‘Error Phase’

Timeout Error

Set ‘Session Timeout Phase’

Access Violation Error

Set ‘Access Violation Phase’

Table 44 Process Phase Properties.

644

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Add a Heading to a Phase Step-By-Step The following steps show you how to add a new Heading to a Phase. 1.

Select Process Editor.

2.

Expand Table Process.

3.

Right-click Table Home Page Phase » Add » Heading.

4.

Enter Display Text. Selected Customers

5.

Select Heading Level. Level 1

Figure 692 Add Heading dialog » Heading tab.

6.

Click OK.

645

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Heading is added to the Table Home Page Phase.

Figure 693 Selected Customers Heading.

7.

Select File menu » Save.

646

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Table Home Page Phase to see what the Heading looks like at run-time.  1.

Right-click Table Home Page Phase » Preview.

2.

Close browser.

Figure 694 Preview Table Home Page Phase.

647

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 6 » Add a Data Group to a Phase as a Table Step-By-Step The following steps show you how to use a Data Group to Create a Table. 1.

Select Window menu » Data Store Editor.

2.

Select Window menu » Process Editor.

3.

Position Editors side-by-side.

4.

Using Data Store Editor expand the TableAndChartData Data Group.

5.

Using Data Store Editor expand the CustomerData Data Group.

6.

Using Process Editor expand the Table Process.

Figure 695 Data Store Editor and Process Editor.

648

Dr Kevin M Potter Strategy-Dev

FEAtures Process

7.

Drag the CustomerData Data Group onto the Simple Table Phase.

8.

Select Generate Table Within.

9.

Expand the Simple Table Phase.

10.

Expand the CustomerData Table (in the Simple Table Phase).

Figure 696 Drag CustomerData Data Group onto Simple Table Phase to create a new Table.

Information The Generate Table Within option is only available when the Data Group Set Maximum Instances property is unmarked or when the Data Group Set Maximum Instances property is marked and the Data Group Maximum Instances property value is greater than 1 (>1).

11.

Select File menu » Save.

649

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Simple Table Phase and see what the Table Display Item looks like at run-time.  1.

Right-click Simple Table Phase » Preview.

2.

Confirm that the (empty) Table is displayed.

3.

Close browser.

Figure 697 Simple Table Phase at run-time.

650

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor and Data Store Editor to drag-drop the following Data Groups as Tables onto Table Process Phases.

Table Data Store Editor Data Group

Process Editor Phase

Generate Option

CustomerData

Linear Table

Generate Table Within

CustomerData

Data Grid Table

Generate Table Within

CustomerData

Nested Table

Generate Nested Tables Within

SelectedCustomerData

Table Home Page

Generate Table Within

Table 45 Table.

651

Dr Kevin M Potter Strategy-Dev

FEAtures Process

You have now used Data Groups to create Tables. 

Figure 698 Process Editor » Tables.

652

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Table Process Phases to see what the Tables look like at run-time.  

Linear Table.



Data Grid Table.



Nested Table.

For now they all look the same! 

Figure 699 Preview Linear Table Phase, Data Grid Table Phase and Nested Table Phase. (For now they all look the same!).

653

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 7 » Edit Table Properties Step-By-Step The following steps show you how to use Process Editor to Edit Table Properties. 1.

Select Process Editor.

2.

Expand Table Process.

3.

Expand Simple Table Phase.

4.

Right-click CustomerData Table » Properties.

5.

Click Selected row Data Item Select button.

Figure 700 Table Properties dialog » Table tab.

654

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Item Chooser dialog is displayed. 6.

Expand TableData Data Group.

7.

Expand CurrentIndexData Data Group.

8.

Select Data Item. OneIndex

Figure 701 Data Item Chooser dialog.

9.

Click OK to close the Data Item Chooser dialog.

655

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Table Properties dialog is displayed. 10.

Confirm that the Selected row Data Item property is correctly set. TableHelperData[1].CurrentIndexData[1].OneIndex

11.

Unmark Auto Selector.

Figure 702 Table Properties dialog » Table tab.

12.

Click OK.

656

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to edit the following Tables that belong to the Table Process.

Table Phase

Table

Multi-select Rows Selected row Data Item

Auto Selector

Linear Table

CustomerData

No

OneIndex

No

Data Grid Table

CustomerData

Yes

ManyIndexes

No

Nested Table

CustomerData

No

OneIndex

No

Table 46 Table.

657

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 8 » Add an Item Group to a Process as a Post Phase Item Step-By-Step The following steps show you how to add a new Item Group to a Process as a Post Phase Item. We are adding an Item Group so that we can (for lack of a better word) group all footer Items together. Best Practice



It is Best Practice to use Item Groups to (for lack of a better word) group other Process Items together. This will make it easy for you to copy-paste or copy-link related items, makes it easier to navigate in the Process Editor tree structure and is also simply good housekeeping. 

1.

Select Process Editor.

2.

Right-click Table Process » Add » Post Phase Item » Item Group.

3.

Enter Item Group Name. Table Footer

Figure 703 Add Item Group dialog » Item Group tab.

4.

Click OK.

658

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Table Footer Item Group is added to the Table Process as a Post Phase Item.

Figure 704 Item Group as a Post Phase Item.

5.

Select File menu » Save.

659

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Add a Question to a Phase Step-By-Step The following steps show you how to use the Process Editor to add a new Question to a Phase. 1.

Select Process Editor.

2.

Expand Table Process.

3.

Right-click Linear Table Phase » Add » Question.

4.

Enter Display Text. Enter Last Name

Figure 705 Add Question dialog » Question tab.

660

Dr Kevin M Potter Strategy-Dev

FEAtures Process

5.

Select Answer tab.

6.

Unmark Mandatory.

7.

Unmark Read Only.

8.

Click Data Item Select button.

Figure 706 Add Question dialog » Answer tab.

661

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Item Chooser dialog is displayed. 9.

Expand TableData Data Group.

10.

Expand FilterData Data Group.

11.

Select Data Item. FilterByLastName

Figure 707 Data Item Chooser dialog.

12.

Click OK to close the Data Item chooser dialog.

662

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Add Question dialog is displayed. 13.

Confirm that the Data Item property is correctly set. TableData[1].FilterData[1].FilterByLastName

Figure 708 Add Question dialog » Answer tab.

14.

Click OK.

663

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Question is added to the Linear Table Phase.

Figure 709 Enter Last Name Question in Linear Table Phase.

15.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the Linear Table Phase to see what the Question looks like at run-time.  1.

Right-click Linear Table Phase » Preview.

2.

Close browser.

Figure 710 Preview Linear Table Phase.

664

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to EDIT the following Questions that belong to the CustomerData Table on the Linear Table Phase.

Question Phase

Table

Display Text

Mandatory

Read Only

Linear Table CustomerData

FirstName

No

Yes

Linear Table CustomerData

LastName

No

Yes

Linear Table CustomerData

Age

No

Yes

Linear Table CustomerData

Salary

No

Yes

Table 47 Question.

The Linear Table Phase CustomerData Table Questions are now ALL non-Mandatory and Read-only. 

Figure 711 Linear Table Phase CustomerData Table Questions.

665

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 10 » Add a Button Step-By-Step The following steps show you how to add a new Button to the Table Footer Item Group. 1.

Select Process Editor.

2.

Expand Table Process.

3.

Right-click Table Footer Item Group » Add » Button.

4.

Select Button Type. Action

5.

Enter Action Command. (This is just the caption that is displayed on the Button). Simple

Figure 712 Add Button dialog » Button tab.

6.

Click OK.

666

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Action Button is added to the Table Footer Item Group.

Figure 713 Simple Action Button.

7.

Select File menu » Save.

667

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Table Home Page Phase to see what the Button looks like at run-time.  1.

Right-click Table Home Page Phase » Preview.

2.

Close browser.

Figure 714 Preview Table Home Page Phase.

668

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Buttons to Items that belong to a Process or to a Phase.

Button Process or Phase

Add to Item

Button Type

Action Command

Table Process

Table Footer Item Group

Action

Linear

Table Process

Table Footer Item Group

Action

Data Grid

Table Process

Table Footer Item Group

Action

Nested

Table Process

Table Footer Item Group

Action

Select Customer

Linear Table Phase

CustomerData Table

Action

Select Customer

Linear Table Phase

Linear Table Phase

Action

Search

Table 48 Button.

669

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Table Process now has some Buttons.

Figure 715 Table Process Buttons.

670

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Preview the following Table Process Phases to see what the Buttons look like at run-time.  

Table Home Page.



Linear Table.

Figure 716 Table Home Page Phase.

Figure 717 Linear Table Phase.

671

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 11 » Add a Menu to a Table Step-By-Step The following steps show you how to add a new Menu to a Table. 1.

Select Process Editor.

2.

Expand Table Process.

3.

Expand Simple Table Phase.

4.

Right-click CustomerData Table » Add » Menu.

5.

Enter Name. Table Menu

Figure 718 Add Menu dialog » Details tab.

6.

Click OK.

672

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Table Menu is added to the CustomerData Table.

Figure 719 Table Menu in CustomerData Table.

7.

Select File menu » Save.

673

Dr Kevin M Potter Strategy-Dev

FEAtures Process

8.

Right-click Table Menu » Add Menu Item.

9.

Enter Display Text. Options

Figure 720 Add Menu Item dialog » Menu Item tab.

10.

Click OK.

674

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Options Menu Item is added to the Table Menu.

Figure 721 Options Menu Item.

11.

Select File menu » Save.

675

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Menu Items to the Table Menu. Information You can add Menu Items to Menu Items (as well as to a Menu). This allows you to create an arbitrarily rich hierarchical menu structure. 

Information Items shown in green in the following table already exist. These have been included to help you to put Menu Items in the right place within the Menu. 

Menu Item Menu Name

Display Text

Table Menu

Options 

Add Customer



Delete Customer

Table 49 Menu Item.

676

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Table Process Table Menu should now have the following structure. 

Figure 722 Table Process Table Menu.

677

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 12 » Add a Goto Phase Rule Step-By-Step The following steps show you how to use the Process Editor to add a new Goto Phase Rule to the Initialise Table Rules Only Phase. 1.

Select Process Editor.

2.

Expand Table Process.

3.

Right-click Initialise Table Rules Only Phase » Add » Rule » Goto Phase Rule.

4.

Enter Rule Name. Goto Phase Table Home Page

5.

Click the Phase Name Select button.

Figure 723 Add Goto Phase Rule dialog » Phase Details tab.

678

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 6.

Expand Table Process.

7.

Select Phase. Table Home Page

Figure 724 Phase Chooser dialog.

8.

Click OK to close the Phase Chooser dialog.

679

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 9.

Confirm that the Phase Name property is correctly set. Table.Table Home Page

Figure 725 Add Goto Phase Rule dialog » Phase Details tab.

10.

Click OK.

680

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Initialise Table Rules Only Phase.

Figure 726 Rules Only Phase with a Goto Phase Rule.

11.

Select File menu » Save. Best Practice

It is Best Practice to use meaningful Customer and/or Project Specific Rule names that indicate Rule type and purpose.

 Productivity When testing Process Flow you may not always want to enter Answers for All Mandatory Questions. Tip Select Tools » Options » Run/Preview » Mark Disable Mandatory Checking.

681

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test with Process Analyser Run the Table Process and use Process Analyser to confirm that you can now navigate from the Initialise Table Rules Only Phase to the Table Home Page Phase.  1.

Mark Process Analyser Details button on the Developer Toolbar to display Process Analyser.

2.

Mark Run Options: Process Analyser button on the Developer Toolbar.

3.

Select Window menu » Process Editor.

4.

Position Process Analyser below Process Editor.

5.

Using Process Editor expand the Table Business Process.

6.

Using Process Analyser select the Phase Stack tab.

7.

Right-click Table Process » Run With » Analyser.

8.

Select Developer.

9.

Use Process Editor and Process Analyser to confirm that you are on the Table Home Page Phase.

10. Close browser. 11. Click Process Analyser » Stop Analyser toolbar button. 12. Close Process Analyser.

Figure 727 Process Editor and Process Analyser at run-time.

682

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Goto Phase Rules to Buttons as Button Rules.

Goto Phase Rule Item Group or Phase

Button Name Rule Name

Operation Type

Phase Name

Table Footer Item Group

Simple

Goto Phase Simple Table

Go Forward to a Named Phase

Simple Table

Table Footer Item Group

Linear

Goto Phase Linear Table

Go Forward to a Named Phase

Linear Table

Table Footer Item Group

Data Grid

Goto Phase Data Grid Table

Go Forward to a Named Phase

Data Grid Table

Table Footer Item Group

Nested

Goto Phase Nested Table

Go Forward to a Named Phase

Nested Table

Table Footer Item Group

Select Customer

Goto Phase Table Home Page Go Back to a Named Phase

Table Home Page

Linear Table Phase Select Customer

Goto Phase Table Home Page Go Back to a Named Phase

Table Home Page

Linear Table Phase Search

Goto Phase Linear Table

Linear Table

Table 50 Goto Phase Rule.

683

Dr Kevin M Potter Strategy-Dev

Go Forward to a Named Phase

FEAtures Process

Table Process navigation (from Phase to Phase) is now enabled thanks to the Goto Phase Rules that you have just added. 

Figure 728 Goto Phase Rules.

684

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 13 » Visualise Flow Step-By-Step Visualise flow is a simple tool that allows you to diagrammatically “see the flow” of your Business Process at Process and Phase level. Visualise Flow is particularly worth trying out with the Table Process as it clearly illustrates that you can use the Buttons and Goto Phase Rules that you have just added to visit Phases (or web pages) in any order. In other words this example illustrates ad hoc flow. The following steps show you how to use the Process Editor Visualise Flow tool. 1.

Select Process Editor.

2.

Right-click Table Process » Visualise Flow.

Figure 729 Visualise Process Flow.

3.

Close the Process/Phase Flow window.

685

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 14 » Link Header and Footer to a Process Step-By-Step The following steps show you how to Link the Header and Footer (Item Groups) that you previously built to the Table Process.

Figure 730 Link Header and Footer to Table Process.

Productivity Linking is very useful when you want to reuse an item in several different places. Change the Tip original; the change is automatically reflected across all linked items.

686

Dr Kevin M Potter Strategy-Dev

FEAtures Process

1.

Select Process Editor.

2.

Expand the Header and Footer Process.

3.

Right-click Header Item Group » Copy.

Figure 731 Copy Header Item Group.

4.

Right-click Table Process » Link » As Pre Phase Item.

Figure 732 Link Header Item Group.

687

Dr Kevin M Potter Strategy-Dev

FEAtures Process

5.

Select Header and Footer Process.

6.

Right-click Footer Item Group » Copy.

Figure 733 Copy Footer Item Group.

7.

Right-click Table Process » Link » As Post Phase Item.

Figure 734 Link Footer Item Group.

8.

Select File menu » Save.

688

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Run the Table Process to see what the Header and Footer look like at run-time.  1.

Right-click Table Process » Run.

2.

Confirm that the Header and Footer Item Groups are displayed.

3.

Close browser.

Figure 735 Table Process with Header and Footer.

689

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 15 » Add Table Process to Home Page Step-By-Step The following steps show you how to use the Process Editor to add the Table Process to the Home Page Process assuming that you have already built the Home Page Process. 1.

Select Process Editor.

2.

Expand Header and Footer Process.

3.

Expand Header Item Group.

4.

Expand FEAtures Menu.

5.

Expand Solutions Menu Item.

6.

Right-click Table Menu Item » Add » Menu Rule » Goto Phase Rule.

7.

Enter Rule Name. Goto Phase Initialise Table

8.

Click the Phase Name Select button.

Figure 736 Add Goto Phase Rule dialog » Phase Details tab.

690

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 9.

Expand Table Process.

10.

Select Phase. Initialise Table

Figure 737 Phase Chooser dialog.

11.

Click OK to close the Phase Chooser dialog.

691

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 12.

Confirm that the Phase Name is correctly set. Table.Initialise Table

Figure 738 Add Goto Phase Rule dialog » Phase Details tab.

13.

Click OK.

692

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Table Menu Item. 14.

Copy Goto Phase Initialise Table Rule.

Figure 739 Menu Item with a Goto Phase Rule.

693

Dr Kevin M Potter Strategy-Dev

FEAtures Process

We want to Link the Goto Phase Rule to the “Find Out More” button that belongs to the FEAtures Home Page Table topic!  So… 15.

Expand Home Page Process.

16.

Expand Home Page Phase.

17.

Right-click Table “Find Out More” Button » Link.

The Goto Phase Rule is now linked to the Find Out More Button.

Figure 740 Goto Phase Rule linked to a Button.

18.

Select File menu » Save.

694

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Home Page Process and confirm that you can now navigate to the Table Process. See if you can navigate from Process to Process by “going on” the following journey. 1.

Select Process Editor.

2.

Right-click Home Page Process » Run.

3.

When you run the Home Page Process you start on the Home Page Phase.

4.

Open the Solutions Menu.

5.

Click the Table Menu Item to navigate to the Table Process.

6.

Click the Home Page Button (in the Footer) to navigate to the Home Page Process (again).

7.

Click the Table Article Find Out More Button to navigate to the Table Process (again).

8.

Click the Home Page Button (in the Footer) to navigate to the Home Page Process (again).

9.

Close browser.

695

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 16 » Add Notes Step-By-Step The following steps show you how to add Notes to annotate your solution for others. Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 1.

Select Process Editor.

2.

Right-click Table Process » Add » Note.

3.

Select Note Type. Specification

4.

Enter Note Text. The Table Process is designed to help you to learn about Tables.

Figure 741 Add Note Properties dialog » Detail tab.

5.

Click OK.

696

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Note is added to the Table Process.

Figure 742 Note.

6.

Select File menu » Save.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

697

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Chart Process What you need to know The Exercises in this Chapter show you how to build the FEAtures Chart solution Business Processes. 

Chart: The Chart Process has an Initialise Chart Rules Only Phase that runs a Data Set Rule to provide Charts with data. The Chart Process has a Chart Home Page Phase; from here you can try out any and all of the HighCharts and JFreeChart examples (that you are going to build! ). The Chart Process has a Navigate to Chart Home Page Rules Only Phase that acts as a Navigation Phase. When you click on a Pie Chart Slice at run-time this Phase enables dynamic navigation back to the Chart Home Page Phase.



Chart HighCharts: The Chart HighCharts Process has Phases that will allow you to try out all chart types that you can construct using the HighCharts (Widget) Display Item.



Chart JFreeChart: The Chart JFreeChart Process has Phases that will allow you to try out all chart types that you can construct using the JFreeChart Display Item.

Figure 743 Sketch a Design » Chart Process.

698

Dr Kevin M Potter Strategy-Dev

FEAtures Process

User Interface The Exercises in this Chapter show you how to build the FEAtures Chart Business Processes.

Figure 744 Chart Home Page web page.

699

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 1 » Add a Process Step-By-Step The following steps show you how to use the Process Editor to add a new Process. 1.

Start Developer.

2.

Select File menu » C:/ECProject/Projects/FEAturesHybridSolution/FEAturesHybridSolution.ifp.

3.

Select Window menu » Process Editor.

4.

Right-click Processes root node » Add Process.

5.

Enter Process Name. Chart

Figure 745 Add Process dialog » Process tab.

6.

Click OK.

700

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Chart Process is added to the Process Editor tree-structure.

Figure 746 Process Editor » Chart Process.

7.

Select File menu » Save.

701

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Processes.

Process Process Name Chart HighCharts Chart JFreeChart Table 51 Process.

The Chart solution requires three Processes.

Figure 747 Chart solution Processes.

702

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 2 » Add a Rules Only Phase to a Process Step-By-Step The following steps show you how to add the Initialise Table Rules Only Phase to the Table Process. 1.

Select Process Editor.

2.

Right-click Chart Process » Add » Rules Only Phase.

3.

Enter Phase Name. Initialise Chart

Figure 748 Add Rules Only Phase dialog » Properties tab.

4.

Click OK.

703

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Initialise Chart Rules Only Phase is added to the Chart Process tree-structure.

Figure 749 Chart Process » Initialise Chart Rules Only Phase.

5.

Select File menu » Save.

704

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Rules Only Phase to the Chart solution.

Rules Only Phase Process Name

Rules Only Phase Name

Chart

Navigate to Chart Home Page

Table 52 Rules Only Phase.

The Chart solution now has some Rules Only Phases. 

Figure 750 Chart solution Rules Only Phases.

705

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 3 » Add a Phase to a Process Step-By-Step The following steps show you how to add the Chart Home Page web page (or Phase) to the Chart Process. 1.

Select Process Editor.

2.

Right-click Chart Process » Add » Phase.

3.

Enter Phase Name. Chart Home Page

Figure 751 Add Phase dialog » Properties tab.

4.

Click OK.

706

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Chart Home Page Phase is added to the Chart Process tree-structure.

Figure 752 Chart Process » Chart Home Page Phase.

5.

Select File menu » Save. Test

Look and Feel Test A Phase is just a web page. Preview allows you to see what the Phase (or web page) looks like at run-time.  1.

Right-click Chart Home Page Phase » Preview.

2.

Close browser.

Figure 753 Preview Chart Home Page Phase.

707

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Phases to the Chart solution.

Phase Process Name

Phase Name

Chart HighCharts

Bar Chart

Chart HighCharts

Column Chart

Chart HighCharts

Pie Chart

Chart HighCharts

Line Chart

Chart HighCharts

Scatter Chart

Chart HighCharts

Polar Chart

Chart HighCharts

Stacked Chart

Chart HighCharts

Grouped Chart

Chart JFreeChart

Bar Chart

Chart JFreeChart

Column Chart

Chart JFreeChart

Pie Chart

Chart JFreeChart

Line Chart

Chart JFreeChart

Scatter Chart

Chart JFreeChart

Stacked Column Chart

Table 53 Phase.

708

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Chart solution now has some Phases. 

Figure 754 Chart solution Phases.

709

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 4 » Set Chart Process Properties (the FAST way! ) Step-By-Step Although you can set Initial Phase, Error Phase and other Process Properties using the Process Properties dialog it is much faster to simply drag-drop the Phases that you need onto your Process.  Productivity It is much faster to use drag-drop to set Initial Phase, Error Phase and other Process Properties than Tip to use the Process Properties dialog.

The following steps show you how to set Initial Phase, Error Phase and other Process Properties using drag-drop. 1.

Select Process Editor.

2.

Expand Error Management Process.

3.

Expand Chart Process.

4.

Drag-drop Initialise Chart Phase onto Chart Process.

5.

Select Set ‘Initial Phase’.

Figure 755 Drag-drop a Phase onto a Process to set a Phase in Process Properties.

6.

Select File menu » Save.

710

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to drag-drop Phases from the Error Management Process onto the Chart Process to set Process Properties the FAST way. 

Chart Process Phase Properties Drag Phase from Error Management Process…

Drop onto Chart Process As…

General Error

Set ‘Error Phase’

Timeout Error

Set ‘Session Timeout Phase’

Access Violation Error

Set ‘Access Violation Phase’

Table 54 Chart Process Phase Properties.

711

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 5 » Set Chart HighCharts Process Properties Step-By-Step The following steps show you how to edit Chart HighCharts Process Properties so that it knows what the Initial Phase is and can make use of Error Management Phases when an error occurs. We’re doing things the “Slow Way” as this exercise also shows you how to add a Navigation Phase and how to expose a Data Item.  1.

Select Process Editor.

2.

Right-click Chart HighCharts Process » Properties.

3.

Select Start tab.

4.

Click Initial Phase Select button.

Figure 756 Process Properties dialog » Start tab.

712

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 5.

Expand Chart HighCharts Process.

6.

Select Phase. Bar Chart

Figure 757 Phase Chooser dialog.

7.

Click OK to close the Phase Chooser dialog.

713

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 8.

Confirm that the Initial Phase is correctly set. Chart HighCharts.Bar Chart

Figure 758 Process Properties dialog » Start tab.

714

Dr Kevin M Potter Strategy-Dev

FEAtures Process

9.

Click Error Phase Select button.

Figure 759 Process Properties dialog » Start tab.

715

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 10.

Expand Error Management Process.

11.

Select Phase. General Error

Figure 760 Phase Chooser dialog.

12.

Click OK to close the Phase Chooser dialog.

716

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 13.

Confirm that the Error Phase is correctly set. Error Management.General Error

Figure 761 Process Properties dialog » Start tab.

717

Dr Kevin M Potter Strategy-Dev

FEAtures Process

14.

Select Options tab.

15.

Click Session Timeout Phase Select button.

Figure 762 Process Properties dialog » Options tab.

718

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 16.

Expand Error Management Process.

17.

Select Timeout Error Phase. Timeout Error

Figure 763 Phase Chooser dialog.

18.

Click OK to close the Phase Chooser dialog.

719

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 19.

Confirm that the Session Timeout Phase is correctly set. Error Management.Timeout Error

Figure 764 Process Properties dialog » Options tab.

720

Dr Kevin M Potter Strategy-Dev

FEAtures Process

20.

Click Navigation Phase Select button.

Figure 765 Process Properties dialog » Options tab.

721

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 21.

Expand Chart Process.

22.

Select Navigation Phase. Navigate to Chart Home Page

Figure 766 Phase Chooser dialog.

23.

Click OK to close the Phase Chooser dialog.

722

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 24.

Confirm that the Navigation Phase is correctly set. Chart.Navigate to Chart Home Page

Figure 767 Process Properties dialog » Options tab.

723

Dr Kevin M Potter Strategy-Dev

FEAtures Process

25.

Select Security tab.

26.

Click Exposed Data Item(s) Select button.

Figure 768 Process Properties dialog » Security tab.

724

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Item Chooser dialog is displayed. 27.

Expand ChartData Data Group.

28.

Expand InteractiveData Data Group.

29.

Select Data Item. SelectedChartItem

Figure 769 Data Item Chooser dialog.

30.

Click OK to close the Data Item Chooser dialog.

725

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 31.

Confirm that the Exposed Data Item is correctly set. ChartData[1].InteractiveData[1].SelectedChartItem

Figure 770 Process Properties dialog » Security tab.

726

Dr Kevin M Potter Strategy-Dev

FEAtures Process

32.

Click Access Violation Phase Select button.

Figure 771 Process Properties dialog » Security tab.

727

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 33.

Expand Error Management Process.

34.

Select Phase. Access Violation Error

Figure 772 Phase Chooser dialog.

35.

Click OK to close the Phase Chooser dialog.

728

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 36.

Confirm that the Access Violation Phase is correctly set. Error Management.Access Violation Error

Figure 773 Process Properties dialog » Security tab.

37.

Click OK.

38.

Select File menu » Save.

729

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 6 » Set Chart JFreeChart Process Properties Step-By-Step The following steps show you how to edit Chart JFreeChart Process Properties so that it knows what the Initial Phase is and can make use of Error Management Phases when an error occurs. We’re doing things the “Slow Way” as this exercise also shows you how to add a Navigation Phase and how to expose a Data Item. 1.

Select Process Editor.

2.

Right-click Chart JFreeChart Process » Properties.

3.

Select Start tab.

4.

Click Initial Phase Select button.

Figure 774 Process Properties dialog » Start tab.

730

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 5.

Expand Chart JFreeChart Process.

6.

Select Phase. Bar Chart

Figure 775 Phase Chooser dialog.

7.

Click OK to close the Phase Chooser dialog.

731

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 8.

Confirm that the Initial Phase is correctly set. Chart JFreeChart.Bar Chart

Figure 776 Process Properties dialog » Start tab.

732

Dr Kevin M Potter Strategy-Dev

FEAtures Process

9.

Click Error Phase Select button.

Figure 777 Process Properties dialog » Start tab.

733

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 10.

Expand Error Management Process.

11.

Select Phase. General Error

Figure 778 Phase Chooser dialog.

12.

Click OK to close the Phase Chooser dialog.

734

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 13.

Confirm that the Error Phase is correctly set. Error Management.General Error

Figure 779 Process Properties dialog » Start tab.

735

Dr Kevin M Potter Strategy-Dev

FEAtures Process

14.

Select Options tab.

15.

Click Session Timeout Phase Select button.

Figure 780 Process Properties dialog » Options tab.

736

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 16.

Expand Error Management Process.

17.

Select Timeout Error Phase. Timeout Error

Figure 781 Phase Chooser dialog.

18.

Click OK to close the Phase Chooser dialog.

737

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 19.

Confirm that the Session Timeout Phase is correctly set. Error Management.Timeout Error

Figure 782 Process Properties dialog » Options tab.

738

Dr Kevin M Potter Strategy-Dev

FEAtures Process

20.

Click Navigation Phase Select button.

Figure 783 Process Properties dialog » Options tab.

739

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 21.

Expand Chart Process.

22.

Select Navigation Phase. Navigate to Chart Home Page

Figure 784 Phase Chooser dialog.

23.

Click OK to close the Phase Chooser dialog.

740

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 24.

Confirm that the Navigation Phase is correctly set. Chart.Navigate to Chart Home Page

Figure 785 Process Properties dialog » Options tab.

741

Dr Kevin M Potter Strategy-Dev

FEAtures Process

25.

Select Security tab.

26.

Click Exposed Data Item(s) Select button.

Figure 786 Process Properties dialog » Security tab.

742

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Item Chooser dialog is displayed. 27.

Expand ChartData Data Group.

28.

Expand InteractiveData Data Group.

29.

Select Data Item. SelectedChartItem

Figure 787 Data Item Chooser dialog.

30.

Click OK to close the Data Item Chooser dialog.

743

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 31.

Confirm that the Exposed Data Item is correctly set. ChartData[1].InteractiveData[1].SelectedChartItem

Figure 788 Process Properties dialog » Security tab.

744

Dr Kevin M Potter Strategy-Dev

FEAtures Process

32.

Click Access Violation Phase Select button.

Figure 789 Process Properties dialog » Security tab.

745

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 33.

Expand Error Management Process.

34.

Select Phase. Access Violation Error

Figure 790 Phase Chooser dialog.

35.

Click OK to close the Phase Chooser dialog.

746

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Process Properties dialog is displayed. 36.

Confirm that the Access Violation Phase is correctly set. Error Management.Access Violation Error

Figure 791 Process Properties dialog » Security tab.

37.

Click OK.

38.

Select File menu » Save.

747

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 7 » Add a Heading to a Phase Step-By-Step The following steps show you how to add a new Heading to a Phase. 1.

Select Process Editor.

2.

Expand Chart Process.

3.

Right-click Chart Home Page Phase » Add » Heading.

4.

Enter Display Text. Select a Chart

5.

Select Heading Level. Level 1

Figure 792 Add Heading dialog » Heading tab.

6.

Click OK.

748

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Heading is added to the Chart Home Page Phase.

Figure 793 Select a Chart Heading.

7.

Select File menu » Save. Test

Look and Feel Test Let’s Preview the Chart Home Page Phase to see what the Heading looks like at run-time.  1.

Right-click Chart Home Page Phase » Preview.

2.

Close browser.

Figure 794 Preview Chart Home Page Phase.

749

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Heading to the Chart Home Page Phase.

Heading Phase Name

Display Text

Chart Home Page

Chart Information

Table 55 Heading.

The Charts solution Chart Home Page Phase now has Headings. 

Figure 795 Chart Solution Headings.

750

Dr Kevin M Potter Strategy-Dev

Heading Level Level 3

FEAtures Process

Test

Look and Feel Test Let’s Preview the Chart Home Page Phase (again) to see what the Headings look like at run-time.  1.

Right-click Chart Home Page Phase » Preview.

2.

Close browser.

Figure 796 Preview Chart Home Page Phase.

751

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 8 » Add a Question to a Phase Step-By-Step The following steps show you how to use the Process Editor to add a new Question to a Phase. 1.

Select Process Editor.

2.

Expand Chart Process.

3.

Expand Chart Home Page Phase.

4.

Right-click Chart Information Heading » Insert » Question.

5.

Enter Display Text. Chart Technology

Figure 797 Add Question dialog » Question tab.

752

Dr Kevin M Potter Strategy-Dev

FEAtures Process

6.

Select Answer tab.

7.

Click Data Item Select button.

Figure 798 Add Question dialog » Answer tab.

753

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Data Item Chooser dialog is displayed. 8.

Expand ChartData Data Group.

9.

Expand SelectChartData Data Group.

10.

Select Data Item. ChartTechnology

Figure 799 Data Item Chooser dialog.

11.

Click OK to close the Data Item chooser dialog.

754

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Add Question dialog is displayed. 12.

Confirm that the Data Item property is correctly set. ChartData[1].SelectChartData[1].ChartTechnology

Figure 800 Add Question dialog » Answer tab.

13.

Click OK.

The Question is added to the Chart Home Page Phase.

Figure 801 Chart Technology Question in Chart Home Page Phase.

14.

Select File menu » Save.

755

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Chart Home Page Phase to see what the Question looks like at run-time.  1.

Right-click Chart Home Page Phase » Preview.

2.

Close browser.

Figure 802 Preview Chart Home Page Phase.

756

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Questions to the Chart Home Page Phase.

Question Phase

Display Text

Mandatory

Read Only

ChartData[1].SelectCha rtData[1].ChartType

Yes

No

Q Chart Technology

Chart Home Page You selected a ChartData[1].Interactiv Chart Item eData[1].SelectedChart Item

No

Yes

H3 Chart Information

Chart Home Page Chart Type

Data Item

Table 56 Question.

The Chart Home Page Phase now has Questions. 

Figure 803 Chart Home Page Phase Questions.

757

Dr Kevin M Potter Strategy-Dev

Position below Item…

FEAtures Process

Test

Functionality Test Let’s confirm that you can use the Chart Technology Question Answer to filter the Chart Type Question Answer. 1.

Select Process Editor.

2.

Expand Chart Process.

3.

Right-click Chart Home Page Phase » Preview.

4.

Select Chart Technology. HighCharts

5.

6.

Confirm that the Chart Type Answer List contains the following List Items. 

Bar Chart



Column Chart



Pie Chart



Line Chart



Scatter Chart



Polar Chart



Stacked Chart



Grouped Chart

Select Chart Technology. JFreeChart

7.

8.

Confirm that the Chart Type Answer List contains the following List Items. 

Bar Chart



Column Chart



Pie Chart



Line Chart



Scatter Chart



Stacked Column Chart

Close browser.

758

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Figure 804 Chart Home Page Phase » HighCharts selected.

Figure 805 Chart Home Page Phase » JFreeChart selected.

759

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 9 » Add an Item Group Step-By-Step The following steps show you how to add a new Item Group to a Process as a Post Phase Item. We are adding an Item Group so that we can (for lack of a better word) group all footer Items together. Best Practice



It is Best Practice to use Item Groups to (for lack of a better word) group other Process Items together. This will make it easy for you to copy-paste or copy-link related items, makes it easier to navigate in the Process Editor tree structure and is also simply good housekeeping. 

1.

Select Process Editor.

2.

Right-click Chart JFreeChart Process » Add » Post Phase Item » Item Group.

3.

Enter Item Group Name. Chart Footer

Figure 806 Add Item Group dialog » Item Group tab.

4.

Click OK.

760

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Chart Footer Item Group is added to the Chart JFreeChart Process as a Post Phase Item.

Figure 807 Item Group as a Post Phase Item.

5.

Select File menu » Save.

761

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to Move Items to a New Item Group in the Chart Home Page Phase.

Item Group Process

Phase

Multi-Select Items »

Item Group Name

Move to a New Item Group Chart

Chart Home Page

H3 Chart Information Q You selected a Chart Item

Table 57 Item Group.

The Chart Home Page Phase now has a new Item Group. 

Figure 808 Chart Home Page Item Group.

762

Dr Kevin M Potter Strategy-Dev

Customer

FEAtures Process

Exercise 10 » Add a Button Step-By-Step The following steps show you how to add a new Button to the Chart Footer Item Group. 1.

Select Process Editor.

2.

Expand Chart JFreeChart Process.

3.

Right-click Chart Footer Item Group » Add » Button.

4.

Select Button Type. Action

5.

Enter Action Command. (This is just the caption that is displayed on the Button). Chart Home Page

Figure 809 Add Button dialog » Button tab.

6.

Click OK.

763

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Action Button is added to the Chart Footer Item Group.

Figure 810 Chart Home Page Action Button.

7.

Select File menu » Save.

764

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Bar Chart Phase (that belongs to the Chart JFreeChart Process) to see what the Button looks like at run-time.  1.

Expand Chart JFreeChart Process.

2.

Right-click Bar Chart Phase » Preview.

3.

Close browser.

Figure 811 Preview Bar Chart Phase.

765

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 11 » Add a Goto Phase Rule Step-By-Step The following steps show you how to use the Process Editor to add a new Goto Phase Rule to the Initialise Chart Rules Only Phase. 1.

Select Process Editor.

2.

Expand Chart Process.

3.

Right-click Initialise Chart Rules Only Phase » Add » Rule » Goto Phase Rule.

4.

Enter Rule Name. Goto Phase Chart Home Page

5.

Click the Phase Name Select button.

Figure 812 Add Goto Phase Rule dialog » Phase Details tab.

766

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 6.

Expand Chart Process.

7.

Select Phase. Chart Home Page

Figure 813 Phase Chooser dialog.

8.

Click OK to close the Phase Chooser dialog.

767

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 9.

Confirm that the Phase Name property is correctly set. Chart.Chart Home Page

Figure 814 Add Goto Phase Rule dialog » Phase Details tab.

10.

Click OK.

768

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Initialise Chart Rules Only Phase.

Figure 815 Rules Only Phase with a Goto Phase Rule.

11.

Select File menu » Save. Best Practice

It is Best Practice to use meaningful Customer and/or Project Specific Rule names that indicate Rule type and purpose.

 Productivity When testing Process Flow you may not always want to enter Answers for All Mandatory Questions. Tip Select Tools » Options » Run/Preview » Mark Disable Mandatory Checking.

769

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test with Process Analyser Run the Chart Process and use Process Analyser to confirm that you can now navigate from the Initialise Chart Rules Only Phase to the Chart Home Page Phase.  1.

Mark Process Analyser Details button on the Developer Toolbar to display Process Analyser.

2.

Mark Run Options: Process Analyser button on the Developer Toolbar.

3.

Select Window menu » Process Editor.

4.

Position Process Analyser below Process Editor.

5.

Using Process Editor expand the Chart Business Process.

6.

Using Process Analyser select the Phase Stack tab.

7.

Right-click Chart Process » Run With » Analyser.

8.

Select Developer.

9.

Use Process Editor and Process Analyser to confirm that you are on the Chart Home Page Phase.

10. Close browser. 11. Click Process Analyser » Stop Analyser toolbar button.

Figure 816 Process Editor and Process Analyser at run-time.

770

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Goto Phase Rules.

Goto Phase Rule Add to Item

Rule Name

Operation Type

Phase Name

Chart Home Page Button (In Goto Phase Chart Home Page Go Back to a Named Phase Chart Footer Item Group)

Chart Home Page

Navigate to Chart Home Page Rules Only Phase

Chart Home Page

Goto Phase Chart Home Page Go Back to a Named Phase

Table 58 Goto Phase Rule.

You can now always navigate back to the Chart Home Page Phase from any Chart Phase. 

Figure 817 Goto Phase Rule.

771

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 12 » Link Chart Footer to a Process Step-By-Step The following steps show you how to Link the Chart Footer Item Group to the Chart HighCharts Process. Productivity Linking is very useful when you want to reuse an item in several different places. Change the Tip original; the change is automatically reflected across all linked items.

1.

Select Process Editor.

2.

Expand the Chart JFreeChart Process.

3.

Right-click Chart Footer Item Group » Copy.

Figure 818 Copy Chart Footer Item Group.

772

Dr Kevin M Potter Strategy-Dev

FEAtures Process

4.

Expand Chart HighCharts Process.

5.

Right-click Chart HighCharts Process » Link » As Post Phase Item.

Figure 819 Link Chart Footer Item Group.

6.

Select File menu » Save.

773

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Preview the Bar Chart Phase (that belongs to the Chart HighCharts Process) to see what the Chart Footer look like at run-time.  1.

Expand Chart HighCharts Process.

2.

Right-click Bar Chart Phase » Preview.

3.

Confirm that the Chart Footer Item Group is displayed.

4.

Close browser.

Figure 820 Chart Footer Item Group.

774

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 13 » Link Header and Footer to a Process Step-By-Step The following steps show you how to Link the Header and Footer (Item Groups) that you previously built to the Chart solution Processes.

Figure 821 Link Header and Footer to Chart solution Processes.

Productivity Linking is very useful when you want to reuse an item in several different places. Change the Tip original; the change is automatically reflected across all linked items.

775

Dr Kevin M Potter Strategy-Dev

FEAtures Process

1.

Select Process Editor.

2.

Expand the Header and Footer Process.

3.

Right-click Header Item Group » Copy.

Figure 822 Copy Header Item Group.

4.

Right-click Chart Process » Link » As Pre Phase Item.

Figure 823 Link Header Item Group.

776

Dr Kevin M Potter Strategy-Dev

FEAtures Process

5.

Select Header and Footer Process.

6.

Right-click Footer Item Group » Copy.

Figure 824 Copy Footer Item Group.

7.

Right-click Chart Process » Link » As Post Phase Item.

Figure 825 Link Footer Item Group.

8.

Select File menu » Save.

777

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Look and Feel Test Let’s Run the Chart Process to see what the Header and Footer look like at run-time.  1.

Right-click Chart Process » Run.

2.

Confirm that the Header and Footer Item Groups are displayed.

3.

Close browser.

Figure 826 Chart Process with Header and Footer.

778

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to Copy-Link the Header and Footer Item Groups to the following Chart solution Processes.

Copy-Link Copy Process Name

Link Process Name

Link as Pre Phase Item

Link as Post Phase Item

Header and Footer

Chart HighCharts

Header

Footer

Header and Footer

Chart JFreeChart

Header

Footer

Table 59

Copy-Link.

The Chart HighCharts Process now has a Linked Header and Footer.

Figure 827 Chart HighCharts Process Linked Header and Footer Item Groups.

779

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Chart JFreeChart Process now has a Linked Header and Footer.

Figure 828 Chart JFreeChart Process Linked Header and Footer Item Groups.

780

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 14 » Add Chart Process to Home Page Step-By-Step The following steps show you how to use the Process Editor to add the Chart Process to the Home Page Process assuming that you have already built the Home Page Process. 1.

Select Process Editor.

2.

Expand Header and Footer Process.

3.

Expand Header Item Group.

4.

Expand FEAtures Menu.

5.

Expand Solutions Menu Item.

6.

Right-click Chart Menu Item » Add » Menu Rule » Goto Phase Rule.

7.

Enter Rule Name. Goto Phase Initialise Chart

8.

Click the Phase Name Select button.

Figure 829 Add Goto Phase Rule dialog » Phase Details tab.

781

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Phase Chooser dialog is displayed. 9.

Expand Chart Process.

10.

Select Phase. Initialise Chart

Figure 830 Phase Chooser dialog.

11.

Click OK to close the Phase Chooser dialog.

782

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule dialog is displayed. 12.

Confirm that the Phase Name is correctly set. Chart.Initialise Chart

Figure 831 Add Goto Phase Rule dialog » Phase Details tab.

13.

Click OK.

783

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Goto Phase Rule is added to the Chart Menu Item. 14.

Copy Goto Phase Initialise Chart Rule.

Figure 832 Menu Item with a Goto Phase Rule.

784

Dr Kevin M Potter Strategy-Dev

FEAtures Process

We want to Link the Goto Phase Rule to the “Find Out More” button that belongs to the FEAtures Home Page Chart topic!  So… 15.

Expand Home Page Process.

16.

Expand Home Page Phase.

17.

Right-click Chart “Find Out More” Button » Link.

The Goto Phase Rule is now linked to the Find Out More Button.

Figure 833 Goto Phase Rule linked to a Button.

18.

Select File menu » Save.

785

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Test

Functionality Test Run the Home Page Process and confirm that you can now navigate to the Chart Process. See if you can navigate from Process to Process by “going on” the following journey. 1.

Select Process Editor.

2.

Right-click Home Page Process » Run.

3.

When you run the Home Page Process you start on the Home Page Phase.

4.

Open the Solutions Menu.

5.

Click the Chart Menu Item to navigate to the Chart Process.

6.

Click the Home Page Button (in the Footer) to navigate to the Home Page Process (again).

7.

Click the Chart Article Find Out More Button to navigate to the Chart Process (again).

8.

Click the Home Page Button (in the Footer) to navigate to the Home Page Process (again).

9.

Close browser.

786

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Exercise 15 » Add Notes Step-By-Step The following steps show you how to add Notes to annotate your solution for others. Best Practice

It is Best Practice to add Notes to annotate your solution for your benefit and for the benefit of others in the future. 

 1.

Select Process Editor.

2.

Right-click Chart Process » Add » Note.

3.

Select Note Type. Specification

4.

Enter Note Text. The Chart Process is designed to help you to learn about Charts.

Figure 834 Add Note Properties dialog » Detail tab.

5.

Click OK.

787

Dr Kevin M Potter Strategy-Dev

FEAtures Process

The Note is added to the Chart Process.

Figure 835 Note.

6.

Select File menu » Save.

788

Dr Kevin M Potter Strategy-Dev

FEAtures Process

Now You Try Use Process Editor to add the following Notes to Processes or Phases that belong to the Chart solution.

Note Process Name

Note Type

Chart HighCharts

Specification The Chart HighCharts Process is designed to help you to learn about HighCharts Charts.

Chart JFreeChart

Specification The Chart JFreeChart Process is designed to help you to learn about JFreeChart Charts.

Table 60 Note.

789

Dr Kevin M Potter Strategy-Dev

Note Text

FEAtures Process

You have now added Notes to annotate your solution.

Figure 836 Chart Solution Notes.

Brilliant, you’ve finished all of the exercises in this chapter. Go back to the Introduction Guide and build something else! 

790

Dr Kevin M Potter Strategy-Dev