Call oData Service in Fiori App (Eclipse): ‘Create’ operation
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.
Nice step by step example,
Michelle
Dear Michelle Crapo,
Thanks, next coming soon "Call oData Service in Eclipse (Fiori App): oData.read()" in case of "Multiple Table Output from oData Service", keep checking.
Thanks & Regards
Dilip
Hi Dilip,
in this example, how did you lv_OModel.create configure service call as a synchronouse call? and in case we keep it ansynchronous, would the ABAP debugger still be stopped?
Dear Ransome Mathias,
About '.Create' method, where oData service call (as a synchronous call) is been configure as follows:
Please note:
Thanks & Regards,
Dilip
Hi Dilip,
Much appreciate your response on my question. Thanks for taking time to breaking down things in parts to my question.
I was referring the synchronous call in terms of, when linev_OModel.create is executed in console, does the debugger in console still wait for you to complete the ABAP debuggin or whether it continues in the console without the data response from SAP server.
Ransome Mathias
Yes, your debugger inside console (fiori app) will wait for ABAP debugging completion, and in case of success (Asynchronous too), it will stop inside
and in case of error, it will stop inside 'function(err)' i.e.
Thanks & Regards,
Dilip