<!DOCTYPE html>
<html>
<head>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<meta charset="utf-8">
<title>HighlightTableListItem</title>
<style>
.listItemColor{
background-color: #FFFF00 !important;
}
</style>
<!-- XML-based view definition -->
<script id="tableView" type="sapui5/xmlview">
<mvc:View
controllerName="DynamicControls.Main"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:u="sap.ui.unified"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
class="viewPadding">
<App>
<pages>
<Page
title="Products Page"
class="marginBoxContent" >
<content>
<VBox id="oVBox">
<Table id="idProductsTable"
growing="true"
growingThreshold="5"
items="{/modelData/productsData}">
<columns>
<Column>
<Label text="Product" />
</Column>
<Column>
<Label text="Weight" />
</Column>
<Column>
<Label text="Product Input" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{Product}" />
<Text text="{Weight}" />
<Input />
</cells>
</ColumnListItem>
</items>
</Table>
</VBox>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
<script>
jQuery.sap.require("sap.m.MessageToast");
// 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 dataObject = [
{Product: "Power Projector 4713", Weight: "1467"},
{Product: "Gladiator MX", Weight: "321"},
{Product: "Hurricane GX", Weight: "588"},
{Product: "Webcam", Weight: "700"},
{Product: "Monitor Locking Cable", Weight: "40"},
{Product: "Laptop Case", Weight: "1289"},
{Product: "USB Stick 16 GByte", Weight: "11"},
{Product: "Deskjet Super Highspeed", Weight: "100"},
{Product: "Laser Allround Pro", Weight: "2134"},
{Product: "Flat S", Weight: "1401"},
{Product: "Flat Medium", Weight: "1800"},
{Product: "Flat X-large II", Weight: "2100"}];
var model = new sap.ui.model.json.JSONModel();
model.setData({modelData: {productsData : []}});
sap.ui.getCore().setModel(model);
sap.ui.getCore().getModel().setProperty("/modelData/productsData", dataObject);
},
onAfterRendering : function() {
var oLastListItem = $('#__xmlview0--idProductsTable').find('.sapMListTblRow').last()[0].id;
var oLastListItemId = sap.ui.getCore().byId(oLastListItem);
oLastListItemId.addStyleClass("listItemColor");
var oTriggerID = $('#__xmlview0--idProductsTable-trigger')[0].id;
var oGrowButtonID = sap.ui.getCore().byId(oTriggerID);
oGrowButtonID.attachPress(function(oEvent){
var oListItems = $('#__xmlview0--idProductsTable').find('.sapMListTblRow');
for(var i=1;i<oListItems.length;i++){
var oListItemID = oListItems[i].id;
sap.ui.getCore().byId(oListItemID).removeStyleClass("listItemColor");
}
var oLastListItem = $('#__xmlview0--idProductsTable').find('.sapMListTblRow').last()[0].id;
var oLastListItemId = sap.ui.getCore().byId(oLastListItem);
oLastListItemId.addStyleClass("listItemColor");
});
}
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#tableView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */