Step 23: Custom Formatters

介绍

If we want to do a more complex logic for formatting properties of our data model, we can also write a custom formatting function. We will now add a localized status with a custom formatter, because the status in our data model is in a rather technical format.

1.练习效果

2.源码

You can view and download all files at Walkthrough – Step 23.

We create a new folder model in our app project. The new formatter file is placed in the model folder of the
app, because formatters are working on data properties and format them for display on the UI. So far we did not have any model-related
artifacts, except for the Invoices.json file, we will now add the folder webapp/model to our
app. This time we do not extend from any base object but just return a JavaScript object with our formatter functions
inside the sap.ui.define call.

Function statusText gets the technical status from the data model as input parameter and returns a human-readable text that is read from
the resourceBundle file.

To load our formatter functions, we have to add it to the
InvoiceList.controller.js. In this controller, we first add a
dependency to our custom formatter module. The controller simply
stores the loaded formatter functions in the local property
formatter to be able to access them in the view.

We add a status using the firstStatus aggregation to our
ObjectListItem that will display the status of our invoice. The
custom formatter function is specified with the reserved property
formatter of the binding syntax. A “.” in
front of the formatter name means that the function is looked up in the controller
of the current view. There we defined a property formatter that
holds our formatter functions, so we can access it by
.formatter.statusText.

We add three new entries to the resource bundle that reflect our translated status texts.
These texts are now displayed below the number attribute of the
ObjectListItem dependent on the status of the invoice.