Bpmv80 Coaches Sample

Copyright IBM Corporation 2012 All rights reserved
June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 1 of 69
Developing Coaches in Human Services

IBM BUSINESS PROCESS MANAGER 8.0 LAB EXERCISE
Developing coaches in human services

What this exercise is about................................................................................................................................... 1
Lab requirements .................................................................................................................................................. 1
What you should be able to do ............................................................................................................................. 1
Introduction........................................................................................................................................................... 2
Exercise instructions............................................................................................................................................. 3
Part 1: Setting up the environment ....................................................................................................................... 4
Part 2: Working on Coaches................................................................................................................................. 6
Task 1: Integrate service and improve UI for Check In Service coach form............................................ 7
Task 2: Enhance Triage Service coach Form........................................................................................ 20
Task 3: Improve and update Diagnose Service coach form.................................................................. 33
Task 4: Create a new Discharge Patient human service with a Coach................................................. 44
Part 3: Testing the Coaches using Process Designer Inspector ........................................................................ 60
What you did in this exercise.............................................................................................................................. 69

What this exercise is about

In an IBM Business Process Manager process, users interact with services and the service data using
Coaches.

In this exercise you will learn how to build rich human service user interfaces using coaches.

This lab is provided AS-IS, with no formal IBM support.

Lab requirements

These products below are required for this exercise:
IBM Business Process Manager v8.0 Server with IBM Process Center v8.0 stand alone profile
IBM Process Designer v8.0
DB2 v9.7.4 or higher

What you should be able to do

At the end of this lab you should be able to:
Create a new coach view
Customize coach view behaviors
Configure various stock coach views, e.g. Check Box, Table, Text, Button, and etc.
Add an integration service to a human service
Create and use a boundary event
Customize a coach view instance using CSS class
Use a template to start building a new coach
Choose a specific boundary event on the coach using the wiring dialog
Implement an AJ AX service for the text auto-completion function
Playback and test the implementation

Copyright IBM Corporation 2012. All rights reserved

Introduction

The business process used for this exercise models a simple hospital emergency room (ER) work flow. It
provides the ER staff with interactive user interfaces for doing their respective tasks. Each role is represented
by a swim lane, as shown in the process diagram below.

At each step, information is gathered by the hospital staff and entered into the patient record.

Each swim lane is associated with a pre-defined participant group and each participant group has one or more
users. The process begins with Mary, the receptionist, by checking-in the patient. After being checked in, the
patient is then seen by the triage nurse. The triage nurse gathers information specific to the case and enters it
into the patient record. Next, they are seen by the physician who makes a diagnosis and decides whether to
release the patient or admit them to hospital.

To test the business process you will use the Process Designer Inspector, switching users to perform the
different tasks. The users for the three roles are.

Receptionist: Mary
Nurse: Tom
Physician: Harry and Lisa

This lab focuses on the usage of the coach features in Process Designer. You will elaborate on the existing
design to increase the process efficiency and the usability. The new requirements are:

Increase the efficiency of the Reception work
o Integrate health card system with Patient Lookup integration service to quickly perform a
registered patient information retrieval.
o UI improvement: widen the Address input field for better visibility


Add a couple of new functions to the existing Triage Service form
o Show and hide Allergies input text field based on Has Allergies boolean value
o Provide temperature converter function

Improve the Diagnose Service form to increase physicians efficiency
o Auto completion text support
o Implement the prescription using a table instead of a text area

To increase patient service satisfaction
o Add a new Discharge Service to give the patient a summary of the visit and provide the
patient with a printout with the prescription.

Exercise instructions

Before importing the business process into the Process Center you need to make sure that the users that are
used in the participant groups are in the BPM user registry. The instructions on how to do this are provided in
Part 1.
There are other lab exercises that use variations of the Emergency Room business process application. They
each begin by importing a partially constructed version into the Process Center. If you have already completed
one of the other Emergency Room exercises, you need to remove the current version from the Process Center
before importing the one for this exercise.

Part 1: Setting up the environment

In the first part of this lab, you will add the ER staff to the BPM user registry.

If you have previously completed one of the other labs in this series and your environment is already setup,
you can skip this part.

____ 1. Start Process Center Server

__ a. Select Start All Programs IBM Business Process Manager Advanced 8.0 Profiles
ProcCtr01 Start the Server

__ b. Wait for the server to start, which can take a few minutes. While it is starting, you should see the
following window:

__ c. When the server startup completes, you will see some additional messages in the window and
then it will close automatically. When the window disappears, you are ready to continue.

____ 2. Create process users.

__ a. Start Process Admin Console.


__ b. Login as admin (default password admin), go to the Server Admin tab, expand the User
Management category, and select the User Management section.

__ c. In the Internal IBM BPM User Details section, enter the user name and credential information,
then click Add.
User names are: Mary, Tom, Harry, Lisa
Password (for all users): zaq123

Make sure the user name specified in the User Name field starts with an
upper case letter which is exactly the same as shown in the list.

__ d. Log out of the Process Admin Console.

____ 3. Start Process Designer.

At this point you have the development environment set up. You are now ready to work on the
coaches in the human services using the IBM BPM Process Designer.


Part 2: Working on Coaches

In this section, you will be assigned to work on several enhancement requirements on different coach forms in
the Simple ER Process.

____ 1. Open the Process Designer, if it is not already open

____ 2. Switch to the Process Center view

__ a. First, you need to ensure you are in the Process Center view in Process Designer. In the
Process Center view, you will see the tabs across the top.

If you dont see this then you are in the Process Designer view.
In the upper right corner of the window, if you see a Process Center icon, click on it to switch
to the Process Center view.

____ 3. Import the Emergency Room Process App into the Process Center and open it in the Process
Designer

__ a. On the right side task menu select Import Process App and click Browse button.

__ b. Navigate to the folder where you extracted the LabFiles80 and select
Emergency_Room_Process_App - Coach-Lab-Start.twx. Click OK.


__ c. The next dialog confirms your selection. Click Import.

__ d. Verify that you can see Emergency Room Process App (ERPA1) in the list of available process
applications. Select Open in Designer.

Task 1: Integrate service and improve UI for Check In Service coach form

Shown below is a screenshot of the current user interface for the check-in activity. When the receptionist works
on it, they must type in the patient information manually, which is inefficient and error-prone. Also the address
field is too narrow to show the complete address.


Integrate with the health card system using a simple integration service
to quickly look up a patient who has registered in the system and
automatically fill out the information on the Check-In form.

Make the Address field wider

____ 1. Create Patient Lookup Integration Service

An integration service is needed when you want the business process flow
to interact with an external system. In a real enterprise scenario, the services
can include a Web Service integration, a J ava integration, or content
integration. Refer to the IBM BPM Information Center Building an
Integration Service topic for more details. In this lab, you will create a simple
integration service with a script to simulate the service.

__ a. In Process Designer Emergency Room Process App library, click the + sign on the right side of
Implementation category and choose Integration Service from the list.

__ b. On the New Integration Service dialog, enter Patient Lookup Integration Service as the
service name. Click Finish.


__ c. On service editor, first switch to Variables tab to define the input and output variables. Click Add
Input button. Enter healthCardNumber as name and keep String type.

__ d. Click Add output button and create a patientInfo output variable. Click Select button and
choose PatientInformation type from the list.

Save the variables setting.


__ e. Switch to Diagram tab.

1) Add a Server Script to the diagram, place it in between the Start and End nodes, and
name it Patient Lookup.

2) Using the Sequence Flow tool to wire it from Start node and to End node.

Once you finish the wiring diagram, you may click the Selection tool on the palette or press
Esc key to release the Sequence Flow icon.

__ f. Select Patient Lookup node. In its Properties view Implementation section, enter the script to
simulate the health card number lookup condition.


You can copy and paste the follow script snippet.

t w. l ocal . pat i ent I nf o = new t w. obj ect . Pat i ent I nf or mat i on( ) ;
t w. l ocal . pat i ent I nf o. basi cI nf o = new t w. obj ect . Basi cI nf or mat i on( ) ;
t w. l ocal . pat i ent I nf o. f ami l yPhysi ci anI nf o = new t w. obj ect . Basi cI nf or mat i on( ) ;
i f ( t w. l ocal . heal t hCar dNumber == " 123- 456- 789" ) {
t w. l ocal . pat i ent I nf o. heal t hCar dNumber = t w. l ocal . heal t hCar dNumber ;
t w. l ocal . pat i ent I nf o. basi cI nf o. f i r st Name = " J ane" ;
t w. l ocal . pat i ent I nf o. basi cI nf o. l ast Name = " Doe" ;
t w. l ocal . pat i ent I nf o. basi cI nf o. phoneNumber = " 123- 456- 7890" ;
t w. l ocal . pat i ent I nf o. age = 30;
t w. l ocal . pat i ent I nf o. gender = " f emal e" ;
t w. l ocal . pat i ent I nf o. addr ess = " 123 Mai n St r eet , Mi l t on, ON N6Y 5T7" ;
t w. l ocal . pat i ent I nf o. f ami l yPhysi ci anI nf o. f i r st Name = " J ohn" ;
t w. l ocal . pat i ent I nf o. f ami l yPhysi ci anI nf o. l ast Name = " Smi t h" ;
t w. l ocal . pat i ent I nf o. f ami l yPhysi ci anI nf o. phoneNumber = " 987- 654- 3210" ;
}

Here the script shows a simple happy path example. The main focus in
this lab is to have an integration service plugged into a human service.
For more complex error handling scenarios in the service, such as invalid
or expired health card number, please refer to Error Handling Lab for
details.

__ g. Click on Save to save the service implementation.

____ 2. Add Patient Lookup Integration Service to the Check In Service human service.

__ a. Open the Check In Service human service from the User Interface category. First you will work
on the coach form. In the human service editor, switch to Coaches tab.

__ b. Add a Patient Lookup button to the form. When the button is selected by the user, a boundary
event is triggered and will be used to initiate the patient lookup. Drag the Button control from the
palette and drop it under the Health Card Number field.

A boundary event is an event within a human service that sends
information from a client to a server, where the information is committed
and the human service moves to the next step.

__ c. Select the button on the canvas and change the button label to Patient Lookup in the Properties
view.


__ d. Since it is a new function for the receptionist, its better to add an instruction. From the palette,
expand Advanced drawer, drag Custom HTML and place above the Health Card Number field.

__ e. In the Properties of this Custom HTML, choose Text as the source input. Then enter the following
HTML snippet.

<h3 st yl e=" paddi ng- bot t om: 25px; col or : gr ey; " >I nst r uct i on: Ent er pat i ent ' s
Heal t h Car d number and t hen cl i ck t he Pat i ent Lookup but t on, t he pat i ent
i nf or mat i on wi l l be aut omat i cal l y f i l l ed i n i f t he pat i ent i s r egi st er ed i n
t he syst em. Ot her wi se, f i l l i n t he dat a manual l y. </ h3>

__ f. Click Save and Switch to human service Diagram tab.

__ g. From human service palette, add a Nested Service to the diagram and name it Patient Lookup
Integration Service.


__ h. In service Properties view Implementation section, click Select button to attach the service.
From the popup list, choose Patient Lookup Integration Service under Integration Service
category.

__ i. In the Data Mapping section, click the variable map icon and select the local input patientInfo
healthCardNumber variable.


__ j. For the output, click the auto mapping icon to automatically fill in the local patientInfo variable.

The finished mapping should look like:

__ k. On the diagram, click the Sequence Flow tool, first wire from the Check In Form coach to the
Patient Lookup Integration Service.

__ l. You can see the Patient Lookup button is added on the wire. Now wire from Patient Lookup
Integration Service back to Check In Form coach. This step will fill in the patient information if
retrieved on the same coach form.

__ m. Click the Selection tool or press Esc key to release the Sequence Flow tool. The finished diagram
should look like below. Click Save to save all the editor changes.

____ 3. Widen Address input field.

In this task, you are going to adjust the width of the Address field using the
CSS style. In the Emergency Room Process App library, there is an
existing bpm_demo.css under Files category. A widerTextBox class is
already defined.
You may also create your own CSS file, upload it to the Files category, and
apply it to the required field.

__ a. The Address field is created in the reusable PatientInfoView coach view. Open the view by
double clicking it from User Interface category list.


__ b. On the view editor, switch to the Behavior tab. On the left Behavior section, click + sign on the
right of Included Scripts, then choose bpm_demo.css from Web File category.

__ c. The bpm_demo.css file is added to the Included Scripts list and its read-only content is
displayed in the script area on the right. The widerTextBox class which extends the default
dijitTextBox is already defined.


__ d. Switch to Layout tab and select Address field on the canvas.

__ e. In the Address Properties view HTML Attributes section, click Add Class button.

__ f. In Class Details sub section, enter widerTextBox in Class name field. Note the CSS class name
is case sensitive.

__ g. Save the changes made to PatientInfoView editor.

____ 4. Playback the human service to verify the implementation.

__ a. Switch back to Check In Service human service editor.

__ b. On the top right corner of the editor, click the Run Service button.


__ c. On the web browser, you should see the new instruction is added. Address field is widened. Enter
the valid health card number, i.e. 123-456-789, and click the Patient Lookup button.

__ d. Without a full page refresh, the patient information is automatically filled in.


Under the covers, when the button is clicked, a boundary event is
fired. It goes to the server side, moves to the next step in the human
service, which is the Patient Lookup Integration Service in this
scenario. The integration service retrieves the data and returns back
to the same coach.
The new coach framework updates only the affected data that are
bound to the service.

__ e. Click Submit button to finish the service or just close the browser.

You have verified the implementation of the first form. Now move onto the second task.

Task 2: Enhance Triage Service coach Form

Below is the screenshot of the current triage form. On the Triage Information tab under the Medical History
section, the feedback from the nurses is that the Has Allergies and Allergies are confusing. It would be better
to hide the Allergies field if Has Allergies is unchecked. Another request is to have a temperature converter
and to show the unit, F or C, next to the value.

Add the following new functions to the exiting Triage Service form:

Hide the Allergies field if Has Allergies checkbox is unchecked

Provide temperature converter function

____ 1. Show and Hide Allergies field based on Has Allergies value.


__ a. The views that are related to the allergy parameters are implemented in MedicalHistoryView.
Open the view from the process app library under User Interface category list.

__ b. On MedicalHistoryView editor, switch to Behavior tab.

Before implementing event handler functions, you first need to
register a Dojo AMD (Asynchronous Module Definition) dependency
module with an alias in order to use the module methods in the event
handlers. You will add the Dojo base lang module to invoke the hitch
method in order to bind this context object scope.

