<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Tile Container CSS</title>
<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-xx-bindingSyntax="complex" data-sap-ui-libs="sap.m"></script>
<style>
.firstTile {
background-color: #003366;
}
.secondTile {
background-color: #FF9999;
}
.thirdTile {
background-color: #F79C6E;
}
.fourthTile {
background-color: #F7C96E;
}
.fifthTile {
background-color: #eacabb;
}
.sixthTile {
background-color: #99e9ff;
}
.seventhTile {
background-color: #E0F76E;
}
.eigthTile {
background-color: #6EF79C;
}
.ninthTile {
background-color: #A3F5DA;
}
.tenthTile {
background-color: #B3C3E6;
}
.elevenTile {
background-color: #CCA3F5;
}
.twelveTile {
background-color: #F5A3F5;
}
</style>
<!-- XML-based view definition -->
<script id="chartView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="sap.m.sample.TileContainer.Page" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<pages>
<Page showHeader="false" enableScrolling="false">
<TileContainer id="container" tileDelete="handleTileDelete" tiles="{/modelData/tilesData}">
<StandardTile type="{type}" number="{number}" numberUnit="{numberUnit}" title="{title}" info="{info}" infoState="{infoState}" />
</TileContainer>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button text="Edit" press="handleEditPress" />
<Button text="Busy state" press="handleBusyPress" />
<ToolbarSpacer/>
</Toolbar>
</footer>
</Page>
</pages>
</App>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.controller("sap.m.sample.TileContainer.Page", {
onInit: function(evt) {
var aData = [{
"icon": "hint",
"type": "Monitor",
"title": "Tiles: a modern UI design pattern for overview & navigation."
}, {
"icon": "inbox",
"number": "89",
"title": "Approve Leave Requests",
"info": "Overdue",
"infoState": "Error"
}, {
"type": "Create",
"title": "Create Leave Requests",
"info": "28 Days Left",
"infoState": "Success"
}, {
"icon": "travel-expense-report",
"number": "281",
"numberUnit": "euro",
"title": "Travel Reimbursement",
"info": "1 day ago"
}, {
"icon": "loan",
"number": "2380",
"numberUnit": "euro",
"title": "My Salary",
"info": "8 days ago"
}, {
"icon": "lab",
"number": "1",
"numberUnit": "Invention",
"title": "Test Lab Reports",
"info": "8 Days Ago"
}, {
"icon": "inbox",
"type": "Monitor",
"title": "Leave Request History"
}, {
"type": "Create",
"title": "Create Purchase Order",
"info": "890€ Open Budget",
"infoState": "Success"
}, {
"icon": "stethoscope",
"number": "3",
"title": "Yearly Health Check",
"info": "3 year overdue",
"infoState": "Error"
}, {
"icon": "meal",
"type": "Monitor",
"title": "Meal Schedule"
}, {
"icon": "cart",
"number": "787",
"numberUnit": "euro",
"title": "My Shopping Carts",
"info": "Waiting for Approval",
"infoState": "Warning"
}, {
"icon": "factory",
"number": "2",
"numberUnit": "Outages",
"title": "Factory Power Management",
"info": "Production On Hold",
"infoState": "Error"
}, {
"icon": "calendar",
"title": "Team Calendar"
}, {
"icon": "pie-chart",
"number": "5",
"title": "Financial Reports",
"info": "4 day ago",
"infoState": "Warning"
}];
// set mock model
var model = new sap.ui.model.json.JSONModel();
model.setData({
modelData: {
tilesData: []
}
});
sap.ui.getCore().setModel(model);
sap.ui.getCore().getModel().setProperty("/modelData/tilesData", aData);
var oContainer = this.getView().byId("container");
oContainer.addDelegate({
onAfterRendering: function() {
var header = this.$().children()[0];
var oNodes = header.childNodes[1].childNodes;
sap.ui.getCore().byId(oNodes[0].id).addStyleClass("firstTile");
sap.ui.getCore().byId(oNodes[1].id).addStyleClass("secondTile");
sap.ui.getCore().byId(oNodes[2].id).addStyleClass("thirdTile");
sap.ui.getCore().byId(oNodes[3].id).addStyleClass("fourthTile");
sap.ui.getCore().byId(oNodes[4].id).addStyleClass("fifthTile");
sap.ui.getCore().byId(oNodes[5].id).addStyleClass("sixthTile");
sap.ui.getCore().byId(oNodes[6].id).addStyleClass("seventhTile");
sap.ui.getCore().byId(oNodes[7].id).addStyleClass("eighthTile");
sap.ui.getCore().byId(oNodes[8].id).addStyleClass("ninthTile");
sap.ui.getCore().byId(oNodes[9].id).addStyleClass("tenthTile");
sap.ui.getCore().byId(oNodes[10].id).addStyleClass("elevenTile");
sap.ui.getCore().byId(oNodes[11].id).addStyleClass("twelveTile");
}
}, oContainer);
},
handleEditPress: function(evt) {
var oTileContainer = this.getView().byId("container");
var newValue = !oTileContainer.getEditable();
oTileContainer.setEditable(newValue);
evt.getSource().setText(newValue ? "Done" : "Edit");
},
handleBusyPress: function(evt) {
var oTileContainer = this.getView().byId("container");
var newValue = !oTileContainer.getBusy();
oTileContainer.setBusy(newValue);
evt.getSource().setText(newValue ? "Done" : "Busy state");
},
handleTileDelete: function(evt) {
var tile = evt.getParameter("tile");
evt.getSource().removeTile(tile);
}
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#chartView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */