Skip to Content
0

WebIDE - Mock Data - nothing is showing on the view after binding

Feb 06, 2017 at 09:11 AM

30

avatar image

Hi,

Another simple application to use mock data and bind it to a view. Nothing is showing on the view when run.

Steps:

1. create project template SAP UI app

2. create oData Model file - Customers.edmx created

<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:sap="http://www.sap.com/Protocols/SAPData">
	<edmx:DataServices xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" m:DataServiceVersion="2.0">
		<Schema xmlns="http://schemas.microsoft.com/ado/2008/09/edm" Namespace="ns">
			<EntityType Name="Customer">
				<Key>
					<PropertyRef Name="CustomerId"/>
				</Key>
				<Property Name="CustomerId" Nullable="false" Type="Edm.String"/>
				<Property Name="Name" Type="Edm.String"/>
				<Property Name="SalesOrg" Type="Edm.String"/>
			</EntityType>
			<EntityContainer Name="default" m:IsDefaultEntityContainer="true">
				<EntitySet EntityType="ns.Customer" Name="Customers"/>
				<EntitySet EntityType="ns.Customer" Name="Dummy"/>
			</EntityContainer>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>

3. edit mock data - Customers.json created

4. Check manifest.json is dataSources is pointing to "localUri": "localService/metadata.xml"

		"dataSources": {
			"ns": {
				"uri": "",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/metadata.xml"
				}
			}
		}

5. Check project settings is pointing to localService/metadata.xml

6. In view - data set = Customers

6.1 add sap.ui.layout.form

6.2 set sap.m.input binding to {name}

7. In component.js -> metadata manifest + config; set main model

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"nsztest02/model/models"
], function(UIComponent, Device, models) {
	"use strict";


	return UIComponent.extend("nsztest02.Component", {


		metadata: {
			manifest: "json"
		},


		/**
		 * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
		 * @public
		 * @override
		 */
		init: function() {
			// call the base component's init function
			UIComponent.prototype.init.apply(this, arguments);


			// set the device model
			this.setModel(models.createDeviceModel(), "device");
			
			// set main model
				var mConfig = this.getMetadata().getConfig();
				var sServiceUrl = mConfig.serviceConfig.serviceUrl;
				var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, {
					json: true,
					loadMetadataAsync: true
				});
				oModel.attachMetadataFailed(function(){}, this);


			oModel.setCountSupported(false);
			this.setModel(oModel);


			
		}
	});
});

8. in model.js -

sap.ui.define([
	"sap/ui/model/json/JSONModel",
	"sap/ui/Device"
], function(JSONModel, Device) {
	"use strict";


	return {


		createDeviceModel: function() {
			var oModel = new JSONModel(Device);
			oModel.setDefaultBindingMode("OneWay");
			return oModel;
		}


	};
});

Run Index.html

Please assist. Thank you.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

0 Answers