<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<title>SAPUI5 demo</title>
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m, sap.ui.layout"
data-sap-ui-xx-bindingsyntax="complex"
data-sap-ui-resourceroots='{"be.wl.color": "./"}'></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
var app = new sap.m.App({initialPage:"main"});
var page = sap.ui.view({id:"main", viewName:"be.wl.color.views.main", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:t="sap.ui.table"
controllerName="be.wl.color.views.main" >
<t:Table id="table" visibleRowCount="17" rows="{/data}" >
<t:columns>
<t:Column id="col1" >
<Label text="Col1"/>
<t:template>
<Text text="{col1}">
<customData>
<core:CustomData key="colorClass" value="{ path:'col1Color'}" writeToDom="true" />
</customData>
</Text>
</t:template>
</t:Column>
<t:Column id="col2" >
<Label text="Col2"/>
<t:template>
<Text text="{col2}">
<customData>
<core:CustomData key="colorClass" value="{ path:'col2Color'}" writeToDom="true" />
</customData>
</Text>
</t:template>
</t:Column>
</t:columns>
</t:Table>
</core:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
"use strict";
return Controller.extend("be.wl.color.views.main", {
onInit:function(){
var data =
{
data:[
{col1:"red cell",col1Color:"red",col2:"orange cell",col2Color:"orange"},
{col1:"no color cell",col1Color:"",col2:"green",col2Color:"green"}
]
};
var json = new JSONModel(data);
this.getView().setModel(json);
}
});
});
span[data-colorclass="red"] {
background-color:#F00000 !important;
}
span[data-colorclass="green"] {
background-color:#01DF01 !important;
}
span[data-colorclass="orange"] {
background-color:#FA8258 !important;
}