__ c. Click AMD Dependencies in the left section. On the right side, click the Add button. Click <id>
under the Module ID column and enter dojo/_base/lang. Then click <alias> and enter lang.


__ d. Expand Event Handlers, and click load function. The load function is the initial logic that runs as
soon as the view is launched. Here you write script to first bind the context variable value change
and then set the default visibility state of Allergies.

You can copy and paste the following script snippet to the load script area.

t hi s.context.binding.get("value").bindAll(lang.hitch(t hi s, t hi s.change));

var val = t hi s.context.binding.get("value");
i f (val.hasAllergies) {
t hi s.context.getSubview("Text1")[0].context.options._metadata.visibility.set("value", "DEFAULT");
} el se {
t hi s.context.getSubview("Text1")[0].context.options._metadata.visibility.set("value", "NONE");
}

In the script, the subview ID is the view instance Control Id. You can find it from the
view instance Properties General section.

__ e. You also need to implement the change function to catch the value of the Has Allergies
checkbox and then, based on the value, show and hide the Allergies information field.


You can copy and paste the follow script snippet to the change script area.

t hi s.context.binding.get("value").bindAll(lang.hitch(t hi s, t hi s.change));

i f (event.property && event.property == "hasAllergies") {
i f (val.hasAllergies) {
t hi s.context.getSubview("Text1")[0].context.options._metadata.visibility.set("value", "DEFAULT");
} el se {
t hi s.context.getSubview("Text1")[0].context.options._metadata.visibility.set("value", "NONE");
}
}

The value binding set in the change method is for collaboration purpose. When
two users work on the same form together in the Process Portal, they should
see the show and hide behavior in sync when the data changes. When the
change event is fired, you need to bind the value change again in order to
detect the next change and perform the action.

__ f. Click Save. The changes made to MedicalHistoryView are automatically applied to the Triage
Form which uses the view instance.

____ 2. Implement a new temperature converter coach view.

__ a. Create a new data object called Temperature, which contains the temperature value and unit.
From the Emergency Room Process App library, click the +sign on the right of Data category,
and choose Business Object.

__ b. On the New Business Object dialog, enter Temperature as name and click Finish. It opens the
BO editor.


__ c. On the business object editor, under the Parameters section, add the following two parameters
with specified data types:
temperature (Decimal)
useFahrenheit (Boolean)

__ d. Save the BO.

__ e. Create a new coach view. From the Emergency Room Process App library, click the + sign on
the right of User Interface category, and choose Coach View from the list.

You could also create a coach
view from the business object.
With this scenario, from Data
category, right click Temperature
BO. Choose Create Coach
View from the popup list. If a
coach view is created from a BO,
the business data are
automatically added in the view
editor Variables tab.

__ f. On the New Coach View dialog, enter, TemperatureConverterView as the name, keep Start
with a blank view selected and click Finish.


__ g. On the TemperatureConverterView editor, first switch to Variables tab to add business data for
the view. Click sign on the right side of Business Data.

__ h. In the Data area, enter temperature as name. Click Select and choose Temperature from the
list.

__ i. Expand temperature business data inside Variable Declarations area, you should see the
temperature variable with two parameters. Click Save icon on top of the editor.


__ j. Now switch to Layout tab to build user interface of the view. Expand the Variables drawer in the
palette. Drag the temperature variable onto the canvas.

__ k. You should see it automatically generate a Text view for the temperature parameter and a
Checkbox view for the useFehrenheit parameter vertically. Next you will adjust the layout and use
better labels.

__ l. Since the requirement is to have the unit displayed next to the temperature value, it is necessary to
use a horizontal section to lay them out. From the palette expand the Section drawer and, drag a
Horizontal Section view onto the canvas.


__ m. In the Horizontal Section Properties view, General section, clear the label to make the horizontal
section invisible at runtime.

__ n. Drag temperature 1 view into the horizontal section, and then drag useFahrenheit 1 view into
horizontal section next to the temperature 1 view, horizontally as shown.

__ o. Select temperature 1 view. In its Properties view General section, change the label to
Temperature.


__ p. Select useFahrenheit 1 view. In its Properties view General section, change the label to Unit.

__ q. Click the Configuration section, select Two Radio Buttons for Show As. Set True Label value
to Fahrenheit and False Label value to Celsius.

__ r. Click Save icon on top of the editor. Switch to Behavior tab.

__ s. Select AMD Dependencies. Click the Add button. With the new entry, set the values to,
dojo/_base/lang in Module ID and lang as Alias.


__ t. Expand the Event Handlers section. First define load function to bind the specific temperature
unit value for change detection.

You may copy and paste the follow script snippet.

t hi s.context.binding.get("value").bind("useFahrenheit", lang.hitch(t hi s, t hi s.change));

__ u. In change function, you use the temperature convert formula after detect the unit value change.


i f (event.property && event.property == "useFahrenheit") {
i f (event.newVal && val.useFahrenheit == event.newVal) {
val.set("temperature", val.temperature * 9/5 + 32);
} el se {
val.set("temperature", (val.temperature - 32) * 5 / 9);
}
}

