Way to create OData from RFC and consume into SAP UI5 application - Part II

[former_member188432]

Now we have to do below configuration after first part.

Please click on the selected button and do the below configuration.

Now we have to do the below mapping.

Step 14: Now we have to do the mapping for the node SalesOrderItemCollection.

Open the node and select as below.

And then provide below details in the pop up.

Target System	Local
Data Source Type	Remote Function Call
Data Source Name	BAPI_EPM_SO_GET_DETAIL

And now we have to do the mapping. Now open the ITEMDATA node and do the below mapping.

We have to add one more row as below and do the below mapping.

Now we have to press generate button to generate the run time objects.

To test the service open the selected node and double click and press the Gateway Client button.

And after providing the query as below and execute the requested query, we will get information like below.

Step 15: Now we have to do the ASSOCIATION , please provide the below details in the required input fields.

And in the required fields we have to provide below information.

Name	SalesOrderSalesOrderItems
Principal Entity	SalesOrder
Principal Entity Cardinality	1
Dependent Entity	SalesOrderItem
Dependent Entity Cardinality	M

Step 16: Now we have to create referential constraint for the association. To do so, please do the below, double click on the Referential Constraints.

And make a entry like below.

Now generate the project once again.

Step 17: Expand the node as below.

And double click on the Navigation Properties and do the below configuration.

Name	SalesOrderItems
Relationship Name	SalesOrderSalesOrderItems

Now re-generate the project and test with below query and get result as below.

Step 18: Now we will consume our OData service into SAP UI5 application.

Create one SAP UI5 Application and do the below coding in the view.

createContent : function(oController) {

var sServiceUrl = this.getUrl("/sap/opu/odata/SAP/ZGW100_XX_SO_SRV");

var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl,true,"Service-User","Password");

//Create an instance of the table control

var oTable2 = new sap.ui.table.Table({

title: "Table OData Example",

visibleRowCount: 7,

firstVisibleRow: 3,

selectionMode: sap.ui.table.SelectionMode.Single,

navigationMode: sap.ui.table.NavigationMode.Paginator,

id:'table1'

});

//Define the columns and the control templates to be used

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "So Id"}),

template: new sap.ui.commons.TextView().bindProperty("text", "SoId")

}));

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Currency Code"}),

template: new sap.ui.commons.TextView().bindProperty("text", "CurrencyCode")

}));

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Gross Amount"}),

template: new sap.ui.commons.TextView().bindProperty("text", "GrossAmount")

}));

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Net Amount"}),

template: new sap.ui.commons.TextView().bindProperty("text", "NetAmount")

}));

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Tax Amount"}),

template: new sap.ui.commons.TextView().bindProperty("text", "TaxAmount")

}));

oTable2.setModel(oModel);

oTable2.bindRows("/SalesOrderCollection");

oTable2.placeAt("content");

}

getUrl : function(sUrl) {

   if (sUrl == "")

return sUrl;

   if (window.location.hostname == "localhost") {

return "proxy" + sUrl;

   } else {

return sUrl;

   }

}

Now we have to do few modification into web.xml file. Please add the below snippet of the xml tags into web.xml

<context-param>

<param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>

<param-value>http://<host of Gateway Server>:<port></param-value>

</context-param>

Now we have to run the application, to fetch the data from SAP ECC via OData in SAP UI5 application.

After run we will get screen like below.