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

[pinakipatra]

Integrating xsodata with sap ui5 controls.

Process

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 :

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

                    jQuery.sap.registerModulePath('Formatter', './util/Formatter');

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

                    jQuery.sap.require("util.Formatter");

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