Change table cell color in according to json value

Hi,

in according to this tutorial ("https://help.sap.com/saphelp_uiaddon20/helpdata/en/0f/8626ed7b7542ffaa44601828db20de/content.htm") I try to set up a formatter. This have to change the color of table cells, for example if the value in the json is "TRUE" the color is green, if "FALSE" the color is red. After some tries I have no idea, what I'm doing wrong and hope someone of you can help me!?

Here the code of...

formatter/formatter.js:

sap.ui.define([], function () {
	"use strict";
	return {
		changeColor: function (val) {
			if (val == "TRUE"){
				this.addStyleClass("correctParamStyle");
			} else {
				this.addStyleClass("falseParamStyle");
			}
		}
	};
});

view/Main.view.xml:

<Table id="paramTable" items="{/callbackData}" width="auto" class="sapUiResponsiveMargin">
  <columns>
    <Column>
      <Label text="Parameter"></Label>
    </Column>
    <Column width="10%">
      <Label text="Ist-Wert"></Label>
    </Column>
    <Column width="10%">
      <Label text="Soll-Wert"></Label>
    </Column>
    <Column width="30%">
      <Label text="Bemerkung"></Label>
    </Column>							
  </columns>
  <items>
    <ColumnListItem>
      <cells>
        <ObjectIdentifier title="{key}"></ObjectIdentifier>
      </cells>
      <Text text="{path:'currentVal', formatter:'formatter.changeColor'}"/>
      <Text text="{operator} {targetVal}"></Text>
    </ColumnListItem>
  </items>
</Table>

view/Main.controller.js:

sap.ui.define([	"sap/ui/core/mvc/Controller",
               	"sap/m/MessageToast",
           	"sap/ui/model/json/JSONModel",
           	"formatter/formatter"

], function(Controller, MessageToast, JSONModel, formatter) {
	"use strict";

	return Controller.extend("view.Main", {
		formatter : formatter,

                /*some other Code*/

	});
});

Thanks in advance!

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Mar 15, 2017 at 02:52 PM

    try using custom data way, easier for u to follow.

    do some google

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 15, 2017 at 04:06 PM

    my guess is your formatter method is not called......there is '.' missing infront of formatter in XML

    your old code below:

    <Text text="{path:'currentVal', formatter:'formatter.changeColor'}"/>

    New code: place '.' before 'formatter.changeColor' so it becomes'.formatter.changeColor' (notice . in the begining)

    <Text text="{path:'currentVal', formatter:'.formatter.changeColor'}"/>
    Add comment
    10|10000 characters needed characters exceeded

Skip to Content