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!
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 from 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.
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 commentscould you please let me know how can I export table data into excel formate
ReplyGood , its very helpfull
ReplyCan you example for XML Model ?
ReplyConversionConversion EmoticonEmoticon