Welcome to the ultimate SAP UI5, BTP, Fiori, CAPM, RAP, ABAP blog! Explore comprehensive tutorials, interview questions, and real-world examples to master SAP development. Elevate your skills in creating stunning UI5 apps, harnessing the power of BTP, and building Fiori applications. Unlock the potential of CAPM, RAP, and ABAP, and learn to integrate seamlessly with the enterprise portal. Whether you're a beginner or an experienced developer, this blog is your go-to resource for SAP expertise!
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 itin the controller. Mention
the formatter in the module and add the parameter in the controller. Just
follow the code here:
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 theSAPUI5binding
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 ofSAPUI5XML templating where XML views with
templating are preprocessed so that theSAPUI5controller
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.
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
@
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
We need your help to support www.sapui5tutors.com. Please consider disabling your ad blocker while visiting this website so that we can continue to provide this content to you free of charge.
For details on turning off your ad blocker, or to add www.sapui5tutors.com to your whitelist, please read these
instructions
3 comments
Click here for commentsExcellent tutorials!
ReplyVery Helpful! Thanks!
Replyformatter function .formatter.userNameFormatter not found!
ReplyConversionConversion EmoticonEmoticon