<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">
  <title>UI5 Demo</title>
  <script id="sap-ui-bootstrap"
    src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
    data-sap-ui-theme="sap_belize"
    data-sap-ui-libs="sap.m"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-preload="async"
    data-sap-ui-resourceroots='{
			"sap.ui.demo.wt": "./"
		}'>
  </script>
  <script>
    sap.ui.getCore().attachInit(function() {
      new sap.ui.view({
        viewName: "sap.ui.demo.wt.App",
        type: "XML",
      }).placeAt("content");
    });
  </script>
</head>

<body class="sapUiBody" id="content">
</body>

</html>
<mvc:View
	controllerName="sap.ui.demo.wt.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Table items="{list>/rows}">
		<headerToolbar>
			<Toolbar>
				<Title text="Costing" level="H2"/>
			</Toolbar>
		</headerToolbar>
    <columns>
			<Column
				width="12em">
				<Text text="Section" />
			</Column>
			<Column
				width="12em">
				<Text text="Cost" />
			</Column>
		</columns>
		<items>
			<ColumnListItem type="Active" press=".onItemPress">
				<cells>
					<Text text="{list>sectionId}"/>
					<Text text="{list>costId}" />
				</cells>
			</ColumnListItem>
		</items>
		<dependents>
      <Dialog id="myDialog"
        title="Edit Item"
        type="Message"
		  >
        <VBox renderType="Bare">
          <Label text="Section" />
          <Input value="{list>sectionId}" />
          <Label text="Cost" />
          <Input value="{list>costId}" />
        </VBox>
        <beginButton>
          <Button
            text="Cancel"
            press=".onCancelPress"
          />
        </beginButton>
        <endButton>
          <Button
            text="OK"
            press=".onOkPress"
          />
        </endButton>
      </Dialog>
    </dependents>
	</Table>
</mvc:View>
sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel",
], function(Controller, JSONModel) {
  "use strict";

  return Controller.extend("sap.ui.demo.wt.App", {
    onInit: function() {
      this.getView().setModel(new JSONModel({
        rows: [{
          sectionId: '00001000',
          costId: '1L'
        }, {
          sectionId: '00002000',
          costId: '2'
        }]
      }), "list");
    },

    onCancelPress: function() {
      this.byId("myDialog").close();
    },

    onOkPress: function() {
      this.byId("myDialog").close();
    },

    onItemPress: function(event) {
      var dialog = this.byId("myDialog");
      var item = event.getSource();
      dialog.setBindingContext(item.getBindingContext("list"), "list");
      dialog.open();
    }
  });

});