SAP UI5 Routing for Beginners: How to Navigate Between Screens and Pass Data

SAP UI5 Routing for Beginners – navigate between screens and pass data in Fiori apps

When you start learning SAP UI5, one of the first challenges you face is moving from one screen to another. Creating a single view with a table is relatively simple, but things become more interesting when you need to select a record and open another screen showing the details of that specific record.

This is where SAP UI5 navigation and routing become important. Routing provides a structured way to move between views in a Fiori application, while route parameters allow you to carry information from one screen to another.

In this beginner-friendly guide, we'll understand SAP UI5 navigation through a simple sales list-to-detail example. We'll look at routing, views, route parameters, table selection, binding contexts, and models without making the explanation unnecessarily complicated.

If you want to understand the technical implementation in greater depth, you can also read this detailed guide on SAP UI5 parameterized routing and passing data between views.

What Does Navigation Mean in SAP UI5?

In a traditional website, navigation usually means moving from one HTML page to another. SAP UI5 applications work differently because they commonly follow a single-page application architecture.

Instead of loading an entirely new HTML page every time a user moves to another screen, SAP UI5 changes the visible view inside the application. The browser remains on the same application while the framework manages which view should be displayed.

A simple way to understand this is to think of a presentation. The presentation itself remains open, but the slide displayed on the screen changes. In a similar way, an SAP UI5 application can display different views while remaining within the same application.

The component responsible for controlling this movement is called the router.

Why Is Routing Important in SAP UI5?

You could technically build navigation by manually showing and hiding controls, but routing provides a much more organized approach for real-world applications.

Routing can help an application:

  • Navigate between different views in a structured way
  • Maintain browser back and forward navigation
  • Represent application states through URL hashes
  • Support deep linking to specific application states
  • Pass information from one view to another
  • Keep navigation configuration centralized

For beginners, the most important part is understanding how a selected record can be passed from one view to another.

Understanding the Master-Detail Pattern

Imagine that your SAP Fiori application contains a sales order table.

The first screen displays multiple sales orders:

  • Sales Order 500001
  • Sales Order 500002
  • Sales Order 500003
  • Sales Order 500004

Now suppose the user selects Sales Order 500002. The application should open a second screen and display the details of Sales Order 500002.

This is commonly known as the master-detail pattern.

The master screen contains the list of records, while the detail screen displays information about the selected record.

The important question is: How does the second screen know which record the user selected?

This is where parameterized navigation becomes useful.

What Is Parameterized Navigation?

Parameterized navigation means that information is passed along with the navigation request.

Instead of simply saying:

Go to the detail screen

the application can effectively say:

Go to the detail screen and use this value to identify the selected record.

The value could represent a record index, document number, business key, or another identifier used by the application.

In SAP UI5, route parameters are commonly defined inside the routing configuration in manifest.json.

Where Is Routing Configured?

The routing configuration of an SAP UI5 application is generally maintained in manifest.json.

A simplified example can look like this:

"routing": {
  "config": {
    "routerClass": "sap.m.routing.Router",
    "viewType": "XML",
    "async": true
  },
  "routes": [
    {
      "pattern": "",
      "name": "sales",
      "target": "sales"
    },
    {
      "pattern": "salesDetail/{salesPath}",
      "name": "salesDetail",
      "target": "salesDetail"
    }
  ]
}

The important part for beginners is:

salesDetail/{salesPath}

The {salesPath} portion represents a route parameter. When navigation takes place, SAP UI5 can replace this parameter with the value supplied by the controller.

Mandatory and Optional Route Parameters

SAP UI5 routing supports different ways of defining route parameters.

A mandatory parameter can be represented using curly braces:

salesDetail/{salesPath}

This means the parameter is expected when navigating to that route.

An optional parameter can be represented using colon syntax:

salesDetail/:salesPath:

The practical difference is important. If a detail page cannot function without identifying a record, a required parameter can help ensure that navigation does not proceed without the necessary information.

Step-by-Step SAP UI5 Navigation

Step 1: Select a Record

Suppose your SAP UI5 application displays sales records inside a table. The user selects one of the rows.

SAP UI5 provides methods for retrieving selected items.

