End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

HOW-TO DOC:
END TO END GUIDE ON CREATING
IONIC MOBILE APP BASED ON
ORACLE MCS + ORACLE EBS

Author(s) : Sardar Swaran Singh

Pallavi Nakka
Hanumanth Yadlapalli
Bala Thotakura
Edited By : Raj Peddisetty
Company : ALGARYTM
Created On : APR 2017
Version : 1.0

1
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

PURPOSE:
This document provides solution to Develop Oracle EBS based mobile app in
Ionic frame work using Integrated SOA gate way to develop REST services
and Oracle Mobile Cloud Services as middle ware. In this document we
portrayed one of the scenario of Expense Approval App.

Expense Approval App is intended to Managers where he can see the list of
expenses raised by the employees pending for his Approval.

2
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Table of Contents
1. Executive overview_____________________________________________________________ 4
2. Create Custom PLSQL Package with Annotation ___________________________________ 6
3. Register Custom Package in Integration Repository ________________________________ 10
3.1 Generate iLDT ________________________________________________________________________________ 10
3.2 Upload iLDT __________________________________________________________________________________ 12
4. Integrated SOA Gateway ______________________________________________________ 14
4.1 Deploy PLSQL package as REST Service ____________________________________________________________ 14
4.2. Create Grants ________________________________________________________________________________ 16
5. Test the REST Service _________________________________________________________ 17
6. Oracle Mobile Cloud Service (MCS) _____________________________________________ 20
6.1 Create Mobile Backend (MBE) ___________________________________________________________________ 20
6.2 Create Connectors _____________________________________________________________________________ 22
6.3. Create Custom API ____________________________________________________________________________ 28
6.3.1. Create Endpoints to API ______________________________________________________________________ 30
6.3.2. Implement NODEJS __________________________________________________________________________ 32
7. Place Custom API in MBE _____________________________________________________ 38
8. Create a screen in Mobile App using Ionic 3 Framework ____________________________ 39

3
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

1. Executive overview

Use Standard API or Custom PLSQL API as per the requirement. For Custom API add
annotations. This package has to be registered in Integration Repository since it is a custom
object. In this process, create iLDT of Custom PLSQL API. And then upload it in Integration
repository. Expose the Custom PLSQL API as REST Service through Integrated SOA Gateway
(ISG). And test the Service in any REST Client.
Log in to Oracle MCS (Mobile Cloud Service), create a Mobile BackEnd .Then create a REST
Connector using the REST Service to establish external connection in cloud. Then create a
Custom API (with NODEJS Implementation) to call the Connector. Place the Custom API in
Mobile BackEnd and through Mobile BackEnd the Mobile App connects to MCS.
The Mobile Apps access REST Connectors through Mobile BackEnds. And then create mobile
screen in Ionic 3 Framework.

4
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Architecture Diagram:

5
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

2. Create Custom PLSQL Package with Annotation

Create PLSQL package with a function that returns the Expense Details.

In order to register our custom Package in Integration Repository, we have to annotate our
package Specification. Refer the below link for Annotation Standards.

https://docs.oracle.com/cd/E18727_01/doc.121/e12065/T511473T545912.htm

Custom integration interfaces can use only seeded or existing business entities. Integration
Repository currently does not support the creation of custom Product Family and custom
Business Entity.

Refer below link to get the list of pre-defined Business Entities in Integrated SOA Gateway.

http://irecruitment.syriatel.sy/OA_HTML/help/state/content/group.FND%3ALIBRARY%3AUS/
locale.en_US/navId.2/navSetId.iHelp/vtAnchor.sigdg_ebannot/vtTopicFile.iHelp%7CHelpServle
t%7CUS%7CFND%7C@sigdg_ebannot/

6
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Below is our package Specification with Annotation

Detail Annotation for Procedure in that package.

7
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Below is the package body

The Procedure GET_SMART_EXP_CNT_P returns expenses list pending for approval to

