Add Views and Define Routes to Access Them

In SAPUI5, each view is represented by a dedicated file in the view folder.

1. Add a new view with a right-click on the view folder and select New File. Name this file List.view.xml.

   

2. The name already suggests that this view fill contain a list of products. Add the following file content that defines the views and the list. Note the list already uses data binding to show the product entities as list items.

   <mvc:View controllerName="sap.cp.webapp.controller.List" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
   	<Page id="listPage" title="{i18n>ListTitle}" >
           <List id="list" items="{/Products}">
               <StandardListItem type="Navigation" press="handleListItemPress" title="{ProductName}"/>
           </List>
       </Page>
   </mvc:View>
   

3. Repeat step 1 to create another view with the name Detail.view.xml. We will use this view to display details of a given product.

4. Write the following content in this new file. In contrast to the list, it uses a relative binding, e.g. the binding path doesn’t start with / like absolute paths do.

   <mvc:View controllerName="sap.cp.webapp.controller.Detail" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
   	<Page id="detail" title="{i18n>DetailTitle}" showNavButton="true" navButtonPress="handleNavButtonPress" >
   		<VBox>
   			<Text text="{ProductName}" />
   			<Text text="{UnitPrice}" />
   			<Text text="{QuantityPerUnit}" />
   			<Text text="{UnitsInStock}" />
   		</VBox>
   	</Page>
   </mvc:View>
   

Hint: You don’t need to rely on the code editor to edit the views. Right-click on any view and select Open with | Layout Editor to access the WYSIWYG layout editor:

The web app basically contains of the two views we created in the previous step. We want to switch from the list view to the detail view when the user clicks an item, and back to the list when the user clicks the “back” button. To implement this navigation, we need an <App> container that includes both view.

Edit the original webapp/webapp/view/View1.view.xml view to define only this container.

<mvc:View controllerName="sap.cp.webapp.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="View1">
		<App id="app">
		</App>
	</Shell>
</mvc:View>

In this step we’ll define so-called routes and targets, which are needed for the automated navigation we want to use. Each route defines a (URL) pattern and the target it points to, and each target specifies the view it refers to.

Add the new targets and routes to the existing webapp/webapp/manifest.json file.

{
    "_version": "1.12.0",
    "sap.app": {
        ...
    },
    "sap.ui": {
        ...
    },
    "sap.ui5": {
        ...
        "routing": {
            ...
            "routes": [
                {
                    "name": "home",
                    "pattern": "",
                    "target": [
                        "TargetList"
                    ]
                },
                {
                    "name": "detail",
                    "pattern": "product/{productId}",
                    "target": [
                        "TargetDetail"
                    ]
                }
            ],
            "targets": {
                "TargetView1": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewId": "View1",
                    "viewName": "View1"
                },
                "TargetList": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewName": "List"
                },
                "TargetDetail": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewName": "Detail"
                }
            }
        }
    }
}

This is the crucial step of this tutorial that ties everything together. Each view specifies its controller with the controllerName property in the first line. Controllers contain the business logic of web apps, bind models to views, and use the router to navigate between views.

1. Right-click on the controller folder and select New File to create a new List.controller.js controller for the list view. The controller defines one method that is the event listener for the press-item event of the product list. It will trigger the navigation to the second view and attached the product ID of the pressed item.

   sap.ui.define([
       "sap/ui/core/mvc/Controller"
   ],
       function (Controller) {
           "use strict";
   
           return Controller.extend("sap.cp.webapp.controller.List", {
               handleListItemPress: function (oEvent) {
                   var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                   var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");
                   oRouter.navTo("detail", {
                       productId: selectedProductId
                   });
               }
           });
       });
   

2. Chose New File one more time to create a Detail.controller.js file, which corresponds to the detail view. This control contains more methods as the needs to handle the inbound navigation, to bind the selected product to the view, and the outbound navigation to get back to the list. Insert the following code into the file.

   sap.ui.define([
       "sap/ui/core/mvc/Controller"
   ],
       function (Controller) {
           "use strict";
   
           return Controller.extend("sap.cp.webapp.controller.Detail", {
               onInit: function () {
                   var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                   oRouter.getRoute("detail").attachMatched(this._onRouteMatched, this);
               },
               _onRouteMatched: function (oEvent) {
                   var oArgs, oView;
                   oArgs = oEvent.getParameter("arguments");
                   oView = this.getView();
                   oView.bindElement({
                       path: "/Products(" + oArgs.productId + ")",
                       events: {
                           dataRequested: function () {
                               oView.setBusy(true);
                           },
                           dataReceived: function () {
                               oView.setBusy(false);
                           }
                       }
                   });
               },
               handleNavButtonPress: function (evt) {
                   var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                   oRouter.navTo("home");
               }
           });
       });
   

You might notice that some global variables will be underlined red. Don’t worry, this is just a type warning and your application will still work fine.

Run npm install from the project root (/home/user/projects/tutorial) to install the type definitions and the resolve the warnings