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 add a localized status
with a custom formatter, because the status in our data model is in a rather
technical format.
Watch my video on Custom formatter and Inline Expressions
So, in this use case what here I am trying to do is to use a
custom formatter for weigh measure and weight unit. So Here I am displaying a
list of products with their particulars in the list item. The data is coming from ES4 odata service and
in that particular service, we are using the product set entityset.
The list item contains the title, intro, number, number
unit, first status, second status. So in the first status we are displaying the
weight unit and the measure of the particular weight, suppose 0.30 kg. So, I will
display a message in the second status based on the values that we are getting
from weight measure and unit. For that I will use a custom formatter, let’s say
if the unit of the weight is in grams, then it is to be converted into KG and
then I will compare it with a particular set
quantity and then display the message that the particular weight is greater or
less than a particular set quantity.
For example the weight that is coming from the service is
1000grams, then the formatter would first convert it into KG, i.e. 1kG and then
it will compare it with another set quantity, let’s say 5KG and then it would
display a message that, it is less than 5KG.
So in our use case the particular set quantities are .5kg and 5kg
Basically, there are
three steps to follow to make use of custom formatter.
1) Make a folder
named as model in the project directory, and then make a file named
formatter.js inside it.
2) Next is to
mention the formatter in the controller
3) Lastly, use
the formatter in the view, which we have used in the second status.
So, just follow the first step and to load our formatter functions, we have to add it in the controller. Mention
the formatter in the module and add the parameter in the controller. Just
follow the code here:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator",
"sap/myApp/model/formatter"
],
function(Controller,Filter,FilterOperator,formatter) {
"use strict";
return
Controller.extend("sap.myApp.controller.View1", {
formatter:formatter,
. . . . . . . .
. . . . . . . .
Let me just share the portion of code for better
understanding. Here is the code for list:
<List id="productsList"
items="{
path :
'Model>/ProductSet',
sorter : {
path :
'Category',
group: true
}
}">
<headerToolbar>
<Toolbar>
<Title text="Product
List" />
<ToolbarSpacer />
<SearchField width="50%"
search="onFilterProducts" />
</Toolbar>
</headerToolbar>
<items>
<ObjectListItem title="{Model>Name}"
number="{Model>Price}"
numberUnit="{Model>CurrencyCode}" intro="{Model>ProductID}">
<firstStatus>
<ObjectStatus text="{Model>WeightMeasure}{Model >WeightUnit}"></ObjectStatus>
</firstStatus>
</ObjectListItem>
</items>
</List>
Current Output
So here, the fields marked yellow are the first status. As
you can see the first value is 0.030KG which is less than .5KG, hence after
formatting, the message would appear in second status that the weight is less than
0.5kg. And similarly for others.
Now the third step,we will add the code for second status:
<secondStatus>
<ObjectStatus
text="{
parts: [
{path:
'Model>WeightUnit'},
{path:
'Model>WeightMeasure'} ],
formatter :
'.formatter.delivery'
}">
</ObjectStatus>
</secondStatus>
Note that, we are using the same fields that we have used in
the first status, i.e WeightUnit and WeightMeasure. And Model is the id of the
oData model that we have used. Since we have used two fields, we are mentioning
the path in the parts. Also we have mentioned the formatter here, and delivery
is the name of the formatter that we have used in the formatter.js.
Now add the code for formatter.js:
sap.ui.define([], function() {
"use strict";
return {
delivery: function(sMeasure,
iWeight) {
var sResult = "";
if(sMeasure === "G") {
iWeight = iWeight / 1000;
}
if (iWeight < 0.5)
{
sResult = "weight less than
.5 KG";
}
else if (iWeight < 5)
{
sResult = "weight less than
5 KG";
}
else
{
sResult = "weight more than
5 KG";
}
return sResult;
}
};
});
Here
the value of sResult is returned to the second status, hence the desired result
is achieved through custom formatter.
Desired output
Inline Expressions
Now
let’s just talk about inline expressions in sap ui5.
Expression binding is an enhancement of the SAPUI5 binding
syntax, which allows for providing expressions instead of custom formatter
functions.
This saves the overhead of defining a function and is
recommended in cases where the formatter function has a trivial implementation
like comparison of values. Expression binding is especially useful in the
context of SAPUI5XML templating where XML views with
templating are preprocessed so that the SAPUI5 controller
is a natural place to put custom formatter functions that are not available.
There are some predefined status for this, like Success,
Error, Critical. Now for an example, I will make use of it.
So
here, our use case is to display a success state, if the price of the product
is less than 250 else show an error state. So, in our application, we will
display it in the numberstate property of the list.
numberState="{= ${Model>Price}
> 250 ? 'Error' : 'Success'}"
So,
this is a ternary expression here that we have used, if the price is greater
than 250 then error else success.
I
hope you understood the concept of the formatters and Inline Expressions. For
any queries, mail me at sapui5tutors@gmail.com.
If you loved my tutorials, comment down below your views. It always inspires me
for making better blogs and stay tuned for more tutorials!!
Also please follow my sapui5 video tutorials in youtube
@
https://www.youtube.com/channel/UC7bVTUqIAMKyQcYJ2c3XMhQ
Comments (3)