Context
I'm creating a little demo page that displays some straight forward functionality of UI5. This page consists of two main pages:
- On the first page, there's a list of carriers which can be created, deleted, and updated. These carriers have an ID (
Carrid). - If one clicks a carrier, they get routed to the second page on which all the flights of the selected carrier are shown in a table (with some information about the flights).
The table looks like this:
<Table id="detailTable" inset="false" class="sapUiResponsiveMargin">
<columns>
<Column>
<Text text="ID" />
</Column>
<Column>
<Text text="Flightnumber" />
</Column>
<Column>
<Text text="Starts in" />
</Column>
<Column>
<Text text="Departs at" />
</Column>
<Column>
<Text text="Lands in" />
</Column>
<Column>
<Text text="Lands at" />
</Column>
</columns>
</Table>
The data is bound to the columns with this code:
// Get routing data and show only entrys with the matched primary key (Carrid)
_onRouteMatched: function(oEvent) {
// ...
var oArgs = oEvent.getParameter("arguments");
var oFlightTable = oView.byId("detailTable");
oFlightTable.bindAggregation("items", {
path: "/CarrierSet(" + "'" + oArgs.flightPath + "'" + ")/FlightSet",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: "{Carrid}"
}),
new sap.m.Text({
text: "{Connid}"
}),
new sap.m.Text({
text: "{Cityfrom}"
}),
new sap.m.Text({
text: "{Deptime}"
}),
new sap.m.Text({
text: "{Cityto}"
}),
new sap.m.Text({
text: "{Arrtime}"
})
]
})
});
}
Problem
The code works fine if the data can be shown without manipulating it first. But the fields {Deptime} and {Arrtime} have the type Edm.Time which I need to convert first in order to display it in a human readable form.
I was able to achieve this with this bit of code (I know, not the most efficient way, but im still learning. So if you have any improvements, feel free to post them):
pageTable.addEventDelegate({
onAfterRendering: function() {
var mTable = this.getView("FilterBarSimple").byId("detailTable");
var mModel = mTable.getModel();
var aItems = mTable.getItems();
// ----- TIME CONVERSION ----
var arrayTime = [];
for (var iTime = 0; iTime < aItems.length; iTime++) {
var iAdded = mModel.getProperty("Deptime", aItems[iTime].getBindingContext());
arrayTime.push(iAdded);
}
var timeFormat = sap.ui.core.format.DateFormat.getTimeInstance({
pattern: "kk:mm:ss"
});
var tz = new Date(0).getTimezoneOffset() * 60 * 1000;
var arrayTimeClean = [];
$.each(arrayTime, function(ii, ee) {
var timeStr = timeFormat.format(new Date(ee.ms + tz));
arrayTimeClean.push(timeStr);
});
}
});
This generates this output which is correct:
But I'm not able to correctly bind this manipulated data into the table again. I've tried it with the OData.read() function and some other rather hacky approaches but I was never successful and I'm stuck with this problem for quite some time now.
If anyone has an idea or a suggestion, I'd be more than thankful if you let me know.
