Using Parts in formatters to pass multiple fields

When working with SAPUI5, it's common to use formatters to manipulate data before it's displayed on a view. One challenge that developers often face is passing multiple fields to a formatter function. Fortunately, this can be easily achieved by using parts.

Parts are essentially placeholders that can be used to represent different binding paths in a formatter function. By using parts, you can pass any number of fields to a formatter function, making it much more flexible and powerful.

To use parts in a formatter function, you need to define them in the XML view where the formatter is being used. Here's an example:


<Text text="{parts: [{path: 'firstName'}, {path: 'lastName'}], formatter: '.fullNameFormatter'}" />


In this example, we're using a Text control and binding its text property to the result of a formatter function called `fullNameFormatter`. We're also defining two parts using the `parts` property. The first part refers to the `firstName` field, and the second part refers to the `lastName` field.

To access these parts in the formatter function, you can use the `parts` parameter. This parameter is an array that contains all the parts defined in the view, in the order they were defined. Here's an example of a formatter function that uses parts to concatenate the first and last names:


fullNameFormatter: function(firstName, lastName) {

  var firstName = firstName;

  var lastName = lastName;

  return firstName + ' ' + lastName;



In this function, we're using the both parameter values to retrieve the values of the first and last name parts, and then concatenating them with a space in between.

Using parts in SAPUI5 formatters is a powerful technique that can greatly enhance the flexibility and functionality of your applications. By defining parts in your views and accessing them in your formatter functions, you can pass any number of fields to your formatter and manipulate them in a variety of ways.

Next Post »