SAPUI5 Models Demystified – Part 1

Home » SAPUI5 » SAPUI5 Models Demystified – Part 1
April 4, 2018 SAPUI5 No Comments

The Model View Controller (MVC) concept is used in SAPUI5 to separate the representation of information from the user interaction. This separation facilitates development and the changing of parts independently.

We will focus specifically on the “M” – The Model manages the application data.

SAPUI5 supports following model types:

  1. OData model
  2. JSON model
  3. XML model
  4. Resource model

Let’s sneak more into JSON model – JSON model can be used to bind controls to JavaScript object data, which is usually serialized in the JSON format.

Ways of creating a JSON model

  1. Using manifest.json

Models can be instantiated directly using the descriptor file. A model defined in this way can be either a default or named model. Below is how you define a default model in the descriptor file.

Named model goes like this,

  1. JSON models can also be created in the controller by creating instance of sap.ui.model.json.JSONModel class.

Options to manipulate data in JSON model

  1. Using setData()
  2. Using setProperty()

We will demonstrate how these methods work by creating few scenarios where a JSON model is created and loaded with 2 rows. We will now use below json data and visually see the behavior.


Initial JSON model bound to a list

Scenario #1 – data completely replaced

Scenario #2 – data partially merged

Scenario #3 – data appended

Scenario #4 – data appended via array functions

Scenario #5 – data deleted from model

Scenario #6 – overall demonstration of various possibilities

Our next part will focus on analysis of default and named models and how they are consumed in XML views.