SAPUI5 offers a wide variety of powerful concepts for development focusing on User Interaction and Experience (UI/UX), Data binding Model View Controller(MVC), full translation support and a lot more. In this blog series, we are going to explore under the MVC vertical of SAPUI5.
Primarily, the concept of Model View Controller is brought into SAPUI5 to make the representation of information disparate with respect to the user interactions of SAPUI5 applications.
This autonomy enables independent development and modification of different parts that are used in the SAPUI5 applications.
The flow of Model View Controller
We will focus specifically on “M” – The Model that manages the application data.
The various model types supported by SAPUI5 are:
- OData model
- JSON model
- XML model
- Resource model
Let’s sneak more into JSON model in this part of the series.
Each model in SAPUI5 is mainly used to bind controls to the data brought in. The JSON model is a client-side model which is recommended for datasets with small amounts of data.
Methods to create JSON models:
As we discussed about where JSON models can be used, let’s hop on to the methods using which we can create JSON models to bind controls to the JS object data.
1. Using manifest.json
Models can be instantiated directly using the descriptor file. A model defined using these methods can be of two types:
- Default model
- Named model.
Take a look at the below images to understand creation of JSON models using this method.
Default models are created this way:
2. Creating in the Controller:
JSON models can also be created within the controller by creating an instance of sap.ui.model.json.JSONModel class.
3. Manipulation of data
This model also provides multiple options for manipulation of data. It can be done in two ways and they are:
- Using setData() API
- Using setProperty() API
We will demonstrate how these methods work by creating a few scenarios where a JSON model is created and loaded with 2 rows. Let’s use the below JSON data and take a look at the behavior visually.
first_name: “test user”,
last_name: “test user”,
Initial JSON model that is bound to a list
Scenario #1 – Data being replaced completely
Completely replacing the existing records of the model using the setData() API
Scenario #2 – Data being partially merged
When you need to use the setData() API to merge data to previously existing records
Scenario #3 – Data being appended
Appending a record to the end of the model
Scenario #4 – Data being appended using array functions
Like the previous scenario, the following GIF displays the process of appending records to the end of the model using array functions.
Scenario #5 – Deletion of data from the model
When there are a few records on the data model that need to be deleted
Scenario #6 – Overall demonstration of the various possibilities
This GIF includes all the scenarios being executed in random order and to display how the manipulation of data works
Summing it up..
Like we discussed earlier, JSON models can be used only when you are consuming small datasets which are already available on the client. For consuming considerably larger datasets, we can choose to work with the other models such as OData V2 or OData V4 model which we will be discussing later in this series.
As a sequel to this blog, we will be focusing on analyzing the default and named models and how they are consumed in XML views.
Got questions? Click here to get in touch.