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!
SAPUI5 is a widely used framework for building web applications. One of the key features of SAPUI5 is the ability to pass parameters to functions from XML views. This allows for greater flexibility and customization in your applications.
To pass parameters to a function from an XML view in SAPUI5, follow these steps:
1. Define your function in your controller. For example, let's say you want to create a function that takes in two parameters, "name" and "age":
```
function myFunction(name, age) {
// do something with name and age
}
```
2. In your XML view, add a control that will trigger the function. For example, let's say you want to trigger the function when the user clicks a button:
```
<Button text="Click me" press="myFunction"/>
```
3. To pass parameters to the function, use the "data" attribute of the control. For example, let's say you want to pass in the parameters "John" and "30":
```
<Button text="Click me" press="myFunction" data="{name: 'John', age: 30}"/>
```
4. In your controller, use the "getSource" method to get the control that triggered the function. Then use the "data" attribute to get the parameters:
```
function myFunction(event) {
var button = event.getSource();
var name = button.data("name");
var age = button.data("age");
// do something with name and age
}
```
And that's it! You can now pass parameters to your functions from XML views in SAPUI5. This allows for greater flexibility and customization in your applications, and makes it easier to build complex functionality.
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.