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.

Demystifying SAPUI5 Models - Part 1: JSON Models- The flow of Model View Controller

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:

  1. OData model
  2. JSON model
  3. XML model
  4. 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.

These datasets are present only on that particular client and are available in JSON format (JavaScript object data). So, this model enables us to bind controls to datasets which connect the above criteria.
 

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:

Demystifying SAPUI5 Models - Part 1: JSON Models
 

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.

Demystifying SAPUI5 Models - Part 1: JSON Models
 

3. Manipulation of data

This model also provides multiple options for manipulation of data. It can be done in two ways and they are:

  1. Using setData() API
  2. 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”,

            email: “test@xyz.com”

}

 

Initial JSON model that is bound to a list

Demystifying SAPUI5 Models - Part 1: JSON Models
 

Scenario #1 – Data being replaced completely

Completely replacing the existing records of the model using the setData() API

Demystifying SAPUI5 Models - Part 1: JSON Models
 

Scenario #2 – Data being partially merged

When you need to use the setData() API to merge data to previously existing records

Demystifying SAPUI5 Models - Part 1: JSON Models
 

Scenario #3 Data being appended

Appending a record to the end of the model

Demystifying SAPUI5 Models - Part 1: JSON Models
 

Scenario #4Data 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.

Demystifying SAPUI5 Models - Part 1: JSON Models
 

Scenario #5 – Deletion of data from the model

When there are a few records on the data model that need to be deleted

Demystifying SAPUI5 Models - Part 1: JSON Models
 

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

Demystifying SAPUI5 Models - Part 1: JSON Models

 

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.

Subscribe to our Newsletter

5600 Tennyson Pkwy
Suite 120
Plano TX 75024.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com