Developing coaches in human services

Transcription

1 Copyright IBM Corporation 2012 All rights reserved 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 Task 3: Improve and update Diagnose Service coach form Task 4: Create a new Discharge Patient human service with a Coach Part 3: Testing the Coaches using Process Designer Inspector What you did in this exercise 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 AJAX service for the text auto-completion function Playback and test the implementation June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 1 of 69

2 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: Nurse: Physician: Mary Tom 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 June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 2 of 69

3 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 3 of 69

4 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 4 of 69

5 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 5 of 69

6 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 Open the Process Designer, if it is not already open 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 don t 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 6 of 69

7 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 7 of 69

8 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 Java 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 8 of 69

9 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 9 of 69

10 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 10 of 69

11 You can copy and paste the follow script snippet. tw.local.patientinfo = new tw.object.patientinformation(); tw.local.patientinfo.basicinfo = new tw.object.basicinformation(); tw.local.patientinfo.familyphysicianinfo = new tw.object.basicinformation(); if (tw.local.healthcardnumber == " ") { tw.local.patientinfo.healthcardnumber = tw.local.healthcardnumber; tw.local.patientinfo.basicinfo.firstname = "Jane"; tw.local.patientinfo.basicinfo.lastname = "Doe"; tw.local.patientinfo.basicinfo.phonenumber = " "; tw.local.patientinfo.age = 30; tw.local.patientinfo.gender = "female"; tw.local.patientinfo.address = "123 Main Street, Milton, ON N6Y 5T7"; tw.local.patientinfo.familyphysicianinfo.firstname = "John"; tw.local.patientinfo.familyphysicianinfo.lastname = "Smith"; tw.local.patientinfo.familyphysicianinfo.phonenumber = " "; } 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 11 of 69

12 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 12 of 69

13 d. Since it is a new function for the receptionist, it s 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 style="padding-bottom:25px;color:grey;">instruction: Enter patient's Health Card number and then click the Patient Lookup button, the patient information will be automatically filled in if the patient is registered in the system. Otherwise, fill in the data manually. </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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 13 of 69

14 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 healthcardnumber variable. and select the local input patientinfo June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 14 of 69

15 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 15 of 69

16 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 16 of 69

17 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 17 of 69

18 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 18 of 69

19 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 , and click the Patient Lookup button. d. Without a full page refresh, the patient information is automatically filled in. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 19 of 69

20 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 20 of 69

21 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 21 of 69

22 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. this.context.binding.get("value").bindall(lang.hitch(this, this.change)); var val = this.context.binding.get("value"); if (val.hasallergies) { this.context.getsubview("text1")[0].context.options._metadata.visibility.set("value", "DEFAULT"); } else { this.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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 22 of 69

23 You can copy and paste the follow script snippet to the change script area. this.context.binding.get("value").bindall(lang.hitch(this, this.change)); var val = this.context.binding.get("value"); if (event.property && event.property == "hasallergies") { if (val.hasallergies) { this.context.getsubview("text1")[0].context.options._metadata.visibility.set("value", "DEFAULT"); } else { this.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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 23 of 69

24 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 24 of 69

25 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 25 of 69

26 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 26 of 69

27 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 27 of 69

28 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 28 of 69

29 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. this.context.binding.get("value").bind("usefahrenheit", lang.hitch(this, this.change)); u. In change function, you use the temperature convert formula after detect the unit value change. var val = this.context.binding.get("value"); if (event.property && event.property == "usefahrenheit") { if (event.newval && val.usefahrenheit == event.newval) { val.set("temperature", val.temperature * 9/5 + 32); } else { val.set("temperature", (val.temperature - 32) * 5 / 9); } } v. Save all the changes. You have finished temperature converter view implementation. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 29 of 69

30 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 30 of 69

31 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 don t 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. 4. Playback the human service to verify the implementation. 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 31 of 69

32 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 32 of 69

33 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. It s 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 AJAX 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 33 of 69

34 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 34 of 69

35 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 35 of 69

36 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 36 of 69

37 k. Save all the DiagnoseInfoView editor changes. 2. Implement auto text completion function for the Transfer to field using AJAX 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 37 of 69

38 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 38 of 69

39 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(); if (tw.local.text == "a") { tw.local.results[0] = "Acute Care Unit"; } else if (tw.local.text == "i") { tw.local.results[0] = "Intensive Care Unit"; } else if (tw.local.text == "s") { tw.local.results[0] = "Surgery Room"; tw.local.results[1] = "SpecialCare Nursery"; } else { } 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 39 of 69

40 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 40 of 69

41 c. The view should be set to TemperatureConverterView. Click Save. On the Triage Information page, the information is read only. You don t 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. 4. Playback the human service to verify the implementation. 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 41 of 69

42 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: June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 42 of 69

43 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 43 of 69

44 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) June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 44 of 69

45 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. if (tw.local.patientinfo == undefined) { tw.local.title = "Emergency Room Assessment"; } else { 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 45 of 69

46 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 46 of 69

47 c. In the Vertical Section Properties view, General section, click use variable Label. Then click Select button and choose the private title variable. button for the 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 47 of 69

48 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 48 of 69

49 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 49 of 69

50 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: % June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 50 of 69

51 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 June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 51 of 69

52 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 52 of 69

53 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 it s 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 53 of 69

54 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 54 of 69

55 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 55 of 69

56 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 56 of 69

57 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 57 of 69

58 Subject: Discharge Patient: <#=tw.local.patientinfo.basicinfo.firstname#> <#=tw.local.patientinfo.basicinfo.lastname#> Narrative: Print prescription and hand over to patient. Give advice to patient if physician gives special notes. g. In the Data Mapping section of the Properties view, click the Select a variable icon choose the local variables map to corresponding input parameters. and 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 doesn t have a default value set yet. Click the Variables tab in the process editor, and then select the private variable triageinfo(triageinformation). June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 58 of 69

59 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 59 of 69

60 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 60 of 69

61 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 61 of 69

62 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 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 62 of 69

63 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 63 of 69

64 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 64 of 69

65 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 65 of 69

66 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: June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 66 of 69

67 Snapshot name: Description: Coach-Lab-Completed 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 67 of 69

68 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. June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 68 of 69

69 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 AJAX service for text auto-completion function Playback individual human service and test the entire BPD to verify the implementation June 28, 2012 IBM Business Process Manager 8.0 Lab Exercise Page 69 of 69