返回突出显示颜色的值

时间:2017-10-25 20:29:11

标签: sapui5

要求:我有一个fragment.xml文件,我正在扩展。表单元素当前正在使用formatter.js进行处理,我根据某些条件验证某些值:

在Fragment中,格式化函数被正确调用

<Text text="{
    parts: [
        {path: 'ZName1'},
        {path: 'ZStatus1'}
    ],
    formatter: '.Formatter.delivery'
}" >

格式化:

delivery: function(iName, iStatus) {
    var sResult = "";
    if(iStatus === "A" ) {
        sResult = iName ;
    } else if(iStatus === "P") {
        sResult = iName ;
    } else {
        sResult = iName ;
    }
    return sResult ;
}

在输出中,我应该根据条件以绿色,黄色或红色突出显示sResult

3 个答案:

答案 0 :(得分:1)

对文本进行绑定不会突出显示文本。参考替代解决方案的示例。

<Text id="id" text="{ZName1}" class="{parts: [{path: 'ZName1'},{path: 'ZStatus1'} ],
     formatter : '.Formatter.delivery'}">

在Format.js文件中:

delivery: function(iName, iStatus) {
    var idText = this.byId("id"); 

    if(iStatus === "A" ) {
      idText.removeStyleClass("classForYellowColor");
      idText.removeStyleClass("classForRedColor");
      return "classForGreenColor";
    } else if(iStatus === "P") {
      idText.removeStyleClass("classForGreenColor");
      idText.removeStyleClass("classForRedColor");
      return "classForYellowColor";
    } else {
      idText.removeStyleClass("classForGreenColor");
      idText.removeStyleClass("classForYellowColor");
      return "classForRedColor";
    }
 }

答案 1 :(得分:1)

在片段文件中:

<Text text="{parts: [{path: 'ZName1'},{path: 'ZStatus1'}],
     formatter : '.Formatter.delivery'}" >

在CSS文件中:

.greenTxtHlight {
    color: green;
}
.yellowTxtHlight {
    color: yellow;
}
.redTxtHlight {
    color: red;
}

在Formatter文件中:

delivery: function(sName, sStatus) {
    switch(sStatus){
        case "A":
            this.addStyleClass("greenTxtHlight");
            this.removeStyleClass("yellowTxtHlight");
            this.removeStyleClass("redTxtHlight");              
        break;
        case "P":
            this.removeStyleClass("greenTxtHlight");
            this.addStyleClass("yellowTxtHlight");
            this.removeStyleClass("redTxtHlight");
        break;
        case "G"://Update this
            this.removeStyleClass("greenTxtHlight");
            this.removeStyleClass("yellowTxtHlight");
            this.addStyleClass("redTxtHlight");
        break;
    }
    return sName;
}

答案 2 :(得分:0)

而不是简单// execute query first time int numFound = query.Count(); var result = query.Skip(request.Start == 0 ? 0 : request.Start - 1).Take(request.Length); // executing query second time! int numShown = result.Count(); // executing query third time! // result.Select [...] .ToList() ,利用与sap.m.Text完全相同的UserVoice,但支持语义颜色(通过Text) - 的现成。

运行以下代码段以查看结果:

&#13;
&#13;
state
&#13;
sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/m/List",
  "sap/m/CustomListItem",
  "sap/m/ObjectStatus", // instead of Text
  "sap/ui/core/ValueState",
  "sap/ui/model/json/JSONModel",
], (List, Item, ObjectStatus, ValueState, JSONModel) => new List().bindItems({
  path: "/myData",
  template: new Item().addContent(new ObjectStatus({
    text: "{ZName1}",
    state: {
      path: "ZStatus1",
      formatter: status =>
        status === "A" ? ValueState.Success : // Green
        status === "P" ? ValueState.Warning : // Yellow
        status === "Z" ? ValueState.Error : // Red
        ValueState.None
    },
  }).addStyleClass("sapUiSmallMargin")),
}).setModel(new JSONModel({
  myData: [
    {
      ZName1: "Success",
      ZStatus1: "A"
    },
    {
      ZName1: "Warning",
      ZStatus1: "P"
    },
    {
      ZName1: "Error",
      ZStatus1: "Z"
    },
    {
      ZName1: "None",
      ZStatus1: ""
    },
  ],
})).placeAt("content")));
&#13;
&#13;
&#13;

根据条件,我们可以看到绿色,黄色和红色。