getSelectedItem()

This method is generally used when the table allows a single selection.

For multiple selection, you can use:

getSelectedItems()

The second method returns the collection of selected items.

Step 2: Read the Binding Context

Once you have the selected item, you need to identify which data record it represents.

Each bound item has a binding context. The binding context connects the UI control with the corresponding data in the model.

You can retrieve the path using:

getBindingContext().getPath()

For example, you may receive a path such as:

/1

This can represent the second item in a JSON model collection because array indexes commonly begin at zero.

Step 3: Pass the Value During Navigation

After obtaining the required value, you can pass it to the router.

this.getOwnerComponent().getRouter().navTo("salesDetail", {
  salesPath: sIndex
});

The router uses the supplied value to resolve the parameter in the route pattern.

Conceptually, the process looks like this:

Select Row
    ↓
Get Binding Context
    ↓
Get Record Path
    ↓
Pass Parameter
    ↓
Navigate to Detail View
    ↓
Display Selected Record

Step 4: Display the Selected Record

The destination view can use the parameter to identify the appropriate record and display its information.

For example, the detail page could display:

  • Sales Order Number
  • Customer Name
  • Order Date
  • Order Amount
  • Status
  • Item Details

This simple flow forms the foundation of many list-to-detail applications.

Why Binding Context Matters

Binding context is one of the concepts beginners should understand early in SAP UI5 development.

When a table is connected to a model, each row represents a particular piece of data. The binding context provides the connection between that row and its corresponding model data.

For example:

/0
/1
/2
/3

These paths can identify different records in a collection.

Understanding binding context also makes it easier to work with SAP UI5 data binding and table controls. If you're learning these concepts as part of a broader UI5 development path, understanding SAPUI5 aggregation binding and data models can provide useful additional context.

The Model Scope Problem Beginners Often Face

Navigation may work correctly while the destination screen still shows empty or undefined data. One common reason is the scope of the model.

Consider these two approaches:

this.getView().setModel(oModel);

and:

this.getOwnerComponent().setModel(oModel);

A model attached to a particular view is scoped to that view. If another view needs access to the same data, it may not be available there.

A component-level model can be accessed by multiple views within the application.

Therefore, when information needs to be shared between screens, understanding model scope is extremely important.

A Simple Example to Remember

Let's put everything together with a simple example.

Imagine an application containing a Sales Orders table.

  1. The user opens the Sales Orders screen.
  2. The application displays the available sales records.
  3. The user selects one sales order.
  4. The controller retrieves the selected item.
  5. The binding context identifies the corresponding record.
  6. The application extracts the required path or identifier.
  7. The router navigates to the detail view.
  8. The route parameter identifies the selected record.
  9. The detail view displays the relevant sales order information.

Once you understand this flow, many other SAP Fiori applications become easier to understand.

Where Is This Pattern Used in Real SAP Fiori Applications?

The list-to-detail navigation pattern is not limited to sales applications.

You can see similar concepts in applications involving:

  • Sales Orders — selecting an order and opening its details
  • Purchase Requisitions — selecting a request and opening its approval details
  • Purchase Orders — selecting a document and viewing its information
  • Employee Directories — selecting an employee and opening the profile
  • Customer Lists — selecting a customer and viewing account information

The business scenario changes, but the underlying navigation concept can remain similar.

Common Beginner Mistakes

1. Using the Wrong Selection Method

Make sure your selection method matches the table's selection mode.

Using getSelectedItem() when you actually need multiple selected records can result in only one item being processed.

2. Navigating Without a Selection

Always check whether the user actually selected a record before attempting parameterized navigation.

3. Setting the Model Only on the View

If another screen needs the same data, check whether the model has been attached at the correct level.

4. Forgetting the Route Parameter

If the route expects a mandatory parameter, make sure the controller supplies the required value when calling navTo().

5. Incorrect Route or Target Configuration

Routes and targets need to correspond correctly inside manifest.json. A mismatch can prevent navigation from working as expected.

