Call oData Service in Fiori App (Eclipse): ‘Read’ operation

Overview

• In this blog, we will consume a oData Service of (below type) in Fiori-App using Eclipse:
  • which, in a single call, returns multiple output table records in respective separate EntitySet structures.
• Here we perform a Read operation (OData.read) to consume/call this type of oData-Service.
• For detailed steps to create this type of oData-Service in Fiori server (front-end system), following my blog can be referred:
  • SAP oData Service [GET]: Multiple Table Output
• For detailed steps to create a Fiori-App, where we can consume this type of oData-Service creation, following my 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 (‘oDataRead‘) with press event (‘pressBtn_oDataRead_multiple‘)
• 
• Below is the XML syntax to create the button

• <Button text="oDataRead" press="pressBtn_oDataRead_multiple" class="mySuperRedButton" />

[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 is to be written on button’s press event ‘pressBtn_oDataRead_multiple‘
• 
• Here, using below oDataService Url, we invoke the service and service’s response data, we extract and populate in a message pop-up box:
  • /sap/opu/odata/sap/ZTEST_ODATA_SRV/InputHelpSet?$filter=(field1 eq ”) &$expand=NAVDOCTYP,NAVPURCHGRP,NAVVENDOR
• This oDataService’s Url pattern has ‘$expand’ syntax.
• This $expand query option is very powerful and allows us to provide multiple entities and/or entity sets in one single service call, instead of performing several calls subsequently.
• Here, in a single call, using main EntitySet(InputHelpSet), we get multiple table outputs (DocumentType, PurchaseGroup and VendorList) in separate EntitySet structures which is been referred via respective Navigation names (NAVDOCTYP, NAVPURCHGRP and NAVVENDOR)
• Here, We are passing blank value for property ‘field1’ of main EntitySet (InputHelpSet), this is required, because this is the ‘Principal Property’ whic is linked with at least one ‘Dependent Property’ in three Associations of three EntitySets (DocTypSet, PurchGrpSet, VendorListSet) with Main EntitySet (InputHelpSet)

• pressBtn_oDataRead_multiple: function() {
  		
  		var lv_oDataUrl = "proxy/http/<fioriHost>:8000//sap/opu/odata/sap/ZTEST_ODATA_SRV/"; //When running app from Eclipse
  		//var lv_oDataUrl = "/sap/opu/odata/sap/zmpq_sto_po_srv_srv/";		//When running app from FioriLaunchpad
  		
  		//var lv_OModel = new sap.ui.model.odata.ODataModel(lv_oDataUrl, true);
  		var lv_OModel = new sap.ui.model.odata.ODataModel(lv_oDataUrl, true, "basis", "german$12");
  		sap.ui.getCore().setModel(lv_OModel);	
  	
  		var entitySet_url = lv_oDataUrl + "InputHelpSet?$filter=(field1 eq '') &$expand=NAVDOCTYP,NAVPURCHGRP,NAVVENDOR";
  		
  		OData.read(entitySet_url, function(oResponse) {
  			
  			var output = JSON.stringify(oResponse.results);
  			
  			//Extract 'DcumentType' result
  			//var lv_NAVDOCTYP = oResponse.results[0].NAVDOCTYP;
  			var lv_NAVDOCTYP = oResponse.results[0].NAVDOCTYP.results;
  			var lv_NAVPURCHGRP = oResponse.results[0].NAVPURCHGRP.results;
  			var lv_NAVVENDOR = oResponse.results[0].NAVVENDOR.results; 
  			
  			var lv_msg = "DocumentType: " + JSON.stringify(lv_NAVDOCTYP)
  						+ "\nPurchaseGroup: " + JSON.stringify(lv_NAVPURCHGRP) 
  						+ "\nVendorList:" + JSON.stringify(lv_NAVVENDOR);
  			
  			
  			//To display result in pop-up
  			sap.m.MessageBox.show( "Data Received \n" + lv_msg, {
  			 	icon: sap.m.MessageBox.Icon.SUCCESS,
  		        title: "oData Response",				       			      
  		        onClose: function(oAction) {				        	
  				     //do somthing if required   	
  		    }});			
  		}, function(err) {	
  			
  			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 “oDataRead’ (arrow is pointing to the button in screen)
• 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
• 
• Click on arrow directed button “oDataRead”. Service’s result appears in message pop-up box. click ‘OK’ button to close pop-up.
• 
• If we see the output, here we have three output table results (in form of Array), which is

• Document Type (Navigation=NAVDOCTYP, EntitySet DocTypSet): 
  [
  	{
  		"von": "TP",
  		"bis": "STO MM route"
  	},
  	{
  		"von": "EUB",
  		"bis": "DFPS Int. Ord. Type"
  	},
  	{
  		"von": "ZJ2",
  		"bis": "Stock transport ord."
  	}
  ]
  
  Purchase Group (Navigation=NAVPURCHGRP, EntitySet=PurchGrpSet):
  [
  	{
  		"EKGRP": "D11",
  		"EKNAM": "DB -QC SER REG"
  	},
  	{
  		"EKGRP": "H45",
  		"EKNAM": "HO Distribution"
  	},
  	{
  		"EKGRP": "T06",
  		"EKNAM": "TRP -QC CONS"
  	}
  ]
  
  VendorList (Navigation=NAVVENDOR, EntitySet=VendorListSet): :
  [
  	{
  		"LIFNR": "V01",
  		"NAME": "NOVODIGM Ltd"
  	},
  	{
  		"LIFNR": "V02",
  		"NAME": "Ambrisha Ltd"
  	},
  	{
  		"LIFNR": "V03",
  		"NAME": "Ghankyou Pv.t Ltd"
  	}
  ]

[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
• 
• Press ‘F10’ go to the next line, see how URL is been framed in Eclipse environment
• 
• Sevice url has prefix ‘proxy/http/<fioriHoost>:<fioriPort>/<postFiix>’:

• "proxy/http/fiori:8000//sap/opu/odata/sap/ZTEST_ODATA_SRV/InputHelpSet?$filter=(field1 eq '') &$expand=NAVDOCTYP,NAVPURCHGRP,NAVVENDOR"

• Press ‘F8’ to execute (invoke) the service, on completion of call, we can see the debugger breakpoints stopped inside OData.read -> place the cursor on ‘oResponse’ argument of ‘OData.read’ function, to see the output received post-oDataService call.
• Here we can see, in response, we have three table structure records, each having three reocrds
  • NAVDOCTYP
  • NAVPURCHGRP
  • NAVVENDOR
• 
• Press ‘F10’ go to the next line, here we see, how we are extracting each table data in separate variable.
• Result of Table ‘NAVDOCTYP’ (Document Type Table Records)
• 
• Press ‘F10’ go to the next line,
• Result of Table ‘NAVPURCHGRP’ (Purchase Group Table Records)
• 
• Press ‘F10’ go to the next line,
• Result of Table ‘NAVVENDOR’ (Vendor Table Records)
• 
• Press ‘F10’ go to the next line, next we see, how we are concatenating the three structures in string format, which is to be displayed in message box.
• 
• Press ‘F8’ to complete the execution.
• 
• Message-box appears having oData-Service’s extracted results.
• Thus we have seen how to call/debug a oDataService from FiroiApp using Eclipse.