如何根据json中的属性更改tile容器中标准tile的bg颜色

Question

我尝试用一些属性动态更改每个瓦片的背景色(在json文件中，我在不同的瓦片中有属性，比如"tileColorGroup": "Group1", "tileColorGroup": "Group2", "tileColorGroup": "Group3"…等等，每个组都有自己的背景色。

我使用的是XML视图和JS控制器。我试图通过以下代码在我的view1.controller.js中实现这一点

onInit : function () {          
var oTileContainer = this.byId("TileContainer");    
var oTiles = oTileContainer.getTile();
console.log("oTiles: " + oTiles); <--- no value

也许还有更好的方法？

提前感谢的任何帮助和建议

Answer 1

TileContainer没有方法getTile-该方法是getTiles。这可能就是您的代码无法工作的原因。

另外请注意，在SAPUI5 1.50中不推荐使用TileContainer。

您可以扩展GenericTile控件，为您可以绑定的背景颜色提供一个属性。

Answer 2

如果只想使用TileContainer控件，那么可以使用格式化程序和CSS来实现。

查看

<TileContainer
id="container"
class="tileContainerHolder"
tiles="{/TileCollection}">
<StandardTile
icon="{icon}"
type="{type}"
number="{number}"
numberUnit="{numberUnit}"
title="{parts: [ 'title', 'tileColorGroup'], formatter:'my.Formatter.addBackgroundColor'}"
info="{info}"
infoState="{infoState}" />
</TileContainer>

格式化程序.js

jQuery.sap.declare("my.Formatter");
my.Formatter = {
addBackgroundColor: function (title, tileColorGroup) {
this.addStyleClass("grp" + tileColorGroup);//Add group class
return title;
}
};

CSS

.tileContainerHolder .grpGroup1.sapMTile {
background: #f0ab00;
}
.tileContainerHolder .grpGroup2.sapMTile {
background: #007cc0;
}
.tileContainerHolder .grpGroup3.sapMTile {
background: #008a3b;
}

注意：要添加类，您需要使用任何一个绑定属性类似的title，以便我们可以获得Tile的实例并向其添加相应的类。