__ v. Save all the changes. You have finished temperature converter view implementation.


____ 3. Update Triage Patient coach.

__ a. Before updating the coach, you need to update the TriageInformation data object, to use the
newly created Temperature BO. From the Data category popup menu, double click the
TriageInformation BO.

__ b. On the BO editor, select the temperature parameter, in the Parameter Properties section. Click
the Select button and choose Temperature from the list. Save the change.

__ c. Open Triage Service human service editor from the User Interface category.


__ d. On the Coaches tab inside the Triage Form canvas, click the Triage Information tab.

__ e. Find the Temperature view instance and select it. In its Properties view, the General section, the
Behavior area, click the Select button on the right of View, choose
TemperatureConverterView from the list.

__ f. Save the change.

You dont need to make any changes on the Triage coach form for the
Allergies field update. Because the change is already applied to the
MedicalHistoryView. Once a change is made to a reusable coach view,
all its instances pick up the change automatically.


__ a. On the top right corner of the Triage Service editor, click the Run Service button.

__ b. On the web browser in Triage Information tab, you should see the checkbox in front of Has
Allergies is unchecked and Allergies input field is hidden.


__ c. When you check the checkbox in front of Has Allergies, the Allergies field is shown.

__ d. Enter a number in Temperature field, e.g. 40, and then choose Fehrenheit unit radio button. The
temperature value is changed.

__ e. Both enhanced functions should behave as required. You can close the browser.

You have finished implementing the Triage Service enhancements. Now move onto the improvement
requirement on Diagnose Service.


Task 3: Improve and update Diagnose Service coach form

Below is the screenshot of the current diagnose form. The existing prescription field is a text field. Its messy
after entering multiple medications. The physicians suggest changing it to a table which would be easier to use
and read.

In addition when the Admit to Hospital option is checked, the Transfer to input field shows and the
Prescription area hides. Since there are only a few hospital care center options, it would be efficient if the text
field has auto-completion capability to help physicians fill in the form quickly.

One more update is also needed on the read-only Triage Information page. The view for the temperature
parameter must be bound to TemperatureConverterView that was created in the previous task.

Change the Prescription entry field to a table so that the
physician can work on it easier and quicker.
Implement an auto completion AJ AX service for the Transfer to
field.
Update the read only Triage Information page for the
temperature view.

____ 1. Change the Prescription Text field to a Table view.

__ a. First you need to refine the Prescription data object and use it as a list. Open the existing
DiagnoseInformation business object editor.


__ b. In the Parameters area, select prescription. On the right side, in the Parameter Properties
area, click the Select button and set the Variable Type to Medication.

__ c. Select the Is List checkbox. Expand the prescription parameter; you can see the Medication BO
contains three parameters: name, dose, and note.

__ d. Save the BO change.

__ e. The Prescription user interface is implemented as part of the DiagnoseInfoView. Open the view
from the User Interface library.


__ f. On the Layout tab of the DiagnoseInfoView, find the prescription text area view that is inside a
vertical section and it is bound to prescription data. Delete it from the canvas by either choosing
Delete from context menu or using Delete key.

If you make mistake on the coach canvas, you can always undo your
change by pressing the Ctrl +z shortcut key. The supported shortcut keys
are cut, copy, paste, delete, and undo.

__ g. From the palette open the Variables drawer and expand the DiagnoseInformation variable.
Drag prescription into the vertical section under the Custom HTML.

__ h. Take a look at the generated table. Each parameter takes one column.


__ i. Select table view. In its Properties view the Configuration section, make the follow changes:

1) Choose No Selection for Selection Type;

2) Check both Show Add Button and Show Delete Buttons so that the user can add and
delete medications during runtime;

3) Set Initial Width to 95% so that the table is always 95% of its container width dynamically if
browser size is changed.

4) For three columns widths, make name and note column width twice as dose column width.
And use percentage as width unit.
Column Widths: 100, 50, 100
Column Width Unit: %

__ j. Inside the table, select the Text view in each column, change the label to Name, Dose, and Note
in the Properties view, General section.


__ k. Save all the DiagnoseInfoView editor changes.

____ 2. Implement auto text completion function for the Transfer to field using AJ AX service.

You build an Ajax service when you want a Coach View to send data to
or retrieve data from the server asynchronously. The Coaches Toolkit
provides a Default Autocompletion Service, you are going to extend it
with same variables and add a specific implementation.

__ a. From User Interface category, click + sign and choose Ajax Service.

__ b. In the New Ajax Service dialog, enter CareUnitAutoCompletionService as the name and click
Finish.


__ c. First switch to the Variables tab. Click the Add Input button to add a text variable of type String.

__ d. Click Add Output button and add a results variable of type String and select Is List checkbox.

You could also copy the Default Autocompletion Service from Coaches toolkit
to the Emergency Room Process App. Then rename it to
CareUnitAutoCompletionService. In this way, the input and output variables are
carried over.

__ e. Switch to the Diagram tab, drag a Server Script in between Start and End node and name it
Care Unit auto completion.

