Formatters and Inline Expressions

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

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

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.

Related Post