/scripts/ahub.form.attachments.js
0

(XML View, oData) Data not showed in table

Jan 26, 2017 at 07:24 PM

57

avatar image

Hi,

I am new on UI5, I am writing a demo program to show a form and a table.

I have a backend table with 2 records, and built oData service which works well.

This demo is of Goods Receipt, my view called Main, and my oData service is "/sap/opu/odata/sap/ZBARCODE_SRV", the entity name is GoodsReceipt and entity set name is GoodsReceiptSet.

Below is index.html

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-xx-bindingSyntax="complex"
				data-sap-ui-preload="async"
				data-sap-ui-compatVersion="edge"
				data-sap-ui-resourceroots='{"barcode.ui.layout.GR":"./"}'>
		</script>
		<script>
				sap.ui.getCore().attachInit(function() {
					sap.ui.xmlview({
						viewName : "barcode.ui.layout.GR.Main"
					}).placeAt("content");
				});
		</script>
	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

Below is my Main.view.xml

<mvc:View
	height="100%"
	controllerName="barcode.ui.layout.GR.Main"
	xmlns="sap.m"
	xmlns:layout="sap.ui.layout"
	xmlns:form  ="sap.ui.layout.form"
	xmlns:core  ="sap.ui.core"
	xmlns:mvc   ="sap.ui.core.mvc">
	<VBox	class="sapUiSmallMargin">
		<form:SimpleForm id="GRForm"
			minWidth="512"
			maxContainerCols="2"
			editable="true"
			layout="ResponsiveGridLayout"
			title="Goods Receipt"
			labelSpanL="2"
			labelSpanM="2"
			emptySpanL="2"
			emptySpanM="2"
			columnsL="1"
			columnsM="1">
			<form:content>
				<Label text="PO"/>
				<Input value="{GREntry>Ebeln}" valueLiveUpdate="true"/>
				<Label text="Material"/>
				<Input value="{GREntry>Matnr}" valueLiveUpdate="true"/>
				<Label text="Quantity"/>
				<Input value="{GREntry>Menge}" valueLiveUpdate="true"/>
			</form:content>
		</form:SimpleForm>	
		<Button id="finish"
				text="Finish"
				height="75px"
				width="120px"
				press="onFinish"/>
	</VBox>
	<VBox	class="sapUiSmallMargin">
	<Table 	id="GRTable"
			items="{
				path: '/GoodsReceiptSet',
				parameters: {expand: 'toPosition'}
			}">
		<columns>
			<Column>
				<Label text="PO"/>
			</Column>
			<Column>
				<Label text="Material"/>
			</Column>
			<Column>
				<Label text="Quantity"/>
			</Column>
		</columns>
		<items>
			<ColumnListItem>
				<cells>
					<Text text="{Ebeln}"/>
					<Text text="{Matnr}"/>
					<Text text="{Menge}"/>
				</cells>
			</ColumnListItem>
		</items>
	</Table>
	</VBox>
</mvc:View>

Then Main.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";
	
	var PageController = Controller.extend("barcode.ui.layout.GR.Main", {
		onInit : function (oEvent) {
			var sSrvcUrl = "/sap/opu/odata/sap/ZBARCODE_SRV";
			var oModel	 = new sap.ui.model.odata.ODataModel(sSrvcUrl, false);
			var oView = this.getView();
			oView.setModel(oModel, "GREntry");
//			oView.byId("GRForm").bindElement({
			oView.bindElement({
				path:  "/GoodsReceiptSet(Ebeln='800260',Erdat=datetime'2017-01-18T00:00:00',Seqnr='0000')",
				model: "GREntry"
			});
		},
		
	});
	return PageController;
})

When I test, it gives me below:

As you can see, the form part works well, but the table part doesn't.

Then I found the method GOODSRECEIPTSET_GET_ENTITYSET is not called (I put a breakpoint in it), while GOODSRECEIPTSET_GET_ENTITY is called normally.

I do a lot of research but still don't know where the problem is.

Any suggestion is appreciated.

capture.jpg (27.4 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Jun Wu Jan 26, 2017 at 07:40 PM
0
<Tableid="GRTable"
			items="{model: "GREntry",
				path:'/GoodsReceiptSet',parameters:{expand:'toPosition'}}"><columns><Column><Label text="PO"/></Column><Column><Label text="Material"/></Column><Column><Label text="Quantity"/></Column></columns><items><ColumnListItem><cells><Texttext="{GREntry>Ebeln}"/><Texttext="{GREntry>Matnr}"/><Texttext="{GREntry>Menge}"/></cells></ColumnListItem></items></Table>

you need to put model name in the binding

Share
10 |10000 characters needed characters left characters exceeded
John Lu Jan 26, 2017 at 08:41 PM
0

Hi Jun

I tried your code, it's totally correct, thank you so much.

Share
10 |10000 characters needed characters left characters exceeded
John Lu Jan 31, 2017 at 04:28 PM
0

Hi

Now I have another question: how to retrieve data in the form?

I tried below code, but nothing works

var oModel = this.getView().getModel("GREntry");
alert(oModel.getProperty("Ebeln"));
alert(oModel.getProperty("/Ebeln"));
alert(oModel.getProperty("GREntry>Ebeln"));

it returns null or undefinied.

Any further input is appreciated.

Share
10 |10000 characters needed characters left characters exceeded
Skip to Content