1

I would like to use an icon and change the color depending on the model.

var wirelessHeadItem = new sap.ui.unified.ShellHeadItem({
    icon: "sap-icon://upload-to-cloud"
});

How can I define the color of the icon to something like this:

style: "color:{/oSettingsModel/isOnline}"

That way the icon would change in color, when I change isOnline in the oSettingsModel.

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Dinkheller
  • 4,631
  • 5
  • 39
  • 67

2 Answers2

6

Well, seems that this control does not have either a possibility to specify the color via standard property, therefore you can apply the workaround using custom data attribute and expression binding.

The main point is that you can specify the writeToDom attribute of the custom data item, and in your CSS you can define the style for the needed HTML attribute value: data-color-green or data-color-red.

JS:

var wirelessHeadItem = new sap.ui.unified.ShellHeadItem({
    icon: "sap-icon://upload-to-cloud",
    customData: [
        new sap.ui.core.CustomData({
            key: "color",
            value: "{= ${/oSettingsModel/isOnline} ? 'green' : 'red' }",
            writeToDom: true
        });
    ]
});

CSS might look like this:

div[data-color=green] {
  color: green;
}
div[data-color=red] {
  color: red;
}
Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Andrew Naumovich
  • 1,441
  • 1
  • 12
  • 15
-1

Easier way is put it in a hbox and set the class="colorCode" in the css file, set the class color

tenzin wangmo
  • 1