Practical Tips for SAP UI5 Beginners

  • Start with simple navigation before introducing route parameters.
  • Understand how views and controllers work together.
  • Learn the basics of manifest.json early.
  • Practice reading binding contexts from table rows.
  • Use browser developer tools when troubleshooting navigation problems.
  • Check model scope whenever data is missing on a destination view.
  • Build a small master-detail example and reuse the same pattern in larger applications.

Learning SAP UI5 and Fiori Development

Routing is only one part of SAP UI5 and Fiori application development. Developers also need to understand XML views, controllers, data binding, OData services, models, application structure, and practical project scenarios.

If you want structured learning covering these areas, you can explore SAP UI5 and Fiori Training in Hyderabad from Index IT.

A practical, project-oriented approach can make it easier to understand how individual concepts such as routing, models, binding, and navigation work together in a real Fiori application.

Frequently Asked Questions

What is routing in SAP UI5?

Routing is the mechanism used to control navigation between views in an SAP UI5 application. It allows the application to determine which view should be displayed for a particular route.

What is parameterized routing?

Parameterized routing allows a value to be passed as part of a route. The destination view can use that value to identify the relevant record or application state.

What is a binding context in SAP UI5?

A binding context connects a UI control with a specific piece of data from the application's model. Calling getBindingContext().getPath() can help identify the data represented by a selected table item.

What is the difference between getSelectedItem() and getSelectedItems()?

getSelectedItem() returns a single selected item, while getSelectedItems() returns the selected items as a collection. The appropriate method depends on the table's selection mode.

Why does data become undefined after navigation?

One possible reason is model scope. If the model was attached only to the original view, the destination view may not have access to it. Check whether shared data should instead be available at the component level.

Where are SAP UI5 routes configured?

Routing configuration is commonly maintained in the routing section of the application's manifest.json.

Is routing useful only for sales applications?

No. The same navigation concept can be used in many Fiori scenarios, including sales, procurement, HR, customer management, and other applications where users move from a list or overview to a detailed record.

Conclusion

SAP UI5 navigation becomes much easier to understand once you break it into a few simple concepts: views, routers, route parameters, binding contexts, and models.

The basic flow is straightforward: select a record, identify it, pass its identifier through the route, and display the corresponding data on the destination view.

Once you are comfortable with this pattern, you can apply the same approach to many SAP Fiori applications and real-world list-to-detail scenarios.

For a more technical explanation of parameterized routing, including route configuration, parameters, navigation, and model handling, continue with the SAP UI5 Parameterized Routing guide.

If you are looking to develop your SAP UI5 and Fiori skills through structured training and practical application development, visit SAP UI5 and Fiori Training in Hyderabad.

Comments

Post a Comment

Popular posts from this blog

How Does Data Binding Work in SAPUI5? A Beginner's Walkthrough

Image
If you're new to SAPUI5, there's a good chance you've hit this exact wall: you build a table, you have some data sitting in a JavaScript array, and... nothing shows up. No errors, no data, just an empty table staring back at you. It's one of the most common "wait, what am I missing?" moments for anyone starting out with SAP Fiori development. The short answer is that your table doesn't know your data exists yet — because in SAPUI5, controls don't just "see" your JavaScript variables. They need to be formally connected to them through something called data binding. This article walks through that connection from the very beginning, using the kind of simple example a beginner would actually build first. What Is Data Binding in SAPUI5 (In Plain English) Think of data binding as a labeled pipe between your data and your screen. On one end, you have your data — a list of students, a set of sales records, whatever it is. On the other end, you...
Read more

SAP VIM Process Types Explained: Invoice Validation & Exception Handling

Image
Invoice processing becomes more structured when organizations use SAP VIM (Vendor Invoice Management) to manage invoice information, validation, exceptions, and processing activities. One important concept in SAP VIM is the Process Type . During invoice processing, the system can use a Process Type to check specific information and determine what should happen when an exception occurs. For professionals learning SAP VIM, understanding Process Types and Process Options provides a useful foundation for understanding invoice processing and exception handling. SAP VIM Process Types and Exception Handling – A Practical Guide What Does a Process Type Do in SAP VIM? A Process Type can be used to perform specific checks on invoice-related information during document processing. Invoice processing may involve information such as: Vendor Company Code Invoice Nu...
Read more