Oracle WebCenter Portal 11g Developer Workshop

Oracle WebCenter Portal 11g Developer Workshop Lab 11 Creating The Patient Chart Task Flow Page 1 of 45

Overview In the previous lab, you developed and deployed a portlet to the portal. In this lab, you will see how to develop a Task Flow. A Task Flow is a feature developed by Oracle and used extensively in Oracle Applications. Task Flows encapsulate control flow rules, activities and managed beans to implement business modules. You can think of a Task Flows as a local portlet. Some of the characteristics of Task Flows are: Task Flows are packaged into ADF Libraries (JAR files), which is associated with the Portal application. Task Flows run locally on the server, providing better performance. Task Flows are easier to reuse and customize than portlets. Task Flows can leverage page skin, keeping visual identity. The goal of this lab is to create a Patient Chart Task Flow, to display transactional information in the Portal page. The Patient Chart will display a list of patients, and for each patient, their picture, a list of consultations, problems reported, their medications and vital information. This information will be stored in a database. The patient s history will also be displayed; this information will come from WebCenter Content. At the end of this exercise, you will be able to: 1. Develop a new Task Flow 2. Use Business Components to map database tables 3. Use visual components to display information 4. Publish and consume the Task Flow in WebCenter Portal Page 2 of 45

Instructions Creating the Project 1. Open JDeveloper and create a New Application. Name the application OHPatientChartTF and select the Fusion Web Application (ADF) template. 2. For the remaining screens of the wizard, keep the default values. Click Finish to create the application. 3. Right-click the Model project and select New ADF Business Components -> Business Components from Tables. 4. Create a new connection to the HR schema. Page 3 of 45

5. In the Entity Objects screen, click on the Query button and select the following tables: Consultation, Doctor, Medication, Patient, Problem, Vital. 6. In the Updatable View Objects, move all objects to the right panel. Click Next. Page 4 of 45

7. In the Read-Only View Objects screen, click Next. 8. Leave the remaining settings with their default values and click Finish to create the components. 9. You can test if the relationship between the tables is being used by the Business Components that were created by right-clicking the AppModule and selecting Run. 10. Double click the ConsultationPatientLink1 component. This component implements the master-detail relationship between the Patients and Consultation tables. That way, we can see consultations by patient. Page 5 of 45

11. If your environment doesn t have these master-details components, review your database tables before continuing. Close this window. 12. Right-click the ViewController project and select New -> JSF -> ADF Task Flow. Click OK. 13. Set the File Name as patients-task-flow and the Task Flow ID as OraHealth-Patients. Click OK. 14. In the Diagram Editor, drag & drop a View component into the Task Flow. Name this view PatientsView. Page 6 of 45

15. Double-click the View to create the file. Leave the default values and click OK. 16. The first task is to prepare the layout of the page. To do this, you will use the panelgrouplayout component, in the following structure: Page 7 of 45

17. Drag and Drop a Panel Group Layout component from the Component Palette to the root component in the Structure Panel Page 8 of 45

18. Set the following properties to this component: o Layout: Vertical o InlineStyle: width:900px; 19. Drag another Panel Group Layout and drop it inside this Panel Group Layout. Set the layout as Horizontal, Valign Top and the InlineStyle as width:900px;. 20. Add 2 Panel Group Layout components into the horizontal Panel Group Layout. They will represent the columns in our Task Flow. Set first Panel Group Layout to layout Scroll, Valign Top, InlineStyle width:250px; overflow-y: scroll; overflowx: hidden;. Set the second Panel Group Layout to layout Vertical, InlineStyle width:640px;padding-left:10px;. o PS: JDeveloper will raise an error for the overflow property. You can ignore it. 21. So far, your Structure Panel should look like this: 22. In the af:panelgrouplayout scroll, add a Panel Group Layout. It will serve as a title box. Set the following properties: o Halign: Center o Valign: Top o Layout: Vertical o InlineStyle: background-color:gray; width:250px; 23. In the Component Palette, expand the Common Components tab and drag & drop an Output Text component into this new Panel Group Layout. Set the following properties to the Output Text: o Value: Patient Chart o InlineStyle: font-size:large; font-family:verdana, Arial, Helvetica, sans-serif; color:white; Page 9 of 45

