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!
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:
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:
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.
The business data within a model can
be defined using various formats:
JavaScript Object Notation (JSON)
Extensible Markup Language (XML)
OData
Your own custom format
The process for using data binding
for SAPUI5 controls in a simple application comprises five steps: Deciding on
the model, creating a model and a control instance, binding the properties or
lists to the model and, if required, unbinding the properties again.
JSON
Model
The JSON model supports two-way data
binding by default, which means that the model will automatically reflect
changes to the view and vice versa.
For JSON Model binding, take a look at my video in youtube:
Defining the Data
To define the data, proceed as
follows:
Create the data that you want to bind to a control
property. Here we are using JSON Model
Place the code into your sample page:
Create Data Binding Model Instance
onInit: function() { var model1 = new sap.ui.model.json.JSONModel();//
create JSON model instance model1.loadData("model/detail.json");//
set the data for the model
sap.ui.getCore().setModel(model1);// set the model to the core
},
Create Controls and Property Binding
Now, here I am using a list to show
the data, in a list format.
var list = new sap.m.List({
items:{
path:"/Product", // this path is the
key value which is defined in the json
template: new
sap.m.ObjectListItem({
title:"{Product Name}",
number:"{Price}",
intro:"{Plant}",
icon:"{image}",
type :
"Active", attributes: [
{
text:"{Product ID}"
},
{
text:"{value}"
} ], firstStatus: {
text:"{Status}"
},
}) } });
Here sap.m.ObjectListItem is a
template for the list in which we are binding the data.
We also define the path, which is a
key value defined in the JSON model.
Binding
Modes
Binding mode is usually contains of
2 main categories: Two Way, One Way and One Time modes. Let’s get some explanations
on that:
One Way - means that all data changes will be reflected
on the controls. If you have input field mapped on {name} field in model
all model’s name property value changes will be displayed in that input.
Changing the input will not be reflected on the model.
Two Way - means that all input changes will be
reflected in the model. Unfortunately this will not work for data binding
made with formatter functions.
One Time - means data will be bound from model to view
just once.
By default JSON and XML models have
Two Way bind mode, resource and OData models have One Way mode. Right now OData
and resource models don’t support Two Way mode.
Binding
Types
There are 3 types of data binding:
Bind Aggregation
Property Binding
Bind Element
ODATA
Model
The OData model is a server-side
model: the dataset is only available on the server and the client only knows
the currently visible rows and fields. Sorting and filtering is done on the
server. The client has to send a request to the server to accomplish these
tasks.