Beginner’s SAPUI5 Tutorial – To-do List App – Part 2

In the previous post, we’ve set up our initial application and created some sample controls for display. In this post, we will focus on utilizing Models for our SAPUI5 application.

This is Part 2 of 5 the SAPUI5 application tutorial. Check the links below for the rest of the tutorials.

Part 1 – Beginner’s SAPUI5 Tutorial – To-do List App
Part 2 – Beginner’s SAPUI5 Tutorial – To-do List App – Part 2 (Data Binding)
Part 3 – Beginner’s SAPUI5 Tutorial – To-do List App – Part 3 (Formatters and Events)
Part 4 – Beginner’s SAPUI5 Tutorial – To-do List App – Part 4 (Dialogs and Fragments)
Part 5 – Beginner’s SAPUI5 Tutorial – To-do List App – Part 5 (Routing)

SAPUI5 Models

So far we have a view and a controller for our application, the only missing part is a model.

SAPUI5 MVC
SAPUI5 MVC

Our Home.view.xml notifies the Home.controller.js for any user interaction. Home.controller.js then sends the appropriate data to the model for the update.

Project Files - MVC
Project Files – MVC

What is a model in SAPUI5?

A model in the Model View Controller concept holds the data and provides methods to retrieve the data from the database and to set and update data. – SAPUI5 SDK

What are the different types of SAPUI5 models?

JSON – serialized JavaScript Object in JSON format.

XML – Intended for small sets of data, due to long XML formatting.

Resource – A wrapper of a resource bundle (e.g. i18n).

OData (V2 or V4) – A server-side only model. Client usually requires on-demand access to data.

SAPUI5 Models
SAPUI5 Models

In this post, we will focus on the JSON Model. We will create a JSON Model for our to-do list so that we can simulate a database. This model can be updated on runtime since JSON Model supports two-way binding.

What One-way, Two-way? No Way!!!

So what is this one-way and two-way binding? why is it important? In SAPUI5 there are 3 modes of data binding:

One-way

We bind the model to the view. So whatever data is in the model the view gets it, but any change from the UI will not be reflected the model.

One Way Data Binding
One Way Data Binding
Two-way

Two-way binding, on the other hand, allows data change from the model to the view and vice versa. So when a user edits the view, the model is automatically updated as well.Two Way Data Binding

Two Way Data Binding

One Time

So there’s a one-way binding already, but what is this? Simply put, the data is set only once, any further changes to the model is not reflected in the view at all. This feature acts similar to a CONSTANT variable.

One Time Data Binding
One Time Data Binding

Do check out SAP Hana Tutorials for a more detailed breakdown of data binding.

Creating To-do List JSON Model

Now that we are familiar with SAPUI5 model and data binding types, we can now proceed to create our JSONModel.

In our model/model.js, we can see that our application created a JSON model for the devices’ type. In a similar passion, we can create a to-do list JSON Model. Add another function that creates the to-do list model. Insert the following lines of code after the createDeviceModel:

Note: Don’t forget to add a comma ( “,” ) after the createDeviceModel function.

So far, we’ve only created the model or our “database” table, but haven’t utilized it at all. so even if you run your application no changes will be reflected.

Next step is to call this function on our Component.js, so that when our application initializes the model is readily available. Add the following code after the createDeviceModel initialization.

Aside from initializing the model, we also supplied an alias to the model, so later we can refer to it during data binding. “todo” is our model alias in this sample.

There you go we have completed the creation of the JSON Model and initialization part for our to-do list. So what’s next? how do we use this model in our view?

Data Binding Types

Now we need to understand, what are the possible ways to get data from a model, and these are the binding types:

SAPUI5 Binding Types
SAPUI5 Binding Types
Property Binding

Used for initialized values on the model. Properties are more for specific fields, which you want to directly access. So in terms of our JSON Model.

Property Binding
Property Binding

We can access the first to-do task with the following path:

/0 since the array starts with index 0, and /task since we want to display the task field.

Context Binding or Element Binding

Element binding allows relative binding reference to the control and child elements. This useful for a group of controls that are non-repeating, sample object header and details.

Element Binding
Element Binding

We can access the first to-do task with the following path:

/0 since the array starts with index 0, from here on all field binding will be relative to the first item. So if we want to bind the task field. we simply access it from the element binding.

List Binding or Aggregation Binding

List binding, on the other hand, is used for repeating elements or elements that can have aggregation as a template. Rather than repeatedly binding the properties or the elements we access the collection and let SAPUI5 automatically resolve the context.

Aggregation Binding
Aggregation Binding

So what do we use?

Running the application

The output should be the same, but rather creating the controls manually, we have used the model to generate the view.

Binding Result
Binding Result

There you go for the basics of data binding. In the next tutorial, we will change how the data is displayed using Formatters.

Find this tutorial helpful? Let me know what you think, leave a comment below or share this with your colleagues and friends! Don’t forget to subscribe.


Leave a Reply