24. In the af:panelgrouplayout vertical (the right column, ID pgl4), add 5 Panel Group Layout Components. Set their properties following these guidelines: o Panel Group Layout 1 (ID pgl6) HAlign: Left Layout: Vertical InlineStyle: width:640px;padding-bottom:15px; o Panel Group Layout 2 (ID pgl7) VAlign: Top Layout: Horizontal o Panel Group Layout 3 (ID pgl8) Layout: Vertical InlineStyle: padding-bottom:10px; o Panel Group Layout 4 (ID pgl9) Layout: Vertical InlineStyle: padding-bottom:10px; o Panel Group Layout 5 (ID pgl10) Layout: Vertical InlineStyle: padding-bottom:10px; 25. Inside the Panel Group Layout Horizontal (ID pgl7), add 2 Panel Group Layout components. Set the following properties: o Panel Group Layout 6 (ID pgl11) Halign: Center Valign: Middle Layout: Vertical InlineStyle: width:150px; height:100px; o Panel Group Layout 7 (ID pgl12) Layout: Vertical InlineStyle: width:440.0px; 26. Inside the Panel Group Layout 7 Vertical (ID pgl12), add 2 Panel Group Layout components. Set the following properties: o Panel Group Layout 8 (ID pgl13) Layout: Vertical InlineStyle: padding-bottom:15px; Page 10 of 45

o Panel Group Layout 9 (ID pgl14) Layout: Vertical 27. For the right panel, we will place the tables inside Panel Header components, to have meaningful titles to each table. Add one Panel Header component to each of these Panel Group Layouts: o Panel Group Layout 8 (pgl13). Text: Reported Problems. o Panel Group Layout 9 (pgl14). Text: Consultation History. o Panel Group Layout 3 (pgl8). Text: Patient History. o Panel Group Layout 4 (pgl9). Text: Medication. o Panel Group Layout 5 (pgl10). Text: Patient Management. 28. Your page should now look like the image below. Make sure you have all the components in order before continuing. 29. The page is ready to receive the database information. Expand the Data Controls tab and select the PatientView1. Drag & Drop this component into the af:panelgrouplayout scroll (ID pgl3). Select Table -> ADF Read-Only Dynamic Table. Page 11 of 45

30. A Table was created inside this Panel Group Layout. Set the following property: o InlineStyle: height:650px; 31. Expanding the table, there is an af:foreach component that must be removed. The best way to do it is by editing the source code. Go to the Source tab and find the line with the <af:foreach tag. Delete this and the </af:foreach> tags. Page 12 of 45

32. Go to the Design tab, select the af:column component and set the following properties: o Sortable: false o HeaderText: [leave it blank] o Width: 250 o Minimum Width: 250 o Sort Property: [leave it blank] o ShowRequired: false o HeaderNoWrap: true o NoWrap: true o RowHeader: false o InlineStyle: background-color:background; 33. Inside the af:column component, there is an Output Text. Delete this component and add a Panel Group Layout inside the Column, with the following properties: o Halign: left o Valign: top o Layout: vertical 34. Inside this Panel Group Layout, add a Panel Group Layout, with the following properties: o Halign: left o Layout: horizontal 35. Inside the Panel Group Layout horizontal (ID pgl16), add 2 Panel Group Layout components, with the following properties: o Panel Group Layout (ID pgl17) Halign: Left Layout: Vertical InlineStyle: width:180.0px;padding-left:5px; o Panel Group Layout (ID pgl18) Layout: Vertical InlineStyle: width:30.0px; 36. Add a Spacer component between the two Panel Group Layout components. It can be found in the Layout tab of the Component Palette. Leave the default settings. Page 13 of 45

37. In the Panel Group Layout vertical (ID pgl17), add 3 Panel Group Layout components, all with the following settings: o Halign: left o Layout: horizontal o InlineStyle: padding-top:2px;padding-bottom:2px; 38. Add the following components to the 3 Panel Group Layout components: o Panel Group Layout 1 (ID pgl19) Output Text Output Text Spacer Value: #{row.patientlastname} InlineStyle: color:white; font-family:verdana, Arial, Helvetica, sans-serif; font-size:medium; fontweight:bold; Value:, [comma] InlineStyle: color:white; font-family:verdana, Arial, Helvetica, sans-serif; font-size:medium; font-weight: bold; Height: 0 Width: 3 Output Text Page 14 of 45

Value: #{row.patientfirstname} InlineStyle: color:white; font-family:verdana, Arial, Helvetica, sans-serif; font-size:medium; font-weight: bold; o Panel Group Layout 2 (ID pgl20) Output Text Value: #{row.patientgender eq "M"? "Male" : "Female"} Spacer InlineStyle: color:orange; Height: 0 Width: 10 Output Text Output Text Value: Birth Date: InlineStyle: color:orange; Value: #{row.patientbirthdate} InlineStyle: color:orange; o Panel Group Layout 3 (ID pgl21) Output Text Output Text Value: Doctor: InlineStyle: color:yellow; Value: #{row.patientdoctor} InlineStyle: color:yellow; 39. Your page should now look like the image below. Make sure you have all the components in order before continuing. Page 15 of 45

