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

In the previous post, we learned how to format our display and apply events to UI. In this post, we will focus on creating content via dialogs, fragments.

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

Fragments

Our next goal enriches our display with reusable content and dialogs that can improve the user experience.
So far we’ve created all our user interface directly in the *.view.xml. This approach is ok if we’re only dealing with unique layouts on our screen.

But what happens if we want to have the same layout and same data on a different screen?

The answer is a fragment.

What is a fragment?

Fragments are light-weight UI parts (UI subtrees) which can be reused but do not have any controller.

Fragments are highly useful for repeating layouts and dialogs since these elements can be used throughout the whole application.

Let’s go back to our application:

Updated Application
Updated Application

Let’s create a fragment directory in our project an inside that directory create a TaskDialog.fragment.xml:

Create Fragment
Create Fragment

So we’ve created a fragment, simple as that, the next thing is to define, what will be the contents of this fragment. We will utilize a dialog as our reusable content.

Dialogs

The Dialog control is used to interrupt the current processing of an application to prompt the user for information or a response.

Dialogs are an informational display that helps the user understand the current data. In our project, we’ve created a fragment without any content. Let’s continue and fill up the fragment with the following lines of code:

Afterward, run the application, and check the output after clicking a task item.

What is the output? What is missing?

As you might have observed, the output is the same. This is because even though we’ve created the fragment, we haven’t used it or notify the UI that we will be using it for display. So what is missing?

Next is to use the fragment after a task is clicked, let’s modify the onPressItem on Home.controller.js:

Run the application and you should come up with the following results:

Dialog Fragment
Dialog Fragment

Let’s now include some data to this dialog by settings its model to the currently selected tasks:

Place this code before oDialog.open().
Also, modify the TaskDialog.fragment.xml so that the text binding display the current description:

The application should now display the current description of the selected task.

Dialog Fragment Binding
Dialog Fragment Binding

The statement oDialog.bindElement() sets the model, so that every binding will be a reference to the current context. The current context points to the parameter sPath. So for example, we selected the first task, the sPath will be set to /0.

Exercise

Feel free to do the following exercises to improve your skills:

  1. Change the dialog title and set its current binding to the task name.
  2. Create a close dialog event, so that when you press ok, the dialog closes.

The output should be similar to the one below:

Dialog Fragment Exercise
Dialog Fragment Exercise

Conclusion

Now we know how to reuse elements. In the next few chapters, we will focus on handling navigation.

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


Leave a Reply