formatter not found when using ItemTemplate ?

[former_member563121]

Hey All,

I've read everything I can find on this and I seem to be missing something. When starting my app at the Master.view I dynamically build the screen with an itemTemplate. This all works fine but when I try to use a formatter in it, it says it can't find it. The same formatter.js with another function works fine for a standard xml view. Here are some details.

Here is the formatter.js. Ignore the simplicity, I've stripped out the logic so it always returns a Value.State.Error. If it works, everything will be red.

sap.ui.define(["sap/ui/core/ValueState"], function(ValueState) {
	"use strict";
	return {
		dueDateColor: function(sWord) {
				return ValueState.Error;
		}
	};
});

Here is the header of my Master.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
	"sap/m/MessageToast", 
	"MyActivities/model/formatter"
], function(Controller, Filter, FilterOperator, MessageToast, formatter) {
	"use strict";
	return Controller.extend("MyActivities.controller.Master", {
		formatter: formatter,

Here is my ItemTemplate.

var itemTemplate = new sap.m.ObjectListItem({
	title: "{Description}",
	type: "Active",
	press: [this.GoToDetail, this],
	attributes: [new sap.m.ObjectAttribute({
		text: "{AccountTxt}"
	}), new sap.m.ObjectAttribute({
	text: "Due: { path: 'ToDate', type: 'sap.ui.model.type.Date', 
			  formatOptions: {style: 'long', UTC: true}, 
			  formatter: '.formatter.dueDateColor'}"
	})]
});

Someone on Stack had this problem and solved it by adding the 'complex' binding parameter to the bootstrap in the index.html. Not sure why, but I tried it nonetheless. No dice.

<script id="sap-ui-bootstrap"
	src="../../resources/sap-ui-core.js"
	data-sap-ui-libs="sap.m"
	data-sap-ui-theme="sap_bluecrystal"
	data-sap-ui-xx-bindingSyntax="complex"
	data-sap-ui-compatVersion="edge"
	data-sap-ui-resourceroots='{"MyActivities": ""}'>
</script>

The formatter.js is found for a different function without a problem on my Detail.view.xml, but that is simply... it is not build with ItemTemplate.

<DisplayListItem label="Emp. Resp." value="{parts: [{path: 'ResponsibleTxt'}], formatter:'.formatter.employeeResponsibleNameOnly'}"/>

I appreciate any help, perhaps just another set of eyes to see something obvious I've been staring at for a couple hours now. My only thought is that this has something to do with ItemTemplate or ObjectListItem.

Thanks,
Greg

[former_member340030 · Accepted solution]

Hi Greg,

Actually your detail view is an xml view whereas it looks like you are writing template item in master in javascript , so to access formatter access like this .. instead of passing formatter as a string you need to pass the functiion in the formatter attribute .. (self points to this)

var self = this;

var itemTemplate =newsap.m.ObjectListItem({title:"{Description}",type:"Active",

	press:[this.GoToDetail, this],attributes:[newsap.m.ObjectAttribute({text:"{AccountTxt}"}),newsap.m.ObjectAttribute({text:"Due: { path: 'ToDate', type: 'sap.ui.model.type.Date', 
			  formatOptions:{style:'long', UTC: true}, 
			  formatter:self.formatter.dueDateColor}"})]});

[former_member563121 · Accepted solution]

Thanks Viplove. However, I should have noted that I tried that. Per your suggestion I tried again, but I get a syntax error.

{name: "SyntaxError", message: "Unexpected 's'", at: 110, text: "Due: { path: 'ToDate', type: 'sap.ui.model.type.Da…C: true}, formatter: self.formatter.dueDateColor}"}

[former_member340030 · Accepted solution]

Why the formatter is there in the double quotes .. removes quotes and try .. let me know if this doesnt work ..

press:[this.GoToDetail, this],attributes:[newsap.m.ObjectAttribute({text:"{AccountTxt}"}),newsap.m.ObjectAttribute({text:{ path: 'ToDate', type: 'sap.ui.model.type.Date', 
			  formatOptions:{style:'long', UTC: true}, 
			  formatter:self.formatter.dueDateColor}})]});

[former_member499177 · Accepted solution]

Greg speaking but another Greg, tip of removing quotes worked just fine for me, thanks 😉

[former_member563121 · Accepted solution]

Removing the quotes worked for me as well. Thanks Viplove!