如何将我的OData服务的单个属性绑定到表单?

时间:2018-02-23 17:23:17

标签: sapui5

请您告诉我如何参考第一个表格(和单个)记录? 有一张只有一条记录的表格:

    <Table items="{WaybillsPlaces}" mode="SingleSelectMaster">
        <columns>
            <Column hAlign="Center">
                <header>
                    <Text text="Number" />
                </header>
            </Column>
        </columns>
        <items>
            <ColumnListItem>
                <cells>
                    <Text text="{CoNumber}" />
                </cells>
            </ColumnListItem>
        </items>
    </Table>

如何在没有桌子的情况下阅读第一条记录的字段?

    <Text text="{WaybillsPlaces[0]/>CoNumber}"/>

我得到一个表格回复,但我不想在表格中显示它 - 我想在文本框中的表单中显示它,因此响应中总会有一行。

    <entry>
    <id>
http://xxxxx.xxx.local:8000/sap/opu/odata/sap/LOGISTICS_SRV/WaybillsPlaces('4610103052')
    </id>
    <title type="text">WaybillsPlaces('4610103052')</title>
    <updated></updated>
    <content type="application/xml">
    <m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices">
    <d:CoNumber>46101030520001</d:CoNumber>
    </m:properties>
    </content>
    </entry>

编辑(@Denis中的comments个描述): 我有一个OData给了我以下条目

<entry>
    <id>
http://xxxxx.xxx.local:8000/sap/opu/odata/sap/LOGISTICS_SRV/WaybillsPlaces('4610103052')
    </id>
    <title type="text">WaybillsPlaces('4610103052')</title>
    <updated></updated>
    <content type="application/xml">
    <m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices">
    <d:CoNumber>46101030520001</d:CoNumber>
    </m:properties>
    </content>
    </entry>

如何将CoNumber属性与From ??

中的输入绑定

1 个答案:

答案 0 :(得分:0)

为您的表格提供ID,在您的控制台中获取该表格并调用其“getItems()&#39;方法。然后获取返回数组中的第一个对象:

在您的视图中

<Table id="myTable" items="{WaybillsPlaces}" mode="SingleSelectMaster">
    <columns>
        <Column hAlign="Center">
            <header>
                <Text text="Number" />
            </header>
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <Text text="{CoNumber}" />
            </cells>
        </ColumnListItem>
    </items>
</Table>

在您的控制器中

onCertainEvent(evt){
  var oTable = this.getView().byId('myTable');
  var oFirstItem = oTable.getItems()[0]; // This is your ColumnListItem object in the first row
  var oFirstCellItem = oFirstItem.getCells()[0]; // This is your Text object in the first cell of the first row
  var sCellText = oFirstCellItem.getText(); // This is the text string in your first cell of the first row
}

编辑:仅绑定模型中的第一项

在这种情况下,您可以执行聚合绑定。对于聚合绑定,您需要大于1的多重性。因此,在具有WaybillsPlaces/0/CoNumber

的ColumnListItem中进行属性绑定
<Table id="myTable" mode="SingleSelectMaster">
    <columns>
        <Column hAlign="Center">
            <header>
                <Text text="Number" />
            </header>
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <Text text="{WaybillsPlaces/0/CoNumber}" />
            </cells>
        </ColumnListItem>
    </items>
</Table>

编辑:某些事件中的数据绑定选项

&#13;
&#13;
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta charset="utf-8">

		<title>MVC with XmlView</title>

		<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
		<script id='sap-ui-bootstrap'
				src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
			data-sap-ui-theme='sap_bluecrystal'
			data-sap-ui-libs='sap.m'
			data-sap-ui-xx-bindingSyntax='complex'></script>


		<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->

		<!-- define a new (simple) View type as an XmlView
		 - using data binding for the Button text
		 - binding a controller method to the Button's "press" event
		 - also mixing in some plain HTML
		 note: typically this would be a standalone file -->

		<script id="view1" type="sapui5/xmlview">
		    <mvc:View
				controllerName="my.own.controller"
				xmlns:l="sap.ui.layout"
				xmlns:core="sap.ui.core"
				xmlns:mvc="sap.ui.core.mvc"
				xmlns:f="sap.ui.layout.form"
				xmlns="sap.m">
  				<Panel headerText="Table Panel">
    				<Table id="myTable" items="{/WaybillsPlaces}" mode="SingleSelectMaster" select="onRowPressed" updateFinished="onUpdateFinished">
              <columns>
                  <Column hAlign="Center">
                      <header>
                          <Text text="Number" />
                      </header>
                  </Column>
              </columns>
              <items>
                  <ColumnListItem>
                      <cells>
                          <Text text="{CoNumber}" />
                      </cells>
                  </ColumnListItem>
              </items>
          </Table>
        </Panel>
        <Panel id="Panel1" headerText="onAfterRendering Data Binding">
          <Label text="First Item - Property binding:"></Label>
          <Input id="Input1"></Input>
          <Label text="First Item - Element binding:"></Label>
          <Input value="{CoNumber}"></Input>
        </Panel>
        <Panel id="Panel2" headerText="onUpdateFinished Data Binding">
          <Label text="First Item - Property binding:"></Label>
          <Input id="Input2"></Input>
          <Label text="First Item - Element binding:"></Label>
          <Input value="{CoNumber}"></Input>
        </Panel>
        <Panel id="Panel3" headerText="onRowPressed Data Binding">
          <Label text="Selected Item - Property binding:"></Label>
          <Input id="Input3"></Input>
          <Label text="Selected Item - Element binding:"></Label>
          <Input value="{CoNumber}"></Input>
        </Panel>
			</mvc:View>
	</script>


		<script>
			// define a new (simple) Controller type
			sap.ui.controller("my.own.controller", {
				onAfterRendering: function(){
				  var oTable = this.getView().byId('myTable');
          var oFirstItem = oTable.getItems()[0]; // This is your ColumnListItem object in the first row
          var oFirstCellItem = oFirstItem.getCells()[0]; // This is your Text object in the first cell of the first row
          
          var sFirstItemDataPath = oFirstCellItem.getBindingContext().getPath();
          this.getView().byId("Input1").bindProperty("value", sFirstItemDataPath + "/CoNumber");
          this.getView().byId("Panel1").bindElement(sFirstItemDataPath);
				},
				
				onUpdateFinished: function(oEvent){
				  var oTable = oEvent.getSource();
          var oFirstItem = oTable.getItems()[0]; // This is your ColumnListItem object in the first row
          var oFirstCellItem = oFirstItem.getCells()[0]; // This is your Text object in the first cell of the first row
          
          var sFirstItemDataPath = oFirstCellItem.getBindingContext().getPath();
          this.getView().byId("Input2").bindProperty("value", sFirstItemDataPath + "/CoNumber");
          this.getView().byId("Panel2").bindElement(sFirstItemDataPath);
				},
				
				onRowPressed: function(oEvent){
          var oFirstItem = oEvent.getParameter("listItem"); // This is the pressed ColumnListItem object
          var oFirstCellItem = oFirstItem.getCells()[0]; // This is your Text object in the first cell of the pressed row
          
          var sFirstItemDataPath = oFirstCellItem.getBindingContext().getPath();
          this.getView().byId("Input3").bindProperty("value", sFirstItemDataPath + "/CoNumber");
          this.getView().byId("Panel3").bindElement(sFirstItemDataPath);
				}
			});

			// instantiate the View
			var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above

			// create some dummy JSON data
			var data = {
				  WaybillsPlaces: [{
  				  CoNumber: "Item 1",
  				},{
  				  CoNumber: "Item 2",
  				},{
  				  CoNumber: "Item 3",
  				}]
				};
			
			// create a Model and assign it to the View
			var oModel = new sap.ui.model.json.JSONModel();
			oModel.setData(data);
			myView.setModel(oModel);
			
			
			// put the View onto the screen
			myView.placeAt('content');

		</script>
	
	</head>
	<body id='content' class='sapUiBody'>
	</body>
</html>
&#13;
&#13;
&#13;

EDIT2:将表单输入绑定到OData模型中的某个属性

为了便于使用,我将使用Northwind OData服务,但您只需要使用自己的模型。我使用了&#34;客户&#34; entitySet(a.k.a&#34; Customers&#34; DB table),&#34; CustomerName&#34;此实体集中的属性。

在您的情况下(根据说明中给定的OData,您应该使用&#39; WaybillsPlaces&#39;实体和您的CoNumber&#39;属性。如果您想访问一个特定条目,提供绑定URL中的括号之间的键(在您的情况下:WaybillsPlaces('4610103052'))。

我强烈建议您在UI5(herehere)中阅读有关OData绑定的更多信息。在高效的应用程序中,请将您的OData模型设置在manifest.json文件中,以确保在应用程序启动时完成$ metadata调用,从而避免了这种性能和许多其他问题。

HERE THE SNIPPET