/scripts/ahub.form.attachments.js
0

Change table cell color in according to json value

Mar 15, 2017 at 02:35 PM

73

avatar image

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!

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

2 Answers

Best Answer
Jun Wu Mar 15, 2017 at 02:52 PM
0

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

do some google

Share
10 |10000 characters needed characters left characters exceeded
Srikanth KV Mar 15, 2017 at 04:06 PM
0

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'}"/>
Share
10 |10000 characters needed characters left characters exceeded
Skip to Content