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

In the previous post, we’ve set up our completed the MVC pattern. In this post, we will focus on utilizing Formatters to customize data display and tackle events to change the behavior of our application.

This is Part 3 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)

Internationalization (i18n)

Our next goal is to make our application more flexible in terms of data display. To achieve this SAPUI5 supports translation files or resources thru internationalization(i18n).

We need to create new entries of translation in our i18n file. You can manually maintain this file or use SAP Web IDE to generate the properties. First of all, let’s update our model and include a description.

To-do Model
To-do Model

Then bind this description to your  Home.view.xml.

Home View
Home View

And run the application:

First Run
First Run

What if we want to create a new way to display the description?

Maybe, we can add a label to the text description just to clearly separate the title. Let’s create our i18n entry:

i18n Property
i18n Property

Next is to update the view to use this i18n entry. Since i18n is also a globally available model, this gives us the capability to use it for binding:

i18n Binding
i18n Binding

What did we do here?

The parts parameter tells the control what are the things we want to parse for display, in this case, its the i18n property (Details: ) and to-do description from our JSON Model.

The formatter parameter tells how to display the data passed on to the control. So the description field will be passed to “Details: {0}”, and then {0} will be replaced by the “todo>description” binding.

Next is to re-run the application to come up with this result:

Updated Description
Updated Description

Formatters

So far the text display formatting is straightforward, but what if we want more complex logic before display? Formatters can also use external modules or function.

Let’s update our model with new data, add a status property:

Status
Status

Depending on a status, let’s create a new label with the following rules:

  • 1 – Pending
  • 2 – Done
  • 3 – On-going

Creating Event Handlers

In addition to formatting our display, our next step is to add behavior to our application. So to add an event, we will simply implement a function that will be trigger upon clicking a todo item.

Next, open the Home.controller.js and add the following event:

"<yoastmark

As a result, we have modified the line item to catch events for Navigation and assigned our event handler onPressItem to trigger the alert.

The application should prompt you an alert:

Click Event
Click Event

Conclusion

Now we know how to customize our application’s display and attach events for behaviors. In the next few chapters, we will focus on handling navigation and reusable content.

Please leave a comment if you have questions and don’t forget to subscribe. See you in the next tutorial! 🙂


Leave a Reply