40. In the Panel Group Layout - vertical (ID pgl18), add an Image component. Set the following properties for the image: o Source: #{row.patientgender eq "M"? "http://server:7777/webcenter/content/conn/ucmserver/path/contribution%20folde rs/orahealth/images/male.png" : "http://server:7777/webcenter/content/conn/ucmserver/path/contribution%20folde rs/orahealth/images/female.png"} o InlineStyle: width:30px; 41. Now we will work on the right panel. In the first Panel Group Layout vertical (ID pgl6) inside the right side Panel Group layout, add a Panel Group Layout component, with the following properties: o Halign: left o Valign: middle o Layout: horizontal o InlineStyle: background-color:gray; width:650px; paddingtop:5px;padding-bottom:3px; Page 16 of 45

42. Inside this new Panel Group Layout, add the following components: o Spacer Height: 0 Width: 10 o Output Text o Spacer Value: Patient: InlineStyle: color:white; font-family:verdana, Arial, Helvetica, sans-serif; font-size:medium; font-weight:bold; Height: 0 Width: 5 o Drag and Drop the PatientLastName attribute from the PatientView1 data control. Select Text -> ADF Output Text. o Set the following properties: Page 17 of 45

InlineStyle: color:white; font-family:verdana, Arial, Helvetica, sans-serif; font-size:medium; font-weight:bold; PartialTriggers: Click on the arrow ( ) icon and select Edit. In the selection panel, select the table* - t1 component and move it to the Selected column. o Output Text o Spacer PS: This is the ID of the table. That way, every time the user chooses another record from the table, the value will be updated accordingly. IMPORTANT: do not type the value directly in the field, because the binding will not be correct. Always select the table from this window. Value:, InlineStyle: color:white; font-family:verdana, Arial, Helvetica, sans-serif; font-size:medium; font-weight:bold; Height: 0 Width: 3 o Drag and Drop the PatientFirstName component from the PatientView1 data control. Select Text -> ADF Output Text. Set the following property: InlineStyle: color:white; font-family:verdana, Arial, Helvetica, sans-serif; font-size:medium; font-weight:bold; Page 18 of 45

o Spacer PartialTriggers: Click on Edit and select table* - t1 Height: 0 Width: 400 43. We will now add the patient s picture to the chart. The Panel Group Layout vertical (ID pgl11) is located inside the Panel Group Layout horizontal, beneath the one we just edited. Drag and Drop the PatientPicture to the Panel Group Layout, and select Text -> ADF Output Text as the format. In the PartialTriggers property, Click on Edit and select table* - t1. 44. Add an Image component to this Panel Group Layout, and set the following properties: o Source: http://server:7777/webcenter/content/conn/ucmserver/path/contribution% 20Folders/OraHealth/images/patients/#{bindings.PatientPicture.inputValue} o PartialTriggers: Click on Edit and select table* - t1 45. Your page should now look like the image below. Make sure you have all the components in order before continuing Page 19 of 45

46. Drag and Drop the ProblemsView2 data control (located inside the PatientView1 data control) to the Reported Problems Panel Header and select Table -> ADF Read-only Table. 47. In the wizard, leave the default values and click OK. 48. Set the following properties for the Table component: o Width: 480px; o styleclass: AFStretchWidth o AutoHeightRows: 150 Page 20 of 45

o PartialTriggers: Click on Edit and select table* - t1 49. Expand the Table component and remove the first 2 columns (ProblemId and PatientId). Adjust the remaining columns width to fit the available space (480px). Also, adjust the HeaderText property to a more user-friendly label. 50. Drag and Drop the ConsultationView3 data control (located inside the PatientView1 data control) to the Consultation History Panel Header and select Table -> ADF Read-only Table. 51. Accept the default values and click OK. Repeat the same configuration as above, removing the ConsultationID and PatientID columns and adjusting the table and column properties. Set the following properties for the Table component: o Width: 480px; o styleclass: AFStretchWidth o AutoHeightRows: 150 o PartialTriggers: Click on Edit and select table* - t1 52. Drag and Drop the MedicationView3 data control (located inside the PatientView1 data control) to the Medication Panel Header and select Table -> ADF Read-only Table. Page 21 of 45