a specific user.

8
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

9
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

3. Register Custom Package in Integration Repository

Register the above package in Integration Repository to deploy this package as REST Service.

To achieve this, we have two steps.

1. Generate an iLDT file for our package specification.
2. Upload the generated iLDT in FND_TOP.

3.1 Generate iLDT

Login to Remote Servers Application Tier through Winscp

Navigate to CUSTOM_TOP bin folder. In our case it is

/data/oracle/VIS1225/fs1/EBSapps/appl/xxerp/12.0.0/bin

Place the .pls file of our Custom Package Spec in CUSTOM_TOP bin folder

10
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Open a putty Session through Winscp (for this,putty setup file is prerequisite) by clicking on
Putty icon on Winscp toolbar.

Enter password when prompted and a new session is started.

Navigate to the same path where we placed our package Spec in putty.

Run the below command to generate iLDT file.

$IAS_ORACLE_HOME/perl/bin/perl $FND_TOP/bin/irep_parser.pl -g -v -
username=sysadmin PER:patch/115/sql:

11
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

XXALG_SMART_EXP_APPROVAL_PKG.pls:12.0=XXALG_SMART_EXP_APPROVA
L_PKG.pls

The output of the above command is as below

iLDT is generated in the same path.

3.2 Upload iLDT

Now, go back to putty session and run the below command to upload the iLDT to Integration
Repository.

$FND_TOP/bin/FNDLOAD apps/apps 0 Y UPLOAD

$FND_TOP/patch/115/import/wfirep.lct
XXALG_SMART_EXP_APPROVAL_PKG_pls.ildt

The output of this command is as below.

12
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

A log file is created. Check the log file generated for errors.

When you open the log file, it should look similar as below if the iLDT is uploaded without any
errors.

13
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

4. Integrated SOA Gateway

4.1 Deploy PLSQL package as REST Service

Log in to EBS System as SYSADMIN

Navigate to Integrated SOA Gateway Responsibility > Integration Repository

Click on Search button

Enter the Package Name XXALG_SMART_EXP_APPROVAL_PKG in Internal Name field.

Hit on Go

14
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Below Table shows the search result. Click on the Package name from the table.

Navigate to REST Web Service Tab.

Select the Function/Procedure to deploy. Enter the Service Alias.

Hit on Deploy button at the bottom of the page.

Once it is deployed, WADL file is created. Click on View WADL link to see WADL file.

HTTP Method to access this Service is also described here.

15
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

4.2. Create Grants

Now, we have to create Grants to give access to use this service.

Navigate to Grants Tab, Check the Function / Procedure name and click on create grant button.

You will be prompted to select Grantee Type, you can choose

1. All Users
2. Specific User
3. Group of Users

Click on Create Grant button at the top of the page.

When grant is created, this icon appears for the function / procedure.

From the WADL file, we have to construct REST Service URL. Extract the base URL and append
the resource path to it.

The below link is our final REST Service URL.

http://vis1225.dpebserver.com:8000/webservices/rest/Smart_Expense_Approval/get_smart_exp_c
nt_p/

16
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

5. Test the REST Service

Now, Test the Service in any REST Client like POSTMAN. POSTMAN is a google chrome
extension.

Open POSTMAN. Add the following Headers under headers tab.

Construct the payload according to XSD from WADL file. Select the Method as POST in
POSTMAN.

17
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Payload:
{
"Smart_Expense_Approval":
{
"@xmlns":"http://vis1225.dpebs-
server.com:8000/webservices/rest/Smart_Expense_Approval/get_smart_exp_cnt_p",
"RESTHeader":
{
"xmlns": "http://vis1225.dpebs-server.com:8000/webservices/rest/Smart_Expense_Approval/header",
"Responsibility":"SYSTEM_ADMINISTRATOR",
"RespApplication":"SYSADMIN",
"SecurityGroup":"STANDARD",
"NLSLanguage":"AMERICAN",
"Org_Id" :"204"
},

"InputParameters":
{
"P_USER_NAME": "MICHAEL"
}
}
}

18
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Once you click on send, the result appears. Status Code 200 is a success.

19
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

6. Oracle Mobile Cloud Service (MCS)

6.1 Create Mobile Backend (MBE)

Now, login to MCS. Navigate to Mobile Backends (MBE).

A mobile backend is a secure grouping of APIs and other resources for a set of mobile apps.
Within a mobile backend, you select the APIs that you want available for those apps.

Click on New Mobile Backend button.

20
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

The MBE Creation page appears. Fill in the required details and click on create button.

After creating the Backend, go to settings page of the MBE.

In this page, we can see Access Keys generated for this MBE.

HTTP Basic Authentication keys are generated for you in the form of a mobile backend ID and
an anonymous key.
These keys are also unique by environment. When you deploy a mobile backend to a different
environment, a new set of keys is generated for the copy of the mobile backend that is added to
the target environment.

21
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

If you suspect that these credentials have been compromised (such as by an application handling
them insecurely), click Refresh to replace the credentials with new ones or click Revoke to
cancel the existing credentials without generating replacements.

6.2 Create Connectors

Now, Navigate to Connectors from the Menu.

Create a connector by clicking on New Connector.

Select REST from the dropdown.

22
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

The Connector Creation screen opens. Fill in the required fields. Enter REST Service URL in
Remote URL Field. And hit create button.

Once, the Connector is created the following screen appears showing four steps.

23
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

The Below screen shows the General Configuration of Connector.

Navigate to Rules Page.

Create new rules to test this connector on clicking New Rule button.

Click on Add Parameter.

Select Header from the dropdown.

24
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Add all the Headers, which we used in POSTMAN for testing the Service.

In the same page, we will have HTTP Methods, where we can select to which HTTP Verb the
defined Rule should apply. In this case, we will select POST.

Here we are not using any security constraints as we are using external authentication, we
directly move on to testing the connector.

In this page, select the HTTP Method for this connector as POST.

In the Body section, give the same payload as we gave in POSTMAN.

25
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

We need to select a backend in authentication session. Hit on Test Endpoint.

Hit on Test Endpoint.

We can see a Status Code 200, which is a Success.

26
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

And the same output is generated as in POSTMAN. Our Connector is working as expected.

27
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

6.3. Create Custom API

Now, go back to the Menu and select APIs where we create a Custom API to call the Connector.

From the New API dropdown, select API.

28
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

The New API creation page opens, fill in the required details and hit on create button.

29
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

6.3.1. Create Endpoints to API

Once the API is created, navigate to Endpoints.

Click on New Resource and create an Endpoint to this API.

Fill in the details and navigate to Methods link.

30
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Add POST Method to this Endpoint.

Navigate to Security from the API menu.

Make the Login Required off.

Now, navigate to Implementation from the Menu.

31
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

6.3.2. Implement NODEJS

Here, we see a JavaScript scaffold, this is where we write NODEJS code to implement
our Custom API. Click on the JavaScript scaffold button.

It will prompt to download a zip file.

Once downloaded, unzip the folder. We will have the below files in it.

Open, the package.json file. In this file we need to define dependencies, which we will
give the path and version of our Connector. These details we can get from the connector
page.

Navigate to Connector page, copy the connector path and version from here.

32
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

This is the package.json file. Include the above details in dependencies.

Code snippet:

{
"name" : "smartexpcntwithreportheaderidapi",
"version" : "1.0.0",
"description" : "Smart Exp Cnt with Report Header Id API",
"main" : "smartexpcntwithreportheaderidapi.js",
"oracleMobile" : {
"dependencies" : {
"apis" : { },
"Connectors" :
{"/mobile/connector/SmartExpenseCountwithReportHeaderId":"1.0"}
}
}
}
Now, open smartexpcntwithreportheaderidapi javascript file, where we call our
connector.

