<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: "JS",
      }).placeAt("content");
    });
  </script>
</head>

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

</html>
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({
        results: [{
          Userid: '100',
          Name: 'Bob'
        }, {
          Userid: '200',
          Name: 'Joe'
        }]
      }), "userList");
    },

    onOkPress: function() {
      //this.byId("dialog").close(); // Doesn't work?
      sap.ui.getCore().byId("dialog").close();
    },

    onItemPress: function(event) {
      var dialog = sap.ui.getCore().byId("dialog");
      var item = event.getSource();
      console.log(item);
      console.log(item.getBindingContext("userList")); // Undefined??
      
      dialog.setBindingContext(item.getBindingContext("userList"), "userList");
      dialog.open();
    }
  });

});
sap.ui.jsview("sap.ui.demo.wt.App", {

	/** Specifies the Controller belonging to this View. 
	* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
	* @memberOf views.project.activityList
	*/ 
	getControllerName : function() {
		return "sap.ui.demo.wt.App";
	},

	/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
	* Since the Controller is given to this method, its event handlers can be attached right away. 
	* @memberOf views.user.userList
	*/ 
	createContent : function(oController) {
    var oTable = new sap.m.Table({
			id: "UserTable",
			itemPress: [oController.onItemPress, oController],
			columns: [
				new sap.m.Column({
					header: new sap.m.Label({
						text: "User ID"
					})
				}),
				new sap.m.Column({
					header: new sap.m.Label({
						text: "Name"
					})
				})
			]
		});

		var template = new sap.m.ColumnListItem({
			type: "Active",
			visible: true,
			cells: [
				new sap.m.Text({
					text: "{userList>Userid}"
				}),
				new sap.m.Text({
					text: "{userList>Name}"
				})
			]
		});
		
		oTable.bindItems("userList>/results", template);
		
		
		var oDialog = new sap.m.Dialog("dialog", {
			title: "Add/Modify Users",
			contentWidth: "1em",
			content: [
				new sap.m.Label({text: "Enter User ID"}),
				new sap.m.Input({maxLength: 12, id: "Userid", value: "{userList>Userid}"}),
				new sap.m.Label({text: "Name"}),
        new sap.m.Input({maxLength: 12, id: "Name", value: "{userList>Name}"}),
				new sap.m.Button("okButton",{
			    text: "OK",
			    tap: [oController.onOkPress, oController]
		    }),
			]
		})
	  
    return new sap.m.Page({
      title: "User List",
      content: [
				oTable,
				oDialog
			]
    })
	}

});