53. Accept the default values and click OK. Repeat the same configuration as above, removing the ID columns (in this case, the first 2 columns), and adjusting the table and column properties. Set the following properties for the Table component: o Width: 600px; o styleclass: AFStretchWidth o AutoHeightRows: 100 o PartialTriggers: Click on Edit and select table* - t1 54. Drag and Drop the VitalView3 data control (located inside the PatientView1 data control) to the Patient Management Panel Header and select Table -> ADF Read-only Table. Page 22 of 45

55. Accept the default values and click OK. Repeat the same configuration as above, removing the ID columns (first 2 columns), and adjusting the table and column properties. Set the following properties for the Table component: o Width: 600px; o styleclass: AFStretchWidth o AutoHeightRows: 120 o PartialTriggers: Click on Edit and select table* - t1 56. It s time to test our application. But we can t execute a JSF page fragment (.jsff) directly. We need to create a.jspx file to contain the Task Flow. Right-click the ViewController project and select New -> JSF -> JSF Page. Name the page PatientTFConsumer.jspx and click OK. Page 23 of 45

57. Drag and drop the OraHealth-Patients Task Flow into the page and select Region. 58. Start the embedded server throught the Run -> Start Server Instance menu. If this is the first time you execute the embedded WLS, a configuration screen will appear. Page 24 of 45

59. Wait until the <Server started in RUNNING mode> appear in the log. You can display the log through the View -> Log menu. 60. Right-click the PatientTFConsumer.jspx page and select Run. 61. The page will be displayed in the web browser Page 25 of 45

62. Browse through the patients on the list; the panels on the right side will refresh to show the patient s information. If the refresh is not working, re-check your steps before continuing. Bringing Documents from WebCenter Content 63. The Patient History information will come from WebCenter Content. There is a folder called wikidocs in the Contribution Folders/OraHealth folder. This folder contains an HTML file for each patient. 64. In JDeveloper, select the Panel Header for Patient History and set the following properties: o Icon: http://server:7777/webcenter/content/conn/ucmserver/path/contrib ution%20folders/orahealth/images/guy.gif o InlineStyle: border-color:navy; border-style:solid; borderwidth:thin; margin-top:10px; 65. Drag and Drop an Inline Frame component from the Component Palette -> Layout Tab into the Panel Header for Patient History. Set the following properties for the Inline Frame: Page 26 of 45

o Source: http://server:7777/webcenter/content/conn/ucmserver/path/contribution% 20Folders/OraHealth/wikidocs/#{bindings.PatientFirstname.inputValue}#{bi ndings.patientlastname.inputvalue}.htm o StyleClass: AFStretchWidth o InlineStyle: height:200.0px;margin-top:10px; o PartialTriggers: Click on Edit and select table* - t1 66. Run the application again to check if the history files correspond to the patient. Preparing the Data Source 67. Before being able to deploy the Task Flow, we need to reconfigure the database connection (the app will need to use a Data Source for DB connection). Right click the AppModule and select Configurations Page 27 of 45

68. Click on the Edit button and change the Data Source to jdbc/hrds. Click OK. 69. Select the AppModuleShared, click on Edit and change the Data Source to jdbc/hrds. Click OK and OK again to close the configuration window. Page 28 of 45

70. Now we need to create the Data Source on WLS. If you have already created the Data Source in the previous lab, skip to step 79. 71. Open Weblogic Console by browsing to http://server:7777/console/ 72. Expand the Services node and click on Data Sources. In the data source list, click on New -> Generic Data Source. 73. Set the Name as HRDS and the JNDI Name as jdbc/hrds. Page 29 of 45

74. Click Next. Select the Oracle s Driver (Thin) for Instance 75. Set the Connection information according to the image below: Page 30 of 45

76. Click on the Test Configuration button. A Test Successful message should appear. Page 31 of 45

77. Set the targets as AdminServer, WC_Portlet and WC_Spaces. 78. Now the Task Flow is ready for deployment. Deploying the Task Flow Page 32 of 45

79. Right-click the ViewController project and select New > Deployment Profiles > ADF Library JAR File. 80. Set the name of the Deployment Profile as OHTaskFlowADFLibrary. Click OK. In the next screen, keep the default values and click OK. 81. The new Deployment Profile will appear in the list. Click OK to close this window. 82. Click on the File menu and choose New -> General -> Generic Project. 83. Set the project name as MySharedLibrary and click Finish. This project will be used to package the Model and ViewController projects to be deployed as an ADF Task Flow. 84. Right-click the MySharedLibrary project and go to Project Properties. In the Deployment tab, click New select Archive Type WAR File and set the name as ADFSharedLibraryOHTF. Click OK. Page 33 of 45

85. Go to the Profile Dependencies tab and check the OHTaskFlowADFLibrary library that we previously created. 86. Click OK and OK again to close the configuration screens. Page 34 of 45

87. Right-click the MySharedLibrary project and go to Deploy -> ADFSharedLibraryOHTF. 88. In the Deployment configuration screen, select Deploy to Application Server. 89. Click Next. If you don t have a connection to your application server configured, create one in this screen. 90. In the Weblogic Options screen, check Deploy to selected instances and select the WC_Spaces managed server. Also, check Deploy as Shared Library. 91. Click Next and Finish to deploy the Task Flow. Page 35 of 45

92. Once the deployment is finished, check the Weblogic Console to find the deployed library. 93. We will now create a Portal Extension project, which will associate this library to the Portal application. This configuration is necessary for our Task Flow to appear in the Resource Catalog. PS: This procedure only needs to be done once; other Task Flows that are created can be associated with this project, without having to create a new extension. 94. Go to File menu and select New -> Applications -> WebCenter Portal Server Extension (PS: this option only appears in the most recent version of the WebCenter Portal extension for JDeveloper. If you cannot find this option on the list, update the Portal extension). 95. Name the application OHPortalExtension and click Finish. Page 36 of 45

96. Right-click the PortalSharedLibrary project and select New -> Deployment Descriptors -> Weblogic Deployment Descriptor. Page 37 of 45

97. In the wizard, select weblogic.xml and version 10.3. Click Finish to create the file. 98. Go to the Libraries tab and add the ADFSharedLibraryOHTF. PS: This must be the same name as in Weblogic Console: Important: If this is the first time you are deploying a Task Flow, you can go ahead with the deployment. Otherwise, if you are adding a new Task Flow to the library (or re-deploying the library), you will need to edit the MANIFEST.MF file and increment the Implementation-Version attribute value. For the first deployment, the default value (11.1.2) is correct. Page 38 of 45

99. Right-click the PortalSharedLibrary project and select Deploy -> extend.spaces.webapp 100. Select Deploy to Application Server, select the connection to your application server. In the Weblogic Options screen, select the WC_Spaces managed server, and check Deploy as a Shared Library. Page 39 of 45

101. When the deployment is finished, check Weblogic Console. You will see two projects called extend.spaces.webapp (ours is the 11.1.2 version). 102. Restart the WC_Spaces managed server to able to use this Task Flow in the portal. When the message <Server started in RUNNING mode> appears, go to WebCenter Portal and login as weblogic. Consuming the Task Flow 103. Go to the Administration link and open the Shared Assets page. Click on the Resources Catalog tab, select the Default Portal Catalog, go to the Actions menu and select Copy. Page 40 of 45

104. Set the name as OraHealth Portal Catalog. Click OK. 105. The Resource Catalog will be created. Click on the Edit link to configure it. 106. Select UI Components and click on Add -> Add from Library. 107. In the components list, select Task Flows. In the right column, expand Design Mode and find our Task Flow, OraHealth-Patients. Click Add to include it in our catalog. Page 41 of 45

108. Check to see if the Task Flow is added to the UI Components folder. Click Save and Close. Page 42 of 45

109. Don t forget to check the Available option to make sure we can select it later. 110. Go to the Administration page of the OraHealth portal and click on the Settings tab. Change the default Resource Catalog to OraHealth Portal Catalog. 111. Edit the Our Patients page. 112. In the Resource Catalog pane, click on UI Components. We can see the Task Flow in that folder. Click on Add (or drag & drop it) to include it in the page. 113. Configure the Task Flow to hide the header. Page 43 of 45

114. Save the page and click on View Portal to view the page. 115. Go back to JDeveloper and stop the embedded weblogic server (Run -> Stop Server Instance). 116. Close JDeveloper. Page 44 of 45

Oracle WebCenter Portal 11g Developer Workshop LAB 11 Creating the Patient Chart Task Flow September, 2014 Author: Denis Abrantes Oracle Corporation World Headquarters 500 Oracle Parkway Redwood Shores, CA 94065 U.S.A. Worldwide Inquiries: Phone: +1.650.506.7000 Fax: +1.650.506.7200 oracle.com Copyright 2012, Oracle. All rights reserved. This document is provided for information purposes only and the contents hereof are subject to change without notice. This document is not warranted to be error-free, nor subject to any other warranties or conditions, whether expressed orally or implied in law, including implied warranties and conditions of merchantability or fitness for a particular purpose. We specifically disclaim any liability with respect to this document and no contractual obligations are formed either directly or indirectly by this document. This document may not be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without our prior written permission. Oracle, JD Edwards, PeopleSoft, Fatwire and Siebel are registered trademarks of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners. Page 45 of 45