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

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


  • 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 ( 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:
  • For detailed steps to create a Fiori-App, where we can consume this type of oData-Service creation, following my 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 (‘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");
    		var entitySet_url = lv_oDataUrl + "InputHelpSet?$filter=(field1 eq '') &$expand=NAVDOCTYP,NAVPURCHGRP,NAVVENDOR";
   , 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 "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; "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 -> place the cursor on ‘oResponse’ argument of ‘’ 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
  • 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.


Assigned Tags

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

      Another nice blog.  Great examples and pictures! I really like your blogs - keep going!


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

      Dear Michelle Crapo,

      Thanks, I am quite sure, these blogs will definitely help respective interested audience.

      Just to share, as you are interacting with my blogs, there is an older blog of mine which helped one person (Former Member) to create similar Fiori-Application, when he confirmed same, it was a great feeling that time, that was my motive of these knowledge sharing blogs. Because everything I know, is from this great sharing world, the Internet.

      Blog ref: Create a Fiori app using Eclipse


      Thanks and regards.


      Author's profile photo Michael Smith
      Michael Smith

      Do you happen to have a git repository with the code examples?

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

      Dear Michael,

      No, I do not have.

      Thanks for checking blogs.


      Thanks & Regards,


      Author's profile photo Prashant Kumar Patnaik
      Prashant Kumar Patnaik

      Hi Dilip,

      Really wonderful blog, I am a newbie in learning Fiori and your blog is really helpful to learn the basics.

      but just one question, I am a bit confused at the line, function(oResponse)

      I understand that OData is the variable, Can you please share the piece of code where you have actually declared it.

      Also at the line

      var output = JSON.stringify(oResponse.results);

      output is a variable that is not used in the code provided. So does it have any usage?




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

      Dear Prashant,

      1. OData is not a variable, its a class which read() function helps to invoke ODataService.
      2. Its true, in given sample. variable 'output' is not been used, but intentions was to display, how we can capture whole response message in a single variable or either you extract/use in pieces as shown in next lines.


      @OData:  It works like below,

      1st authenticate/set CoreModel by consuming ODataService main url,

      then go for entitySet wise data exchange over ODataService

      var lv_oDataUrl = "proxy/http/<fioriHost>:8000//sap/opu/odata/sap/ZTEST_ODATA_SRV/"; 
      var lv_OModel = new sap.ui.model.odata.ODataModel(lv_oDataUrl, true, "user-id", "password");
      sap.ui.getCore().setModel(lv_OModel);	//set CoreModel
      var entitySet_url = lv_oDataUrl + "InputHelpSet?$filter=(field1 eq '') &$expand=NAVDOCTYP,NAVPURCHGRP,NAVVENDOR";
      //Call ODataService's entitySet, function(oResponse) {
      			var output = JSON.stringify(oResponse.results); //Get response
      }, function(err) {	
      			var lvErrTxt = err.message;  //Get error
      });  	//End of OData Service Call

      Thanks & Regards,