Skip to Content

OData model binding on model.read /get entity

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"
				}
			}
		}
	}
}
Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

3 Answers

  • Best Answer
    Posted on Aug 27 at 08:42 AM

    Hi,

    You need to make a few changes in your code.

    First, you need to perform Element Binding on success function of your read call on your form layout which is showing the details.

    You can find a good example for this in the SDK: Element Binding.

    Additionally, I noticed that the binding in the Details form is with absolute paths (eg: {CompAddr>/Name1}). You would need to change it to Relative paths (eg: {CompAddr>Name1}).

    Do let me know if you face any further issues.

    Best Regards,

    Rohit

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Aug 28 at 05:49 AM

    Hello Rohit,

    Thanks for quick reply.

    In above case, which element will be appropriate for binding? According to my understanding, element will be the UI control like panel or label or text etc.. right?

    Regards,

    Yayati

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Aug 28 at 03:35 PM

    I did the element binding to the simple form control and it started working.

    Thanks for quick reply.

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.