Build Mobile Apps for Oracle E-Business Suite with Oracle Mobile Platform – Part 1 Bruce Bailey Principal Mobile / Social Solutions Consultant

Srikant Subramaniam Director, FMW Product Management, AppAdvantage

Jagadeesh Shetty Senior FMW Sales Consultant

2

Table of Contents 1 WORKSHOP OVERVIEW ..................................................................................................................... 3 2 GETTING STARTED ............................................................................................................................. 4

2.1 Environment Setup ................................................................................................................ 4 2.2 Start JDeveloper 12c ............................................................................................................. 4

3 CREATE THE MOBILE APPLICATION ................................................................................................ 5 3.1 Open the Mobile Application ................................................................................................. 5 3.2 Create Web Service Data control .......................................................................................... 6 3.3 Create ExpensesList AMX Page ......................................................................................... 17 3.4 Clean up the Connections Metadata for Deployment ......................................................... 34

4 START ANDROID EMULATOR .......................................................................................................... 37 5 DEPLOYMENT .................................................................................................................................... 38 6 TESTING .............................................................................................................................................. 41

3

1 Workshop Overview Oracle’s Mobile Development Platform enables rapid and declarative development of native on-device mobile applications. These native applications provide a richer experience for smart devices users running Android or other mobile platforms. The mobile platform protects Oracle customers from technology shifts by adopting a metadata-based development framework that enables developer to develop one app (using Oracle JDeveloper), and deploy to multiple device platforms (starting with iOS and Android). Oracle Fusion Middleware provides the necessary infrastructure (via SOA Composite) to extend business processes and services to the mobile device, enabling the mobile user to participate in human tasks. When coupled with Oracle SOA Suite, the combination can enable mobile execution of business transactions on Oracle E-Business Suite (or any Oracle Application). In this workshop we build mobile solutions for Oracle E-Business Suite, using Oracle’s Mobile Development Platform and Oracle SOA Suite. The use case scenario is to allow managers to view and approve employee expense reports via an Android device. In the interests of time and to allow for successful completion of the workshop, the SOA composite that integrates with E-Business Suite has been prebuilt and deployed. Software Used:

Oracle SOA Suite 12c

Oracle Service Bus 12c

Oracle E-Business Suite 12.1.2

Oracle JDeveloper 12c Additional information: Fusion Middleware Best Practice Centers on Oracle Technology Network http://www.oracle.com/technetwork/topics/index-096924.html Questions:

Srikant Subramaniam (srikant.subramaniam@oracle.com)

Bruce Bailey (bruce.bailey@oracle.com)

Jagadeesh Shetty(jagadeesh.shetty@oracle.com)

4

2 Getting Started

2.1 Environment Setup 1. If you are running JDeveloper on a Linux system then edit the /etc/hosts file to update the IP address

entry for the soabpm-vm server your instructor has provided specifically for you. On some lab systems this is already pre-configured. You can test whether the hosts file is configured already by trying to ping the soabpm-vm as shown below prior to editing your windows hosts file.

Note: On Windows the host file is located in the C:\WINDOWS\system32\drivers\etc folder. E.g.,

192.168.2.151 soabpm-vm.us.oracle.com soabpm-vm

2. Once you have saved your edits of the hosts file it is a good idea to try to ping the soabpm-vm in

order to ensure that you can communicate with it. On Windows do this in a cmd (command) window. On Linux use a shell. The output from the ping command should look similar to the following:

Hint: You can also save a bit of time by launching the Android emulator now (see section 4).

2.2 Start JDeveloper 12c

1. Start > Oracle JDeveloper Studio. Alternately, locate the JDeveloper icon on the desktop and double-click on it.

2. In JDeveloper disable any proxy settings, via Tools > Preferences > Web Browser and Proxy > uncheck Use HTTP Proxy Server (this may already be configured)

5

3 Create the Mobile Application

3.1 Open the Mobile Application 1. In JDeveloper, select Open Application.

2. Navigate to your top Level JDeveloper project directory for the 1

st lab, e.g.,

C:\HOL9304\Lab1\ExpensesApprovalApplication\ExpensesApprovalApplication.jws

Click Open.

6

3. ExpensesApprovalApplication will now appear in the Navigator.

3.2 Create a REST Data control 1. In JDeveloper, right-mouse on the ViewController and select New -> From Gallery… as shown here

7

2. Set the Category to Data Controls on the left and then click on Web Service Data Control (SOAP/REST) on the right. Click OK.

8

3. In the Create Web Service Data Control wizard, do the following:

Enter RetrieveExpensesList in the Name: field

Select the REST radio button

4. Add a REST service Connection by clicking the green + icon.

9

5. In the Create REST Connection Pop-up screen enter the following data (HINT: in your top level lab directory there is a file called Lab1-URLs.txt containing the URL so you can copy and paste from there instead of typing it in yourself)

Name: OSBMobileAPIsConnection

URL Endpoint:

http://soabpm-vm:8011/OSBMobileAPIs_USERXX/ExpensesWorkList/expensesList?USER_NAME=USERXX

Edit the URL by replacing “USERXX” at the very end of the URL with your assigned user ID, e.g., USER01, USER02, etc… in the URL string. (Don’t edit the first occurrence of USERXX in the URL string - see picture below for an example of how to do this for the person assigned the user ID of USER01).

Click the Test Connection Button and observe the REST connection successful message, but don’t click OK just yet.

10

6. Now go back and edit the URL Endpoint to remove the “/expensesList?USER_NAME=USER01” part that you used for the test. The final URL Endpoint should look like the following:

http://soabpm-vm:8011/OSBMobileAPIs_USERXX/ExpensesWorkList

NOTE: This URL is literally the exact URL you want to substitute into the wizard as shown below. In other words, don’t modify it to include your assigned user ID.

Click OK

11

7. Click the Next Button in the Data Control screen to move onto the next step.

8. Now, on the Resource screen click the green + icon to add a resource path. This will add a default

Resource Path called “/path0”

12

9. Double-click on “/path0” in order edit the newly added resource path value. Change it to the value shown here. NOTE: Type in the following literally. Do NOT substitute your USERXX ID.

/expensesList?USER_NAME=##userName##

13

10. Now select the 'GET' method checkbox and type in “expensesList” for the Method Display Name.

Click Next

14

11. Under the Resource Methods: heading select the expensesList Resource Method that you specified in the previous step. Note that REST services can return different types of payloads, such as JSON or XML. This particular service returns XML, so we need to provide a schema file describing the payload format. Click on the magnifying glass to the right of the Response XSD: field

12. Browse to the Response XSD file, RetrieveExpensesListResponse.xsd

e.g., C:\HOL9304\Lab1\RetrieveExpenseListResponse.xsd Once you have selected the schema file click on Open and then click Next to move onto the last screen.

15

13. Click the Finish button in the last screen to complete the generation of the data control.

Click on File > Save All or alternatively click on the icon that looks like a stack of floppy disks in order to save all of your work.

16

14. The RetrieveExpensesList data control is created as shown. You may have to click the two circular

blue (refresh view) arrows in order to see your new data control.

17

3.3 Create ExpensesList AMX Page 1. In the Application Navigator, double click ExpensesApproval.xml. This will launch the Mobile task

flow editor.

2. Drag and drop a View from Component Palette onto the canvas (as shown – the Component Palette is over on the upper right side of Jdev). Click on the text box of the newly added page and rename it to ExpensesList.

18

3. Select Control Flow Case from the components palette on the right and create a flow from ExpensesList to ExpenseDetails. The sequence is:

First click Control Flow Case in the Components palette

Next, single click the ExpensesList View you just created in the task flow

Finally, single click on the ExpenseDetails View in the task flow

Name the flow “success” by editing the flow label (which is set to an asterisk * by default)

19

4. Repeat the above step to create another flow from Confirmation to ExpensesList as shown. Be sure also to name the flow path “success” as in the following screenshot.

5. Double click the ExpensesList View to bring up the page creation wizard. Ensure the Page Facets

are selected as shown. Click OK.

20

6. In the lower right hand corner is a small vertical bar which can be dragged left to create a split “screen” view of the main window. Drag it about ½ way left to the bottom-center of the ExpensesList.amx editor view as shown below.

21

7. Release the bar (stop dragging) when you are about ½ across the screen

8. Now click on the Preview tab on the bottom of the right hand view of ExpensesList.amx This trick allows you to see a rendered view of your page development progress as you go.

22

9. Expand the RetrieveExpensesList data control structure in the Data Controls view on the left, drag the P_RET_ARRAY_ITEM node to the ExpensesList canvas and drop it outside the last facet (to the right of the </amx:facet> tag) as shown. Notice that in the screenshot below a <carriage return> has been added after the </amx:facet> tag to make it easier to see where to drop the P_RET_ARRAY_ITEM node. The Create menu will appear. Select MAFList View…

23

10. Click on the Main-Sub text, followed by Styles as shown. Click OK.

24

11. Enter <YOUR ASSIGNED USER ID> (IN CAPITAL LETTERS AS SHOWN BELOW, e.g., “USER01”, “USER012”, …) in the Value field. Click OK (the user ID is the input to the data control we generated previously, allowing us to fetch all the expense reports for the manager who needs to approve them – note that you will be acting as the manager when you run the application).

12. Select the values for Main Text, Subordinate Text and Divider Attribute as shown. Click OK.

25

13. Right click on List Item in the Structure panel (bottom left of ExpensesList.amx screen) and select

Insert Inside List Item > MAF AMX….

v 14. Select Set Property Listener and click OK (when a specific report is selected by the user the

Property Listener will allow us to set a property value to the report ID, so that we can pass it to the ExpenseDetails page which will need it to get the report details).

15. Repeat the previous 2 steps to create a 2nd

Set Property Listener inside of the List Item

26

16. Click on Bindings (from the tabs at the bottom of the ExpensesList.amx page) as shown below.

17. Select the P_RET_ARRAY_ITEM binding (notice that its relationship to the underlying data control is automatically displayed).

18. Click on the pencil (edit) icon.

27

19. Ensure that the Display Attributes column contains the (3) fields as shown. This step is necessary because although bindings for the Subject and Begin Date for a given expense report were generated automatically when we created the MAF List View component, we will need access to the NOTIFICATION_ID for any given list entry later on in order to obtain the details for a particular expense report.

Click OK.

28

20. Click on the Source tab (the tab at the bottom-left of the Data Binding Definition page) in order to bring back the structure panel in the lower left of JDeveloper. Next, select the Output Text displaying SUBJECT and set Inline Style property to font-size:small;

21. Now set the output format for the Date field by selecting the Convert Date Time node in the Structure

View for the Output Text row.BEGIN_DATE and set Date Style property of ConvertDateTime to long

29

22. Next, let’s configure the first Set Property Listener to pass the selected Expense Report ID

(NOTIFICATION_ID) from our ExpensesList.amx page to the ExpensesDetails.amx page. Select Set Property Listener in the Structure panel (bottom left of screen).

23. Select Expression Builder in the From drop down list (bottom right of the screen).

30

24. Select inputValue as shown, noting that you have to scroll down to near the bottom of the Expression Builder to find it. Click OK.

25. In the Property Inspector (bottom right of the screen) set the report ID property that will be passed to the Details page. The properties can either be typed in as shown, or more easily added using the Expression Builder as in the previous step.

Enter #{pageFlowScope.notificationID} in the To field.

Select action from the Type drop down list.

31