__ f. Wire it from Start and to End as shown. Once done, click Selection tool or press Esc key to
release the Sequence Flow tool.


__ g. Select the Care Unit auto completion. In the Properties view, the Implementation section,
enter the following script. The script implementation is pretty straight-forward. When the input text
is entered with a letter, the corresponding result choices are displayed for selection.

tw.local.results = new tw.object.listOf.String();

i f (tw.local.text == "a") {
tw.local.results[0] = "Acute Care Unit";
} el se i f (tw.local.text == "i") {
tw.local.results[0] = "Intensive Care Unit";
} el se i f (tw.local.text == "s") {
tw.local.results[0] = "Surgery Room";
tw.local.results[1] = "SpecialCare Nursery";
} el se {
}

__ h. Click the Save icon on top of the editor.

__ i. At the top of the editor, click the drop down triangle button and switch to the DiagnoseInfoView.

__ j. On the Layout tab, select Transfer to Text view.

__ k. Under Properties view Configuration section, make the following configuration changes:

1) Check the Enable Autocompletion checkbox.

2) For the Autocompletion Service, click Select and choose
CareUnitAutoCompletionService from the list.

3) In Autocompletion Delay, set 200 as the default unit is millisecond.

__ l. Save the configuration changes.

____ 3. Update the Temperature view on the Triage page to use the new TemperatureConverterView.

__ a. Open the Diagnose Service from User Interface category Human Service list. Switch to
Coaches and select Triage Information tab.

__ b. Find the Temperture output text view and select it. In its Properties view, General section, click
the Select button for the view. Set the view to use the TemperatureConverterView.


__ c. The view should be set to TemperatureConverterView. Click Save.

On the Triage Information page, the information is read only. You dont
need to specifically change the visibility to Read Only for the Temperature
view because its container, Symptom vertical section, is already set to
Read Only. The temperature view will inherit from its parent by default.


__ a. Open Diagnose Service human service editor from the User Interface category. On top right
corner of the editor, click the Run Service button.

__ b. In the web browser, you should see four tabs. Select Diagnose Information tab. The Admit to
Hospital? checkbox is unchecked by default and the Prescription table is empty. When there
are no rows in the table, only header is visible.


__ c. Click button. Enter Tamiflu 75 mg in the Name cell. Click the Dose cell to turn the output text
into an input text field. Enter 10. Same way to enter Once a day with meal in Note cell.

__ d. Click button to add another medicine.

Name: Tylenol 3
Dose: 30
Note: Every 6 hours

The table should look like:


Feel free to add and delete entries in the table. You can also adjust the column
width directly on the table border.

If you turn on the table pagination configuration in the Process Designer, you will
see the pagination control at the bottom of the table during playback. The
pagination is fully a client side implementation.

__ e. Now check the checkbox in front of Admit to Hospital?. The Prescription table hides and
Transfer to field shows.

__ f. In the text field, type in letter s, i, or a. You should see the available choice in the drop down.

__ g. You have just verified that the newly implemented requirements are working properly.

You have finished implementing the enhancements for the Diagnose Service. The next and last
requirement is to create a new Discharge Patient service.


Task 4: Create a new Discharge Patient human service with a Coach

To increase the patient service satisfaction, the ER department decided to
add a new discharge service, which gives the patient a summary page
including the prescriptions.

____ 1. Create a new Discharge Service.

__ a. From process library User Interface category, click +sign and choose Human Service.

__ b. In the New Human Service dialog, enter Discharge Service as the name and click Finish.

__ c. Switch to the Variables tab and define the local variables.

Enter the following input and private variables.
Input:
patientInfo (type: PatientInformation)
diagnoseInfo (type: DiagnoseInformation)
erTimeRecord (type: ERTimeRecord)
Private:
title (type: String)


__ d. Save all defined variables. Switch to the Diagram tab.
Add a Server Script to the diagram and name it Initialize title.

__ e. You use the input patient name information to construct the variable title value. In the Properties
view Implementation section, add the following script.

i f (tw.local.patientInfo == undefined) {
tw.local.title = "Emergency Room Assessment";
} el se {
tw.local.title = "Emergency Room Assessment for "
+ tw.local.patientInfo.basicInfo.firstName + " "
+ tw.local.patientInfo.basicInfo.lastName;
}

__ f. Add a Coach next to the Initialize title script, and name it Discharge form.


A boundary event is needed in the coach so that the coach can be wired
to the next state. Here since the coach is empty, the wire from the
Discharge form to the End node is disabled. You will finish the wiring part
after the coach implementation.

____ 2. Create a coach form using a template.

__ a. Switch to Coaches tab and select the Discharge form coach from the left side. The Select a
Template dialog pops up. Choose the Select a template radio button and select the
ERLogoTemplateView, click OK.

__ b. The ER form template is laid on the canvas. Drag a Vertical Section from the palette and drop
into the content box. It will contain the form title and patient assessment summary information.


