<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>SAPUI5 Example</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='{
"example": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
app : new sap.ui.core.ComponentContainer({
name : "example",
settings : {
id : "example"
}
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
<core:View
controllerName="example.view.Main" xmlns="sap.m"
xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:l="sap.ui.layout">
<App>
<Page showHeader="false">
<content>
<ObjectHeader
id="oh1"
responsive="true"
binding="{/ProductCollection/1}"
intro="{Description}"
title="{Name}">
<attributes>
<ObjectAttribute
title="ProductID"
text="{ProductId}"/>
<ObjectAttribute
title="Manufacturer"
text="{SupplierName}"/>
<ObjectAttribute
title="Category"
text="{Category}"/>
<ObjectAttribute
title="Weight per unit"
text="{WeightMeasure} {WeightUnit}"/>
<ObjectAttribute
title="Dimension per unit"
text="{Width} x {Depth} x {Height} {DimUnit}"/>
</attributes>
<statuses>
<ObjectStatus
title="Approval"
text="Pending"
state="Warning"/>
</statuses>
<headerContainer>
<IconTabBar
id="itb1"
visible="{= ${/ProductCollectionStats/Filters}.length > 0 }"
items="{/ProductCollectionStats/Filters}">
<items>
<IconTabFilter text="{text}">
<Text text="{text}" />
</IconTabFilter>
</items>
</IconTabBar>
</headerContainer>
</ObjectHeader>
<Button text="Add model data" press="handleButtonPress1" />
<Button text="Remove model data" press="handleButtonPress2" />
</content>
</Page>
</App>
</core:View>
sap.ui.define([
'jquery.sap.global',
'sap/m/MessageBox',
'sap/ui/core/Fragment',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, MessageBox, Fragment, Controller, JSONModel) {
"use strict";
var PageController = Controller.extend("example.view.Main", {
onInit: function() {
var oModel = new JSONModel(jQuery.sap.getModulePath("example.view", "/products.json"));
this.getView().setModel(oModel);
},
handleButtonPress1: function() {
var oView = this.getView(),
oModel = oView.getModel(),
oData = oModel.getData(),
oNewData = {
"text": "New Filter"
};
oData.ProductCollectionStats.Filters.push(oNewData);
oModel.refresh(true);
},
handleButtonPress2: function() {
var oModel = this.getView().getModel(),
oData = oModel.getData();
if(oData.ProductCollectionStats.Filters.length) {
oData.ProductCollectionStats.Filters.pop();
}
oModel.refresh(true);
}
});
return PageController;
});
{
"ProductCollection": [
{
"ProductId": "HT-1000",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.2,
"WeightUnit": "KG",
"Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 15",
"DateOfSale": "2017-03-26",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1000.jpg",
"Status": "Available",
"Quantity": 10,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 956,
"Width": 30,
"Depth": 18,
"Height": 3,
"DimUnit": "cm"
},
{
"ProductId": "HT-1001",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.5,
"WeightUnit": "KG",
"Description": "Notebook Basic 17 with 2,80 GHz quad core, 17\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 17",
"DateOfSale": "2017-04-17",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1001.jpg",
"Status": "Available",
"Quantity": 20,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1249,
"Width": 29,
"Depth": 17,
"Height": 3.1,
"DimUnit": "cm"
},
{
"ProductId": "HT-1002",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.2,
"WeightUnit": "KG",
"Description": "Notebook Basic 18 with 2,80 GHz quad core, 18\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 18",
"DateOfSale": "2017-01-07",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1002.jpg",
"Status": "Available",
"Quantity": 10,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1570,
"Width": 28,
"Depth": 19,
"Height": 2.5,
"DimUnit": "cm"
},
{
"ProductId": "HT-1003",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Smartcards",
"WeightMeasure": 4.2,
"WeightUnit": "KG",
"Description": "Notebook Basic 19 with 2,80 GHz quad core, 19\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 19",
"DateOfSale": "2017-04-09",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1003.jpg",
"Status": "Available",
"Quantity": 15,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1650,
"Width": 32,
"Depth": 21,
"Height": 4,
"DimUnit": "cm"
}
],
"ProductCollectionStats": {
"Filters": []
}
}
{
"_version": "1.8.0",
"sap.app": {
"id": "example",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"rootView": {
"viewName": "example.view.Main",
"type": "XML",
"async": true,
"id": "app"
},
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
}
}
}
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
"use strict";
return UIComponent.extend("example.Component", {
metadata : {
manifest: "json"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
}
});
});