In SAPUI5, models are the cornerstone for managing application data and enabling dynamic user interfaces. Among the various model types SAPUI5 supports, the JSON Model is one of the most frequently used due to its simplicity and flexibility. It allows developers to work with data in JSON format—ideal for client-side scenarios such as mock data or lightweight apps.
This article delves into the core concepts of working with JSON models in SAPUI5, focusing on how to manipulate data effectively to create dynamic and responsive UI applications.
A JSON Model in SAPUI5 encapsulates data structured as JSON objects and arrays. It resides primarily on the client side and is ideal for scenarios where data can be managed locally without constant backend calls.
The JSON Model supports two-way data binding, meaning changes in the model automatically update the UI, and user interactions can update the model’s data.
Creating a JSON model is straightforward:
var oModel = new sap.ui.model.json.JSONModel();
You can initialize it with data directly:
var data = {
employees: [
{ name: "John", age: 30, department: "Sales" },
{ name: "Anna", age: 25, department: "Marketing" }
]
};
oModel.setData(data);
Finally, set the model to the view or core:
this.getView().setModel(oModel);
// or globally
sap.ui.getCore().setModel(oModel);
Data within the JSON model can be accessed or read using the getProperty method by specifying the binding path:
var employeeName = oModel.getProperty("/employees/0/name"); // "John"
You can update properties using setProperty:
oModel.setProperty("/employees/1/department", "Finance");
This change will automatically reflect in any UI controls bound to this path.
To add a new item to an array:
var employees = oModel.getProperty("/employees");
employees.push({ name: "Mark", age: 28, department: "HR" });
oModel.setProperty("/employees", employees);
Alternatively, you can use setProperty with the new array to update the model.
To remove an item, modify the array and update the model:
var employees = oModel.getProperty("/employees");
employees.splice(1, 1); // Remove second employee (Anna)
oModel.setProperty("/employees", employees);
While setProperty automatically triggers UI updates, if you manipulate the data object directly, you may need to refresh the model:
oModel.refresh();
With two-way data binding enabled, UI input controls like Input, Select, or CheckBox automatically update the JSON model upon user interaction.
Example:
<Input value="{/employees/0/name}" />
When the user edits the input, the model updates without additional code.
getProperty, setProperty) to ensure data binding updates correctly.The JSON Model is an essential SAPUI5 component for managing client-side data efficiently. Understanding how to manipulate JSON model data—adding, updating, and removing entries—empowers developers to build highly interactive and responsive UI5 applications. Coupled with two-way data binding, JSON models reduce the complexity of synchronizing UI and data, speeding up development and enhancing user experience.