Overview
- In this blog, we consume a oData Service in Fiori-App using Eclipse.
- This oData Service is to perform Create operation (oDataModel.Create).
- i.e. with this oData Service, we post multiple table as input and in response we get output in separate table.
- These table are nothing but 'Enity Set' structures.
- For Creation of this oData-Service, which we consume here, below blog can be referred:
- For detailed steps for Fiori-App creation, below blog can be referred:
Consume oData in Fiori-app using Eclipse
Steps are as follows:
[1] Create a button in GUI of Fiori App, in XML view
- In page.view.xml, create a button with press event
[2] On button's click/press event, below code is to be used to consume oData Service
- In page.controller.js, write below javaScript code to call oData Service
- We try to POST below request to SAP's oData Service, using oData.Create method:
{
"Field1": "hvl1",
"Field2": "hvl2",
"Field3": "hvl3",
"ItemSet": [
{
"IFLD1": "rv11",
"IFLD2": "rv12",
"IFLD3": "rv13"
},
{
"IFLD1": "rv21",
"IFLD2": "rv22",
"IFLD3": "rv23"
}
],
"NAVRESULT": [
{
"MSG1": "",
"MSG2": ""
}
]
}
- if we see above request XML, we are passing inputs as below:
- Entity ‘Header’: At header level one row input (Field1,Field2,Field3)
- Entity ‘Item’: At Item level two row input (ItemSet)
- Entity ‘Result’: one blank row, this is required to get output (NAVRESULT)
pressBtn_oDataCreate: function() {
//Wait-Processing Dialog
var lv_BusyDialog = new sap.m.BusyDialog({
text: "Processing..."
});
//Begin of oDataService's Request Preparation------------------
var lv_srvRequest = {}; //To contain input
lv_srvRequest.ItemSet = []; //Array to accept item level
lv_srvRequest.NAVRESULT = []; //Array to store Result
//Header Input
lv_srvRequest.Field1 = "hvl1";
lv_srvRequest.Field2 = "hvl2";
lv_srvRequest.Field3 = "hvl3";
//Item level input- [Row-1]
var lv_Item = {};
lv_Item.IFLD1 = "rv11";
lv_Item.IFLD2 = "rv12";
lv_Item.IFLD3 = "rv13";
lv_srvRequest.ItemSet[0] = lv_Item; //append to zero'th positon of array
//Item level input- [Row-2]
var lv_Item = {};
lv_Item.IFLD1 = "rv21";
lv_Item.IFLD2 = "rv22";
lv_Item.IFLD3 = "rv23";
lv_srvRequest.ItemSet[1] = lv_Item; //append to 1st postion of array
//Blank 'Result' structure
var lv_res = {};
lv_res.MSG1 = "";
lv_res.MSG2 = "";
lv_srvRequest.NAVRESULT[0] = lv_res; //append to 1st postion of array
//End of oDataService's Request Preparation--------------------
//Odata Service URL Access: when running app from Eclipse
var lv_oDataUrl = "proxy/http/hostAddr:8000//sap/opu/odata/sap/ZTEST_ODATA_SRV/";
var lv_OModel = new sap.ui.model.odata.ODataModel(lv_oDataUrl, true, "userid", "password");
sap.ui.getCore().setModel(lv_OModel);
/*
//Odata Service URL Access: when running app from Fiori Launchpad
var lv_oDataUrl = "/sap/opu/odata/sap/zmpq_sto_po_srv_srv/";
var lv_OModel = new sap.ui.model.odata.ODataModel(lv_oDataUrl, true);
sap.ui.getCore().setModel(lv_OModel);
*/
//Open Busy Dialog when request processing
lv_OModel.attachRequestSent(function(){
lv_BusyDialog.open();
});
// Calling Odata Service using OModel.create
lv_OModel.setHeaders({
"X-Requested-With" : "XMLHttpRequest",
"Content-Type" : "application/json",
"DataServiceVersion" : "2.0",
"Accept" : "application/atom+xml,application/atomsvc+xml,application/xml",
"X-CSRF-Token" : ""
});
//Call the create request
lv_OModel.create('/HeaderSet', lv_srvRequest, null, function(oData, oResponse) {
lv_BusyDialog.close(); //Close Busy dialog
//extract the result
var lv_result = oResponse.data;
var msg1 = lv_result.NAVRESULT.results[0].MSG1;
var msg2 = lv_result.NAVRESULT.results[0].MSG2;
var lv_msg = msg1 + " " + msg2;
//To display result in pop-up
sap.m.MessageBox.show( lv_msg, {
icon : sap.m.MessageBox.Icon.SUCCESS,
title : "oData Response",
onClose: function(oAction) {
//do somthing if required
}});
}, function(err) {
lv_BusyDialog.close(); //Close Busy dialog
var lvErrTxt = err.message;
sap.m.MessageBox.show( "OData Response: " + lvErrTxt, {
icon : sap.m.MessageBox.Icon.ERROR,
title : "Do you want to try again ?",
actions: [sap.m.MessageBox.Action.YES, sap.m.MessageBox.Action.NO],
onClose: function(oAction) {
if ( oAction === sap.m.MessageBox.Action.YES ) {
//If Yes clicked, one more chance to try again
}
if ( oAction === sap.m.MessageBox.Action.NO ) {
//If No clicked, then Cancel
}
}}); //MessageBox close
}); //End of OData Service Call
},
[3] Testing the code
- To test the code run fiori-app project, right click on 'Index.xml' -> run as web-app preview
- Once page appears -> click on button "oDataCreate"
- On press event, oData Service will be called with given input and URLs.
- On successful call, status will appear in a message pop-up box
[4] Debugging steps to understand the data flow
- With help of following debug screen, we can understand how data is flowing from fiori app to oDataService.
- For debug -> copy and paste URL of project in Google chrome browser -> press 'F12' key to enter in debug mode of browser -> highlight your app's page > '.controller.js' -> add breakpoints within function at line like below screen ->
- Press 'F10' to go to next line during debugging of code
- At line 920, variable 'lv_srvRequest', place mouse cursor here, we can see how input is ready in JSon format
- Exploring other elements to see ready data for input, from here Header and Item set input can be seen
- and for 'Result' Entity Set, we pass a blank row
- Press 'F10' key to go to next line, where we can see, oData Service is been called with input and URL
- Press 'F10' key to go to next
- Debug enters in Fiori-oDataService's ABAP Code
- Note: To Debug in Fiori-oDataService, your user-id should have external debug rights
- Here, we can see, input (Request) is been received in 'IR_DEEP_ENTITY'
- The strcure 'IR_DEEP_ENTITY; has
- Header input in FIELD1, FIELD2, FIELD3
- Item Table input in ItemSet Structure
- and blank Row in 'NAVRESULT' Structure
- ItemSet Structure looks like as below
- NAVRESULT' Structure looks like as below
- Press 'F8' to go to next breakpoint, RFC call happens and RFC returns output in a structure 'IT_RFC_RESULT'
- RFC output is been mapped to oDataService's response Structure (i.e. NAVRESULT)
- Press 'F8' key to finish debug in ABAP
- Next Debug comes in Fiori-App's page (which is opened in Google Chrome)
- Response received from service can be seen at variable 'oResponse.Data' on which cursor is placed
- Here both output elements 'MSG1' and 'MSG2' and concatenated and displayed with help of a message box.
- Thus we have seen how to call/debug a oDataService from FiroiApp using Eclipse.
- SAP Managed Tags:
6 Comments
