Skip to Content
0

Adding an Icon Based on Data Received from XML Model

Sep 09, 2017 at 01:11 PM

65

avatar image
Former Member

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.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Akhilesh Upadhyay Sep 09, 2017 at 07:39 PM
0

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

Show 4 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi, that's not possible. The data cannot be modified. I am able to get a different icon based on the condition using formatter, however I'm having trouble giving it a different color/class.

0

just curious, why not possible ?

will give u another workaround...

0
Former Member
Akhilesh Upadhyay

Nothing wrong with your method, but I cannot modify the service/transaction to get the desired data instead of 1 or 2. A lot of other things depend on that 1 or 2. I will try out the other answer you posted :)

0

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% :)

0
Sharath M G Sep 09, 2017 at 02:26 PM
0

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.

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Sharath,

I tried Formatter and I'm able to get a different icon based on the condition. However, I am having trouble giving them different colors. The following is what I have in my view.

<ObjectListItem id="yo" type="Active" icon="{path: '1',formatter: '.formatter.icond'}">
</ObjectListItem>

And this is the formatter.js:

sap.ui.define([], function () {
    "use strict";
    return {
        icond: function(value) {
            if(value === "1")
            {
            return "sap-icon://sys-enter-2";
            }
            else
            {
            return "sap-icon://sys-cancel-2";
            }
        }
    };
});

If value is 1, I want the color to be green, else red. How do I do it? I'm aware of .addClass(), but unable to use it here. Any help would be appreciated.

0

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";
            }
0
Akhilesh Upadhyay Sep 10, 2017 at 09:34 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded