Scribd
Upload
7 views9 pages

Models UI5 1733751798

The document outlines the various types of models in SAP UI5, including JSON, XML, Resource, and OData models, each serving different data management needs. It provides a step-by-step guide for creating and binding these models to UI elements. The summary emphasizes the importance of these models in separating UI from business logic and facilitating data handling in applications.

Uploaded by

Lucy Kumari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views9 pages

Models UI5 1733751798

The document outlines the various types of models in SAP UI5, including JSON, XML, Resource, and OData models, each serving different data management needs. It provides a step-by-step guide for creating and binding these models to UI elements. The summary emphasizes the importance of these models in separating UI from business logic and facilitating data handling in applications.

Uploaded by

Lucy Kumari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Models in SAP UI5

Client Side Model Server Side Model

JSON Model oData Model

Resource Model

XML Model

In SAP UI5, models are used to bind data to UI elements, enabling a clear
separation of concerns between the UI and the business logic.
Types of Models in SAP UI5
1. JSON Model
• A client-side model used to manage data in JSON format.
• Ideal for small, static, or dynamic data.
• Lightweight and easy to use.
Example Data:
json

{ "data": { "name": "John Doe", "age": 30 } }


Usage:
• For applications requiring temporary storage.
• For small datasets fetched from REST APIs or other sources.

2. XML Model
• A client-side model that manages data in XML format.
• Best for scenarios where data is already available in XML format.
Example Data:
xml

<root> <data> <name>John Doe</name> <age>30</age> </data> </root>


Usage:
• When working with services that provide XML responses.
• In applications with XML-based data structures.

3. Resource Model
• Used for managing translatable texts in applications.
• Enables localization by binding UI elements to language-specific texts.
Usage:
• Applications requiring multi-language support.

4. OData Model
• The most commonly used model in SAP UI5 for handling data.
• Allows binding to OData services (Open Data Protocol).
• Supports client-server communication for CRUD operations.
Subtypes:
• OData V2 Model: Works with OData V2 services.
• OData V4 Model: Works with OData V4 services and provides better
performance.
Creating Models: Step-by-Step Guide
Step 1: JSON Model
1. Create the JSON file (data.json):
{

"employees": [

{"name": "Alice", "age": 25},

{"name": "Bob", "age": 30}

2. Load the JSON Model in the Controller:

sap.ui.define([

"sap/ui/core/mvc/Controller",

"sap/ui/model/json/JSONModel"

], function(Controller, JSONModel) {

"use strict";

return Controller.extend("example.controller.Main", {

onInit: function() {

var oModel = new JSONModel("model/data.json");

this.getView().setModel(oModel);

});

});

3. Bind Data in the View:


<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">

<List items="{/employees}">

<StandardListItem title="{name}" description="{age}" />

</List>

</mvc:View>
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <List items="{/employees}">
<StandardListItem title="{name}" description="{age}" /> </List> </mvc:View>

Step 2: XML Model


1. Create the XML file (data.xml):
<root>
<employees>
<employee>
<name>Alice</name>
<age>25</age>
</employee>
<employee>
<name>Bob</name>
<age>30</age>
</employee>
</employees>
</root>
2. Load the XML Model in the Controller:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/xml/XMLModel"
], function(Controller, XMLModel) {
"use strict";
return Controller.extend("example.controller.Main", {
onInit: function() {
var oModel = new XMLModel("model/data.xml");
this.getView().setModel(oModel);
}
});
});
3. Bind Data in the View:
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<List items="{/root/employees/employee}">
<StandardListItem title="{name}" description="{age}" />
</List>
</mvc:View>
Step 3: Resource Model
1. Create the Resource Bundle (i18n.properties):
makefile
greeting=Hello
name=John
2. Load the Resource Model in the Controller:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/resource/ResourceModel"
], function(Controller, ResourceModel) {
"use strict";
return Controller.extend("example.controller.Main", {
onInit: function() {
var oResourceModel = new ResourceModel({
bundleName: "i18n.i18n"
});
this.getView().setModel(oResourceModel, "i18n");
}
});
});
3. Bind Data in the View:
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Text text="{i18n>greeting} {i18n>name}" />
</mvc:View>
Step 4: OData Model
1. Define the OData Service URL:
var sServiceUrl = "/sap/opu/odata/sap/ZEMPLOYEE_SRV/";
2. Load the OData Model in the Controller:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/odata/v2/ODataModel"
], function(Controller, ODataModel) {
"use strict";
return Controller.extend("example.controller.Main", {
onInit: function() {
var oModel = new ODataModel(sServiceUrl);
this.getView().setModel(oModel);
}
});
});
3. Bind Data in the View:
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<List items="{/Employees}">
<StandardListItem title="{FirstName}" description="{LastName}" />
</List>
</mvc:View>
Summary
• JSON Model: Best for lightweight, client-side data management.
• XML Model: Useful for XML-based datasets.
• Resource Model: Essential for application internationalization.
• OData Model: Powerful for integrating backend OData services

Follow

You might also like