Skip to Content
Author's profile photo Pinaki Patra

Integrating xsodata with sap ui5 controls & Using Formatter in SAP UI5 Applications

Integrating xsodata with sap ui5 controls.


Step 1 : Create a sap ui5 control Ex. List or Table

Step 2 : Create a suitable template for the control.


In the template (assuming data needs to be loaded from xsodata) set the title , description etc. Accordingly .

If you want to change or process data coming from the xsodata before displaying it to the web page ,

you can use a formatter . Using a formatter is described in the later steps.

Step 3 : Create a data model   Ex. sap.ui.model.odata.ODataModel(serviceURL)

The “serviceURL” should contain the path to the xsodata.

Then set the model (sap.ui.gerCore.setModel())

Step 4 : The bind items to the control a shown below :

               oScenarioList.bindItems(domainContext, oScenarioTemplate, null, null);

Here :

          ‘oScenarioList’ is the control

          ‘domainContext’ is the context path

          ‘oScenarioTemplate’ is the template created earlier.


     Now the control will contain all the data coming from the xsodata.

A diagrammatic representation is given below :

Odata fetch.png

Using the formatter :

Step 1 : Create a formatter file ,say under the folder ‘ util’ as shown below


Step 2: Register the formatter path in the .HTML file

          ‘Formatter’, ‘./util/Formatter’);

Step 3 : Call the formatter file where you want to use it (normally in view.js)


Step 4 : Pass values to the formatter from the template  as depicted  above.

Assigned Tags

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

      Thank you Pinaki. Rich Information!!!

      Author's profile photo Vishnu Pankajakshan
      Vishnu Pankajakshan

      simple and have grt info. 🙂