<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Table DualBinding Sample</title>
<!-- 1.) Load SAPUI5 (from a remote server), select theme and 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.ui.commons,sap.m,sap.ui.layout,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex"></script>
<style>
.labelStyle{
margin-top: 5%;
}
.hStyle{
margin-top: 2%;
margin-left: 42%;
}
</style>
<!-- XML-based view definition -->
<script id="tableView" type="sapui5/xmlview">
<mvc:View
controllerName="DynamicControls.Main"
xmlns:layout="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:table="sap.ui.table"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.ui.commons"
class="viewPadding">
<table:Table id="carrierTable" visibleRowCount="5" enableGrouping="true" enableSorting="true">
<table:title><TextView text="Carrier Shipments [Uploaded]"></TextView></table:title>
<table:columns>
<table:Column>
<Label text="File ID"/>
<table:template>
<TextView text = "{fileId}" />
</table:template>
</table:Column>
<table:Column>
<Label text="Invoice Number"/>
<table:template>
<TextView text = "{InvoiceNumber}" />
</table:template>
</table:Column>
<table:Column>
<Label text="ShipmentNumber"/>
<table:template>
<TextView text = "{ShipmentNumber}" />
</table:template>
</table:Column>
<table:Column>
<Label text="TrackingNumber"/>
<table:template>
<TextView text = "{TrackingNumber}" />
</table:template>
</table:Column>
<table:Column>
<Label text="ContainerType"/>
<table:template>
<TextView text = "{ContainerType}" />
</table:template>
</table:Column>
</table:columns>
</table:Table>
<layout:HorizontalLayout class="hStyle">
<Label text="FileId:" class="labelStyle"/>
<TextField id="oField" change="onChange"/>
</layout:HorizontalLayout>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.controller("DynamicControls.Main", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/
onInit: function() {
var aData ={d:{
results:[
{AccountNumber: "0000W19E46", InvoiceNumber: "201510156836", fileId:"carriersmall.xml20150917135454", toPosition:[{ContainerType:"PKG",ShipmentNumber:"1ZW19E46",InvoiceNumber:"201510156836",TrackingNumber:"1YUISL563",fileId:"carriersmall.xml20150917135454"},
{ContainerType:"PKG",ShipmentNumber:"1ZW19E47",InvoiceNumber:"201510156836",TrackingNumber:"1YUISL564",fileId:"carriersmall.xml20150917135454"},
{ContainerType:"PKG",ShipmentNumber:"1ZW19E48",InvoiceNumber:"201510156836",TrackingNumber:"1YUISL565",fileId:"carriersmall.xml20150917135454"},
{ContainerType:"PKG",ShipmentNumber:"1ZW19E49",InvoiceNumber:"201510156836",TrackingNumber:"1YUISL566",fileId:"carriersmall.xml20150917135454"}]},
{AccountNumber: "0000W19E47", InvoiceNumber: "201510156837", fileId:"carriersmall.xml20160917135455", toPosition:[{ContainerType:"LPG",ShipmentNumber:"4PF19R78",InvoiceNumber:"201510156837",TrackingNumber:"4OPISJ795", fileId:"carriersmall.xml20160917135455"},
{ContainerType:"LPG",ShipmentNumber:"4PF19R79",InvoiceNumber:"201510156837",TrackingNumber:"4OPISJ796", fileId:"carriersmall.xml20160917135455"},
{ContainerType:"LPG",ShipmentNumber:"4PF19R80",InvoiceNumber:"201510156837",TrackingNumber:"4OPISJ797", fileId:"carriersmall.xml20160917135455"},
{ContainerType:"LPG",ShipmentNumber:"4PF19R81",InvoiceNumber:"201510156837",TrackingNumber:"4OPISJ798", fileId:"carriersmall.xml20160917135455"}]},
{AccountNumber: "0000W19E48", InvoiceNumber: "201510156838", fileId:"carriersmall.xml20140917135456", toPosition:[{ContainerType:"NDS",ShipmentNumber:"3IL48I32",InvoiceNumber:"201510156838",TrackingNumber:"3PDHMP423", fileId:"carriersmall.xml20140917135456"},
{ContainerType:"NDS",ShipmentNumber:"3IL48I33",InvoiceNumber:"201510156838",TrackingNumber:"3PDHMP424", fileId:"carriersmall.xml20140917135456"},
{ContainerType:"NDS",ShipmentNumber:"3IL48I34",InvoiceNumber:"201510156838",TrackingNumber:"3PDHMP425", fileId:"carriersmall.xml20140917135456"},
{ContainerType:"NDS",ShipmentNumber:"3IL48I35",InvoiceNumber:"201510156838",TrackingNumber:"3PDHMP426", fileId:"carriersmall.xml20140917135456"}]}
]}};
//Create a model and bind the table rows to this model
var model = new sap.ui.model.json.JSONModel();
model.setData({
modelData: {
invoiceData : {}
}
});
sap.ui.getCore().setModel(model);
sap.ui.getCore().getModel().setProperty("/modelData/masterData",aData.d.results);
var oDataObject = aData.d.results;
var oModelObject=[];
for(var i=0;i<oDataObject.length;i++){
if(oDataObject[i].fileId == "carriersmall.xml20150917135454"){
var oItems = oDataObject[i].toPosition;
oModelObject.push(oItems);
}
}
//alert(JSON.stringify(oModelObject));
sap.ui.getCore().getModel().setProperty("/modelData/invoiceData", oModelObject[0]);
this.getView().byId("carrierTable").bindRows({path: '/modelData/invoiceData'});
},
onChange:function(oEvent){
var oValue = oEvent.getParameter("newValue");
oEvent.getSource().setValue("");
var oDataObject = sap.ui.getCore().getModel().getProperty("/modelData/masterData");
var oModelObject=[];
for(var i=0;i<oDataObject.length;i++){
if(oDataObject[i].fileId == oValue){
var oItems = oDataObject[i].toPosition;
oModelObject.push(oItems);
}
}
//alert(JSON.stringify(oModelObject));
sap.ui.getCore().getModel().setProperty("/modelData/invoiceData", oModelObject[0]);
}
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#tableView').html()
});
oView.placeAt('uiArea');
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 button -->
<div id="uiArea"></div>
</body>
</html>
// Code goes here
/* Styles go here */