__ c. In the Vertical Section Properties view, General section, click use variable button for the
Label. Then click Select button and choose the private title variable.

__ d. You should see the vertical section label on the canvas is changed to tw.local.title. Expand the
Variables drawer in the palette. Inside the erTimeRecord variable, drag checkinTime and
diagnoseTime into the vertical section container.

__ e. Change both Date and Time Pickup View labels in the Properties view, General section to
Checkin Date and Time and Assess Date and Time respectively. Also change the Visibility
value to Read Only for both of them.


__ f. In the Configuration section, select the checkbox for Include Time Picker so that the time will be
shown.

__ g. Expand the diagnoseInfo variable and drag summary in between two date time picker views.

__ h. In the Properties view, General section, change the label to Summary.
Then change the view from Text to TextArea, and set the Visibility to Read Only.


__ i. Next, drag and drop the prescription variable under the vertical section, but inside the outer
content box area.

__ j. In the table Properties view, General section, select Read Only for the visibility for the whole
table.

__ k. In the Configuration section, make the following configuration changes:
Selection Type: No Selection
Initial Width: 650px
Column Widths: 100, 50, 100
Column Width Unit: %


__ l. By selecting the text field inside the table cell, change the table column labels in Properties view
General section.
name 1 Name
dose 1 Dose
note 1 Note


__ m. Next you will create two buttons, one to launch a print window to print the current page and one
finish button to end the service. To make two buttons side by side, add a Horizontal Section under
the prescription table.

__ n. Remove the label value of the Horizontal Section since it is just served as a container.

__ o. Drag one Button from palette inside the horizontal section. In the Properties view, General
section, change the label to Print.


__ p. Click HTML Attributes section in the Properties view. In the Override area, click Add Attribute
button.

__ q. On the right hand side Attribute Details area, enter onClick in the Name field and a one line script,
window.print(); in the Value field. The attribute is added to the button in HTML. When its clicked,
the default print window will be launched.

__ r. Add another button from palette into horizontal section next to the Print button, name it Finish in
Properties view General section.

__ s. Save the coach form.

____ 3. Wire the human service.


__ a. Switch to Diagram tab. Take the Sequence Flow tool and wire from Start to Initialize title, and
then from Initialize title to Discharge form.

__ b. Continue the wire from the Discharge form to the End. Since there are two buttons, Print and
Finish, on the form, it randomly picks one of them as the form end state binding. The Finish
button is the one that really completes the form.

__ c. If you get the Print button instead, do the following, otherwise, go to step d.

1) Select the wire that has Print button. In its Properties view Line section, click Select
button inside Behavior area.

2) It launches a wiring dialog that contains the Discharge form visual content. Scroll down to
the horizontal section that has two buttons. Click the Finish button in the dialog.


3) The wiring dialog disappears and Finish button should be shown on the wire and the End
State Binding section.

__ d. Click the Save icon at the top of the editor.

____ 4. Add new user activity in the process and set the human service implementation.

__ a. Open the Simple ER Process in the BPD editor. On the Diagram tab, drag an activity from
palette to the Receptionist swim lane. Name the new activity Discharge Patient.


__ b. In the activity Properties view, General section, change the activity presentation color to green.

__ c. Select the Admit? gateway No path, and rewire it to Discharge Patient activity and use
Sequence Flow tool to add a new wire from Discharge Patient to Leave Hospital end node.


__ d. Click Selection tool icon in the palette or press Esc key to release the Sequence Flow tool.

__ e. Select Discharge Patient activity. In its Properties view, Implementation section, click the
Select button and choose Discharge Service from the list.

__ f. In the Task Header area, enter the subject for this task. The subject includes the patient first name
and last name based on the value of local variable patientInfo. Also enter the narrative of the task
which will be displayed when using the Process Portal task list.


Subject:
Di schar ge Pat i ent : <#=t w. l ocal . pat i ent I nf o. basi cI nf o. f i r st Name#>
<#=t w. l ocal . pat i ent I nf o. basi cI nf o. l ast Name#>
Narrative:
Pr i nt pr escr i pt i on and hand over t o pat i ent . Gi ve advi ce t o pat i ent i f
physi ci an gi ves speci al not es.

__ g. In the Data Mapping section of the Properties view, click the Select a variable icon and
choose the local variables map to corresponding input parameters.

____ 5. Set the default value for the temperature attribute in the TriageInformation variable, in the Simple
ER Process.

__ a. Since the temperature parameter was changed from a simple Decimal type to a complex
Temperature business object, the business object doesnt have a default value set yet. Click the
Variables tab in the process editor, and then select the private variable
triageInfo(TriageInformation).


__ b. On the right side, in the Default Value section, the Has Default option should be selected. Under
the temperature property, there is no value for either the temperature or useFahrenheit. Click
on the value cell of temperature, it turns into an editable cell (cursor blinks). Enter 0. Click on the
empty value of useFahrenheit, enter false.

__ c. Save all the changes. Since the Discharge Patient coach form needs the input data to see the
result, you will verify the results in the next part of this exercise.


Part 3: Testing the Coaches using Process Designer Inspector

____ 1. Run Simple ER Process.

__ a. In the Designer, double click Simple ER Process business process definition from Processes
category from the library.

You can also click Simple ER
Process link on Process App
Settings page under Exposed
Items section.

__ b. Click the run button at the top right corner of the BPD editor.


If you get a Switch View? pop-up dialog, select Yes. You can also check Remember
decision? if you want to switch to Inspector view for all BPD tests in the future.

__ c. Select the Simple ER Process instance displayed under the Process Instances tab (for
example, Simple ER Process:104 in the screen capture below). The current task for the
selected process instance is shown on the right side. You will also see a red token indicating
which activity the current instance is on in the lower Diagram view.

__ d. The current task for the selected process instance is the Check In Patient activity. Select the task
and click Run the selected task icon.


__ e. Select the user that should execute this task. Mary is the receptionist pre-configured in this lab,
select Mary in the Pick User From Role dialog and click OK.

__ f. After you provide the password, your default local system browser will open the coach form for the
Check In Service.

__ g. Enter 123-456-789 in the Health Card Number field and click Patient Lookup button.

__ h. You should see the patient data are filled in automatically. Click the Submit button.


__ i. This completes the Check In Service. Close the browser window and return to Process
Designer.

__ j. Click on the Refresh icon. The status of Check In Patient changes to Closed. Now move to the
next step. You should see the task Triage Patient: Jane Doe is available.

__ k. Select the task and click the Run the selected task icon. In the Pick User From Role dialog
select user Tom and select OK.

__ l. The Triage form is launched. It contains three tabs.
The first Patient Information tab contains read-only patient information entered by Mary.
The third, the Time Logs tab records the task execution time in this process.
The second, the Triage Information tab is for the triage nurse to record the initial
assessment. Fill in the triage information as you please.

__ m. Click the Submit button to complete the Triage service.
Close the browser window and return to the Process Designer.

__ n. Click on the Refresh icon to see the next step in the Simple ER Process. The Diagnose Patient
task is received. Select it and click the Run the selected task icon. In the Pick User From Role
dialog, select either Harry or Lisa, one of the physicians, and select OK.


__ o. The Diagnose form has four tabs. In addition to the Patient Information, Triage Information,
and Time Logs tabs, which are in read-only mode, the Diagnose Information tab is now
available for the physician to record the final assessment.

__ p. By checking/unchecking the checkbox in front of Admit to Hospital?, you can see the switch of
the Prescription table and Transfer to text field. You can play around with the auto-completion
function for the Transfer to text field. But before submitting, make sure the Prescription table is
visible. Because you want to verify the new discharge patient form, leave Admit to Hospital?
unchecked. Then click Submit.

__ q. Refresh the task list in the Process Designer Inspector. You should see the Discharge Patient
form.


__ r. Select the task and click the Run the selected task icon. In the Pick User From Role dialog
select Mary and then select OK.

__ s. On the Discharge Patient form, you can see the summary of the patient assessment along with
the prescription. All fields on the form are read only.

__ t. Click Print button, a Print window is launched. You may print to a file to check the actual print
result.


__ u. Click Finish to complete the process.

____ 2. Create a snapshot and export the complete version of the business process application.

__ a. Switch to the Process Center view in Process Designer.

__ b. On the Process Apps tab, click the Emergency Room Process App (ERPA1) process application.

__ c. On the process application Snapshots page, click Create New Snapshot on the right side panel.

__ d. On the Create New Snapshot dialog, enter:

Snapshot name: Coach-Lab-Completed
Description: This is a completed version of Coach lab.

And then click the Create button.

__ e. On the Snapshots page, click the Export option on the right side of the Coach-Lab-Completed
snapshot.

__ f. On the Export Process App dialog, keep the default IBM BPM export (.twx) file type selected,
click the Export button.

__ g. You will be prompted for the file download. Click Save.

__ h. On the next Save As dialog, navigate to a local directory and click Save. You have saved the
completed version of Emergency Room Process App process application in .twx file format.

Congratulations! You have successfully completed all the coach form improvements.

What you did in this exercise

In this lab you did the following:
Add a Patient Lookup integration service to human service
Create a Patient Lookup button on the coach and plug with the integration service call
Create a new coach view for temperature conversion
Customize coach view behaviors to show and hide the UI components in the view.
Configure various stock coach views
o Check Box use radio buttons show temperature unit
o Table adjust width, set visibility, show add/delete buttons, pagination;
o Text configure auto completion and add HTML attribute
o Button add print function
Customize view instance using CSS class
Use a template to start building a new coach for discharge patient
Choose specific boundary event on the coach using wiring dialog on Discharge form
Implement an AJ AX service for text auto-completion function
Playback individual human service and test the entire BPD to verify the implementation

Bpmv80 Coaches Sample

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Bpmv80 Coaches Sample

Загружено:

Авторское право:

Доступные форматы

Copyright IBM Corporation 2012 All rights reserved

Вам также может понравиться