Call oData Service in Fiori App (Eclipse): 'Create' operation

[dilipkkp2412]

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.