26. Now select the 2nd Set Property Listener that you created earlier (we’ll use this to set <YOUR

ASSIGNED USER ID> to another property and pass it to the Details page - BE SURE TO INPUT YOUR USER ID IN CAPITAL LETTERS AS SHOWN BELOW, e.g., “USER01”, “USER012”, …)

27. In the Property Inspector (bottom right of screen)

Enter <YOUR ASSIGNED USER ID> in the From: field (IN CAPITAL LETTERS, e.g., “USER01”, “USER012”, …)

Enter #{pageFlowScope.UserID} in the To: field

Select action in the Type drop down list.

28. Select Output Text property for the header Facet in the Structure Panel (bottom left of screen).

29. Enter Expenses List in the value field (bottom right of the screen).

32

30. Finally, Select List Item in the Structure panel on the left. We need to specify that when a list item is selected by the user, that screen navigation will proceed from our ExpensesList page to the ExpenseDetails page (transfer of control along the “success” path we created between the two screens).

31. Select success in the Action drop down on the right. This will transfer control from our ExpensesList.amx page to the ExpenseDetails.amx page (In the graphical task flow, we will move from the ExpensesList page to the ExpenseDetails along the “success” control path.

32. Click on the ExpensesApproval.xml tab at the top to return to the task flow editor.

33

33. Right click on ExpensesList and select Mark Activity > Default Activity. This tells the MAF MVC controller which page to display once the application starts.

34. Select File > Save All.

34

3.4 Clean up the Connections Metadata for Deployment

1. Expand the Application Resources accordion menu below the JDev Project tree as shown in the

following screen shot and navigate to the connections.xml Applications Resources file. Double-click on it to open it up.

We need to replace the references to soabpm-vm in connections.xml with the SOA server’s actual IP address. The simplest way to do this is to select Search > Replace in Files…

35

2. In the Replace in Files screen set the following values

Search Text: soabpm-vm

Replace With: 192.168.2.151 (be sure to use the IP address for the SOA server provided by your instructor – it may not be the same as the IP address shown here)

Search Path: Select the Active Application Radio Button

3. Click OK.

Challenge Question: Why do we need to change the hostname entries to a hard-coded IP address when we made sure our etc/hosts file was updated at the beginning of the lab?

36

4. When you click OK a “Replace in Files – Log” window will open below your connections.xml file. This log will show you the occurrences of “soabpm-vm” that it found everywhere within your application project.

In order to get the search-replace to execute you now have to push the green triangular “play button” as shown in the following screen shot.

Click the “Play” button to perform the search-replace substitutions

A dialog window should appear indicating that the replacements have been performed. Click OK to dismiss the dialog and take a look back through your connections.xml file to verify that the SOA server’s hostname was replaced with its IP address.

37

4 Start Android Emulator 1. Click on the Start Android desktop shortcut.

2. Select the AVD (Android Virtual Device) and click on Start.

3. Accept default values in the Launch Options window and click Launch.

4. It may take a while for the emulator to start up. Emulator performance is often sluggish and subpar

(this is an inherent design problem with the Android emulator).

5. Ensure that the emulator has started up before proceeding to the next section.

38

5 Deployment 1. Choose Application > Deploy > New Deployment Profile

2. Change Profile Type to MAF for Android. Click OK.

39

3. Accept the default Deployment Profile Properties and Click OK.

4. Choose Application > Deploy > MyDeploymentProfile

40

5. Select Deploy application to emulator. Click Finish.

6. You can monitor the deployment progress by clicking on the Deployment tab at the bottom of the

screen. It can take a few minutes to deploy the simulator.

41

6 Testing 1. The first time you navigate to the Emulator, click on Menu (in successive tests click on the

“Home”/House icon)

2. Followed by the Application icon.

3. Click on the ExpensesApproval app to view the expense reports. It can take up to 10 minutes for the app to startup (again, this is an inherent design problem with the Android emulator).

42

4. Click on any expense report.

5. Click on Approve.

6. This concludes the workshop. The instructor will confirm that the expense report shows up as approved in EBS iExpenses.