<!DOCTYPE html>
<html>
<head>
<title>OpenUI5 Hello World App</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-resourceroots='{"HelloWorld": "./"}'
displayBlock="true">
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.xmlview({
viewName: "HelloWorld.App"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
<mvc:View
controllerName="HelloWorld.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns="sap.m">
<Page title="The sap.m.Table"/>
<SearchField search="handleLiveChange"/>
<l:HorizontalLayout class="sapUiContentPadding">
<Label text="Net total"/>
<Input id="InputField"/>
<Button id="submit" text="Submit" press = "onPress"/>
</l:HorizontalLayout>
<Table id="tableId" inset="false" items="{/}">
<columns>
<Column width="12em">
<ObjectIdentifier text="Name"/>
</Column>
<Column>
<Text text="Favourite Food"/>
</Column>
<Column>
<Text text="Color"/>
</Column>
<Column>
<ObjectNumber number="Number of Legs"/>
</Column>
<Column>
<Text text="CheckBox"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{name}"/>
<Text text="{favouriteFood}"/>
<Text text="{color}"/>
<ObjectNumber
number="{numberOfLegs}" />
<CheckBox id="checkbox" selected="false" select = "onSelect"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/m/MessageBox",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], function (Controller, MessageToast, MessageBox, Filter, FilterOperator) {
"use strict";
return Controller.extend("HelloWorld.App", {
onInit: function () {
var oModel = new sap.ui.model.json.JSONModel(
[
{
"name": "Fox",
"favouriteFood": "chicken",
"color": "red",
"numberOfLegs": "-4"
},
{
"name": "Pig",
"favouriteFood": "everything",
"color": "pink",
"numberOfLegs": "4"
},
{
"name": "Cat",
"favouriteFood": "mouse",
"color": "grey",
"numberOfLegs": "4"
},
{
"name": "Snake",
"favouriteFood": "mouse",
"color": "green",
"numberOfLegs": "0"
}
]
);
this.getView().setModel(oModel);
},
handleLiveChange : function(oEvent){
// build filter array
var aFilter = [];
var sQuery = oEvent.getParameter("query");
if (sQuery) {
aFilter.push(new Filter("name", FilterOperator.Contains, sQuery));
}
// filter binding
var oList = this.getView().byId("tableId");
var oBinding = oList.getBinding("items");
oBinding.filter(aFilter);
},
onSelect: function(oEvent){
if(!this.totalCounter){
this.totalCounter = 0;
}
// alert("Hello!");
var sPath = oEvent.getSource().getBindingContext().getPath().split("/")[1];
var numericData = Number(this.getView().getModel().getData()[sPath].numberOfLegs);
if(oEvent.getParameter("selected") === true){
this.totalCounter = this.totalCounter + numericData;
}
else{
this.totalCounter = this.totalCounter - numericData;
}
this.getView().byId("InputField").setValue(this.totalCounter);
},
onPress: function(oEvent){
//alert();
debugger;
if(this.totalCounter === 0){
sap.m.MessageToast.show("Net value is 0");
this.getView().byId("InputField").setValue();
}
else {
MessageBox.warning("net amoount is not 0.", {
title: "Warning", // default
onClose: null, // default
styleClass: "", // default
actions: sap.m.MessageBox.Action.OK, // default
emphasizedAction: sap.m.MessageBox.Action.OK, // default
initialFocus: null, // default
textDirection: sap.ui.core.TextDirection.Inherit, // default
dependentOn: null // default
});
}
}
});
});
Most basic example of an UI5 sap.m.Table.