Return a value with highlighted color

Requirement: I have a fragment.xml file which I am extending. The form element is currently being processed with a formatter.js where I am validating some values based on some condition:

In Fragment, the formatter function is getting called correctly

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

Formatter:

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

In the output, I should get sResult highlighted either in green, yellow, or red based on the condition.

标签： sapui5

3条回答

啃猪蹄的小仙女

2楼-- · 2019-05-25 20:06

In Fragment file:

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

In CSS file:

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

In Formatter file:

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;
}

0人赞添加讨论(0) 举报

一纸荒年 Trace。

3楼-- · 2019-05-25 20:18

Binding on text will not work for highlighting the text. refer the example for alternative solution.

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

In Format.js file:

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";
    }
 }

0人赞添加讨论(0) 举报

淡お忘

4楼-- · 2019-05-25 20:18

Instead of plain sap.m.Text, take advantage of sap.m.ObjectStatus which works exactly like Text but supports semantic colors (via state) out-of-the-box.

Run the following snippet to see the results:

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")));

<script>
  window["sap-ui-config"] = {
    libs: "sap.ui.core, sap.m",
    preload: "async",
    theme: "sap_belize",
    compatVersion: "edge",
    "xx-waitForTheme": true,
    "xx-async": true
  }
</script>
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

We can see green, yellow, and red depending on the condition.

0人赞添加讨论(0) 举报

Return a value with highlighted color

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间