33
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Code snippet:

We declare body for the REST Service

var body = {
"Smart_Expense_Approval":
{
"@xmlns":
"http://xmlns.oracle.com/apps/ap/rest/Smart_Expense_Approval/get_smart_exp_cnt_p/
",
"RESTHeader":
{
"xmlns":
"http://xmlns.oracle.com/apps/ap/rest/Smart_Expense_Approval/get_smart_exp_cnt_p/
",
"RespApplication":"SYSADMIN",
"SecurityGroup":"STANDARD",
"NLSLanguage":"AMERICAN",
"Responsibility":"SYSTEM_ADMINISTRATOR",
"Org_Id" :"204"
},
"InputParameters":
{
"P_USER_NAME": req.body.P_USER_NAME
}
}
};

Also declare the headers required for the Service

var headers = {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Oracle-Mobile-Api-Version': '1.0'
}
Then we have make post method call to the connector

req.oracleMobile.connectors.SmartExpenseCountwithReportHeaderId.post
('SmartExpenseCountwithReportHeaderId',
body,
{
externalAuthorization: 'Basic
c3lzYWRtaW46b3JhY2xlMTI=',
inType: 'json'
},
{
headers: headers
}).then(
function (result)

34
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

{
res.send(result.statusCode,
result.result);
},
function (error) {
console.dir(error);
res.send(500,
error.error);
}
);

After, the coding is done. Zip the folder and we have to upload it in MCS.

Navigate, to implementation in API Menu in MCS. Drag and drop the zip file here.

Once the upload is completed, we will see the below details updated.

Since, we wrote a code where the value of Report header Id is dynamically fetched.
We will give define a static value for Testing this API.

This can be done in the Endpoints page. Navigate to Endpoints page. There we see a
body section, click on Add Media Type

Provide a static value in JSON format under Example Tab.

35
End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Click on Test button at top right corner of the page

In Test page, we can see a body section, where we can use the static value we defined
as example.

Click on Use Example and the values populate in the space.

In the Authentication Section, we need to select a Mobile Backend for Testing.

I will select Smart_Exp_Appr.

Hit the Test Endpoint button.

36
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

We can see the Status code 200.

And the output which comes from the Connector.

37
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

7. Place Custom API in MBE

Once our Custom API is ready, we go back to Mobile Backends from the Menu.

Navigate to APIs page.

Here we can select the Custom API which we created to include it in the TEST MBE.

Click on Select APIs

You will get the list of all the APIs created in that environment.

Click on the + button, to include this API in TEST Backend.

38
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

8. Create a screen in Mobile App using Ionic 3 Framework

Create an Application by using the CLI

We have to set the path of the application

After creating the application the folder structure may look like this

Create a page using the below command

ionic g page expensesdetails

After creating the page the folder structure may look like below

39
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Create providers using the command below

ionic g provider singleton

The folder structure of the provider may look like this

After creating provider we have to to import the provider to the pages which are using providers in
app.module.ts

40
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

To call the REST API make use of providers, in the first provider we have to give the REST API like
this

Next step is we have to give the Mobile backend details by using another provider named Sample

In headers section we will send the mobile backend details and in the body we will send the data
which is required to get the response from the REST API.

41
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

After that call getData() method from the provider in openList() method of expensedetails.ts file to
get the response.

42
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

In the openList() method we call the RESTAPI from the singleton provider which is stored in the
variable.

Pass the RESTAPI and the body through getData() method of sample provider in openList() method
of expensedetails.ts, we will get the data like this

43
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

The Output we get here is in string format, we have to change to JSON Format using JSON.parse()
method

44
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Now the output is in JSON format which is displayed Using Console.log() method.

45
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

In the expensedetails.html page we need to get the data which is to be displayed.

To achieve this we have to give the following functionality

46
 End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

Run the application using the command

ionic lab

This is the final screen where we display the data rendered from REST API in mobile app.

47