Skip to Content
Former Member
Jun 24, 2016 at 12:57 PM

SAPUI5 - Custom formatter w/ relative path ?


Hi everyone,

I'm new to sapui5. I am currently developing a small application which displays a list of flights on a view (my root view) from a local JSONModel (flights), and on a second view displays specific info about a flight when it is clicked.

I managed to bind the data, routing works like a charm, (almost) everything works fine, but I've been having trouble with custom formatting. This is the part of my view that is interesting in this matter : (the namespace "f" stands for sap.ui.layout.form)

       labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4"
       columnsL="1" columnsM="1">
                 <Label text="{i18n>flightsNo}" />
                 <Text text="{flights>AirlineId}" />
                 <Label text="{i18n>flightsDepPlace}" />
                 <Text text="{flights>Departure/City}" />
                 <Label text="{i18n>flightsDepTime}" />
                 <Label text="{i18n>flightsArrPlace}" />
                 <Text text="{flights>Arrival/City}" />
                 <Label text="{i18n>flightsArrTime}" />
                 <Text text="{
path: 'flights>Arrival/Time', formatter:'.formatter.time'
} on {
path: 'flights>FlightDate', formatter:''
}" />
</f:content> </f:SimpleForm>

The part which interests me is in red. Indeed, the other values are binded just fine. In the case of the Text, however, the formatter doesn't seem to work. I've figured it's because the formatter doesn't know how to work with my relative path (as with a hardcoded absolute path it worked fine), which was confirmed by SapUI5 Diagnostics which stated "relative : true" with a path and "absolute path: unresolvable".
To be more specific about my model, it was defined in the manifest.json, so if I understand correctly it is recognized by all views in the project in any context (and works for most items anyway).

Just for info, the code of my simple formatter : (turns 100000 to 10:00 and 19950228 to 1995/02/28)

sap.ui.define([], function () {
       "use strict";
       return {
            time: function(sTime) {
                 return [sTime.slice(0,2),":",sTime.slice(2,4)].join("");
            date: function (sDate) {
                 return [sDate.slice(0,4),"/",sDate.slice(4,6),"/",sDate.slice(6)].join("");

So I figured, from there :

* Either I figure a way to directly pass the value behind my bound data to the formatter (no path).
* Or I find a way to pass the absolute path to my data (without further data passing, otherwise the whole concept of databinding would lose its interest).

Maybe there are other solutions, of course ! Still, I have no idea where to go from there, and I have looked on many many topics in order to find an answer, but my problem remains unsolved.
So : Is there a way to pass data directly to the formatter ? Is there a way to get the absolute path of a bound object directly in the xml ? Are there any other solutions ?

Thanks by advance.