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:
  • SAP oData POST: Multiple Table Input
• For detailed steps for Fiori-App creation, below blog can be referred:
  • Create a Fiori app using Eclipse

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.