Skip to Content

Adding an Icon Based on Data Received from XML Model

I am receiving some data from an XML model and I have successfully bound it to a table. However, on a particular field, I don't want to show the data that's been received directly. If the data received is 1, I want a green colored tick. If data received is 2, I want a red colored tick. How can I do it?

Any sample code/links are appreciated.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Sep 09, 2017 at 07:39 PM

    i think better way would be, change and get desired data instead of 1 or 2 from the service itself and bind it to color property of icon, as below,

    <core:Icon src="sap-icon://accept" color="{color}" >
    </core:Icon>

    Example

    Add comment
    10|10000 characters needed characters exceeded

    • good practice to accomplish this to implement logic/validation in the backend and get desired data from the service itself even if dependency on that value 1 or 2, you can introduce a separate field in the service and bind it directly to UI element.

      in your scenario, if any limitation in service modification, yes you can go with another answer that will work 100% :)

  • Sep 09, 2017 at 02:26 PM

    Use formatter.

    Include an icon control ex: sap-icon://accept. If the data is 1, in the formatter for the icon css style - sapUiIconColorDefault set the color: green.

    sapUiIconColorDefault {
        color: green;
    }
    

    This will make the icon green. When value 2, set the color as red.

    Add comment
    10|10000 characters needed characters exceeded

    • In your local css file, create a css class for your object list item

      .MyIcon{ }

      In your code, use the method .addClass

                  
      var icon = "";
      if(value === "1")
                  {
                  $(".MyIcon").css( "color", "green");
                  return "sap-icon://sys-enter-2";
                  }
                  else
                  {
      
                  $(".MyIcon").css( "color", "red");
                  return "sap-icon://sys-cancel-2";
                  }
  • Sep 10, 2017 at 09:34 AM

    I think, changing/setting the color inside formatter function wont work, coz rendering function of table will overwrite the code whatever you will write inside formatter function.

    you need to write onafterrending function for the table and set/apply css there, as below,

    this._oTable.onAfterRendering = function() {
                if (sap.m.Table.prototype.onAfterRendering) {
                    sap.m.Table.prototype.onAfterRendering.apply(this, arguments);
                }
                var oItems = this.getItems();
                for (var i = 0; i < oItems.length; i++) {
                    var oItem = oItems[i];
                    var obj = oItem.getBindingContext().getObject();
                    var sColorValue = obj.color;
                    if (sColorValue === '1') {
                        oItem.$().find('.sapUiIcon').addClass('greenIcon');
                    } else {
                        oItem.$().find('.sapUiIcon').addClass('redIcon');
                    }
                }
            }

    See Demo

    Add comment
    10|10000 characters needed characters exceeded