Skip to Content
0
Aug 27, 2020 at 07:20 AM

OData model binding on model.read /get entity

475 Views

Hello experts,

I work as ABAP developer but I am new to SAP UI5. I have followed ui5.sap.com , walkthrough model binding concepts.

I am developing a very basic demo application for my practice.

I have an input field where I will enter company code. On button press, I am executing function onGetAddress.

In the function onGetAddress, I am giving call to the OData service.

My view is like this -

<mvc:View controllerName="CA_Descriptor.CompanyAddress_Cpy.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<Page id="page" title="{i18n>title}" binding="{/CompanyAddressSet}">
  <content>
	<f:SimpleForm id="CompInput" title="{i18n>comp_sel}" editable="true" layout="ResponsiveGridLayout" labelSpanS="12" labelSpanM="3" labelSpanL="3" labelSpanXL="3" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false">
		<f:content>
			<Label id="l_bukrs" text="{i18n>l_bukrs}"/>
			<Input id="ip_bukrs" />
			<Button id="b_getAddr" text="Get Address" press="getCompAddr"/>
		</f:content>
	</f:SimpleForm>
	<f:SimpleForm id="AddrDetail" title="{i18n>comp_addr}" editable="true" layout="ResponsiveGridLayout" labelSpanS="12" labelSpanM="3" labelSpanL="3" labelSpanXL="3" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false">
		<f:content>
			<Label id="l_name" text="{i18n>l_name}"/>
			<Text id="t_Name" text="{CompAddr>/Name1}"/>
			<Label id="l_street" text="{i18n>l_stras}"/>
			<Text id="t_Street" text="{CompAddr>/Street}"/>
			<Label id="l_city" text="{i18n>l_city}"/>
			<Text id="t_City" text="{CompAddr>/City1}"/>
			<Label id="l_regio" text="{i18n>l_regio}"/>
			<Text id="t_Region" text="{CompAddr>/Region}"/>
			<Label id="l_ctry" text="{i18n>l_ctry}"/>
			<Text id="t_Country" text="{CompAddr>/Country}"/>
		</f:content>
	</f:SimpleForm>
 </content>
</Page>

My Controller is like this

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function (Controller,MessageToast) {
	"use strict";


	return Controller.extend("CA_Descriptor.CompanyAddress_Cpy.controller.Main", {
		onInit: function () {
			var oModel = this.getOwnerComponent().getModel("CompAddr");
			this.getView().setModel(oModel);
		},
		getCompAddr: function(){
			var gModel = this.getView().getModel();
			var vInput = this.getView().byId("ip_bukrs").getValue();
			var vQuery = "/CompanyAddressSet('" + vInput + "')";
			function fnSuccess(oData,oResponse){
				console.log("Data",oData);
				console.log("Response",oResponse);
			}
			
			function fnError(oError){
				console.log("Error", oError);
			}


			gModel.read(vQuery,{
				success: fnSuccess,
				error: fnError
				});
			
			MessageToast.show("Clicked");
		}
	});
});

When I press the button, I can see that the service is bringing the data correctly which I am logging in console. But I am unable to see the data reflected back in the view display.

I want to learn how to bind the data back to view on the button click.

I have declared model and datasource properly in manifest.json.

My manifest.json looks like this -

{
	"_version": "1.12.0",
	"sap.app": {
		"id": "CA_Descriptor.CompanyAddress_Cpy",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"sourceTemplate": {
			"id": "servicecatalog.connectivityComponentForManifest",
			"version": "0.0.0"
		},
		"dataSources": {
			"YE_DEMO_COMP_ADDR_SRV": {
				"uri": "/destination/SBX/sap/opu/odata/sap/YE_DEMO_COMP_ADDR_SRV/",
				"type": "OData",
				"settings": {
					"localUri": "localService/metadata.xml"
				}
			}
		}
	},
	"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": "",
			"favIcon": "",
			"phone": "",
			"phone@2": "",
			"tablet": "",
			"tablet@2": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		}
	},
	"sap.ui5": {
		"flexEnabled": false,
		"rootView": {
			"viewName": "CA_Descriptor.CompanyAddress_Cpy.view.Main",
			"type": "XML",
			"async": true,
			"id": "Main"
		},
		"dependencies": {
			"minUI5Version": "1.65.6",
			"libs": {
				"sap.ui.layout": {},
				"sap.ui.core": {},
				"sap.m": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "CA_Descriptor.CompanyAddress_Cpy.i18n.i18n"
				}
			},
			"CompAddr": {
				"type": "sap.ui.model.odata.v2.ODataModel",
				"settings": {
					"defaultOperationMode": "Server",
					"defaultBindingMode": "OneWay",
					"defaultCountMode": "Request",
					"useBatch": true
				},
				"dataSource": "YE_DEMO_COMP_ADDR_SRV",
				"preload": true
			}
		},
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		},
		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"async": true,
				"viewPath": "CA_Descriptor.CompanyAddress_Cpy.view",
				"controlAggregation": "pages",
				"controlId": "app",
				"clearControlAggregation": false
			},
			"routes": [{
				"name": "RouteMain",
				"pattern": "RouteMain",
				"target": ["TargetMain"]
			}],
			"targets": {
				"TargetMain": {
					"viewType": "XML",
					"transition": "slide",
					"clearControlAggregation": false,
					"viewId": "Main",
					"viewName": "Main"
				}
			}
		}
	}
}