Skip to Content
Author's profile photo Dilip Kumar Krishnadev Pandey

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.

 

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michelle Crapo
      Michelle Crapo

      Nice step by step example,

      Michelle

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      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

       

      Author's profile photo Ransome Mathias
      Ransome Mathias

      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?

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Dear Ransome Mathias,

      About '.Create' method, where oData  service call (as a synchronous call) is been configure as follows:

      1. First create an ODataModel variable with Service-URI (without any EntitySet) and access credentials and then set it as core model
        • 	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);
      2. Then perform '.create' operation with same model and provide EntitySet name where data fetching logic is been defined. Here we send request message 'lv_srvRequest' too
        • lv_OModel.create('/HeaderSet', lv_srvRequest, null, function(oData, oResponse) {
          }, function(err) {	
          },

       

      Please note:

      • By keeping Odata-Service as Asynchronous, if you means like, only send input and do not want to get any response,
      • then still you need to define '_GET_Entity' or '_GET_EntitySet' (as per your requirement),
      • and yes ABAP debugger still be stopped inside these re-defined methods.

       

      Thanks & Regards,

      Dilip

       

      Author's profile photo Ransome Mathias
      Ransome Mathias

      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.

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      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

      • lv_OModel.create('/HeaderSet', lv_srvRequest, null, function(oData, oResponse) { //debuggerStopPoint }

      and in case of error, it will stop inside 'function(err)' i.e.

      • lv_OModel.create('/HeaderSet', lv_srvRequest, null, function(oData, oResponse) { }, function(err) //debuggerStopPoint  },

       

      Thanks & Regards,

      Dilip