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。这就是为什么您的代码无法正常工作的原因。

还要注意，TileContainer在SAPUI5 1.50中已弃用。

您可以扩展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>

Formatter.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的实例并添加相应的类。

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

2 个答案: