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

In the previous post, we learned how to reusable UI controls. In this post, we will focus on navigating from one view to another.

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

Routing

To start setting up the router and navigation feature, we must implement a central entry point for our application. We will add two new files namely App.view.xml and App.controller.js.

In the App.controller.js, add the following source code, which is the bare minimum content of a controller:


Then, we update the manifest.json with enough information to make the router run:

rootView will define the entry point of our application when the launchpad loads the application in Fiori or accessed in the URL.

config pertains to the routing class that our application will use, for starters we will use the default routing class. But for more complex application developers can easily implement their own routing class.

routes are like pages in our application, these are the different entry point our application can be visited from.

targets are the parts of the page we want to include in each entry point (routes).

We will also modify the Component.js, so that our routing configuration on the manifest is applied by the application.

The router will now be initialized upon component instantiation and loading.
We will also move the App control to the App.view.xml since we want the pages to be reusable by itself.

Once done, we can check the network, you will see that the application loads the Home.view.xml and App.view.xml separately.

The router also knows which page to load due to that routes we have created in the manifest.json.
The router will match the browser URL string to the route patterns we have.

URL: /

The current route is pointed to the root pattern, empty parameters, which will point to the Home route:

Identifying Tasks

Before navigating we should identify our task uniquely, so we’ll modify the tasks list and provide an id.

Passing Arguments

Let’s revisit our home view, and take note of the details of the current task. We will used the defined ids in the model as unique identifier for the next screen.

Previously, we open a dialog when the used clicks an item. Instead, we will now navigate the user to a detail page and pass the id to that page.
Let’s add an event to the Home.view.xml:

Now, let’s implement the onPressListItem, in this function we get the currently selected item and get the id value from that task.

We will use this information as parameters and pass it to the next page. Afterward, add the detail view to our application.

We can pass these parameters and catch them on the succeeding page via the event of route matched, specifically, attachMatched.

In the example above, we passed the todoId as a parameter, so that we can reference the correct item from the task list.

Now, let’s bound the view to the currently selected task, via the bindElement function. By having a bound view, all related data reference will now point to the current task automatically. SAPUI5 do the referencing via the model automatically.

You can refer to model references via this link.

Since we bound the view, the display on the next page will now be the currently selected task.

The router will check the URL and load the detail view accordingly:

URL: /detail/1

The first detail will be loaded since we passed the id upon pressing the item. You can revisit the manifest for the details of the route:

Conclusion

It’s important to know the pattern of each route and which values are needed for each pattern. We also need to take note on how to catch the pattern and match it to the correct route.

It is also recommended to bind views and control relative to the current information, which is also known as a context. In this way, the view is modularized and organized by the set of related information.

Feel free to explore more on passing data from view to another and don’t forget to comment below. 🙂


Leave a Reply