<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-resourceroots='{"view": "./"}'
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<!--
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-resourceroots='{"view": "./"}'
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex">
</script>
-->
<script>
// Best practice would be to set this stuff up in an Component.js
// but let's not over-complicate stuff for demonstration purposes
// at the end of the page there is the corresponding xml view as a comment
sap.ui.localResources("view");
var page = sap.ui.view({
id: "idMain",
viewName: "view.main",
type: sap.ui.core.mvc.ViewType.XML
});
page.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.ui.commons"
xmlns:m="sap.m"
controllerName="view.main">
<Label text="Middle IconTabFilter is using a model but although COUNT is updated successfully, ICONCOLOR as well" />
<m:IconTabBar
id="idIconTabBar"
expanded="false"
select="handleIconTabBarSelect"
class="sapUiResponsiveContentPadding">
<m:items>
<m:IconTabFilter
id="itf1"
icon="sap-icon://globe"
iconColor="Positive" />
<!-- iconColor from: Neutral, Positive, Critical, Negative or Default -->
<m:IconTabFilter
id="iconTabFilter"
icon="sap-icon://overview-chart"
iconColor="{status>/STATUS}"
design="Horizontal"
count="{status>/COUNT}"
text="Status"
key="status">
</m:IconTabFilter>
<m:IconTabFilter
id="itf3"
icon="sap-icon://sap-logo-shape"
iconColor="Neutral" />
</m:items>
</m:IconTabBar>
</core:View>
{ "STATUS" : "Negative",
"COUNT" : "63"
}
sap.ui.controller("view.main", {
_oIconTabFilter: null,
/**
* 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 view.check
*/
onInit: function() {
this._oIconTabFilter = this.byId("iconTabFilter");
// Refresh model
var sUrl = "mock_data.json";
jQuery.ajax({
type : "GET",
dataType: "json",
url : sUrl,
context : this,
error : function(jqXHR, textStatus, errorThrown) {
var sMessage = jqXHR.status + " " + jqXHR.statusText + " " + jqXHR.responseText;
jQuery.sap.log.error("Data loading", sMessage, "index.html");
sap.m.MessageToast.show(sMessage)
},
success : function(oData, textStatus, jqXHR) {
if (oData === null || oData === undefined) {
var sMessage = "WARNING. Received a null or undefined response object.";
jQuery.sap.log.warning("Data loading", sMessage, "index.html");
sap.m.MessageToast.show(sMessage);
return;
}
var oModel = new sap.ui.model.json.JSONModel(oData);
this._oIconTabFilter.setModel(oModel, "status");
//this._oIconTabFilter.invalidate();
//this._oIconTabFilter.rerender();
}
});
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf publicis_userchecker.check
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf publicis_userchecker.check
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf publicis_userchecker.check
*/
// onExit: function() {
//
// }
});