Step 3: Catch Invalid Hashes

Sometimes it is important to display an indication that the requested resource was not found. To give you an example: If a user tries to access an invalid pattern which does not match any of the configured routes, the user is notified that something went wrong. You might also know this as a “404” or Not Found Page from traditional web pages. In this step, we will implement a feature that detects invalid hashes and visualizes this in a nice way.

Preview

Figure 1: Not Found page

Coding

You can view and download all files in the Explored app in the Demo Kit under Routing and Navigation - Step 3.

Figure 2: Folder structure for this step

webapp/manifest.json

{
   ...
   "sap.ui5": {
      ...
      "routing": {
         "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "sap.ui.demo.nav.view",
            "controlId": "app",
            "controlAggregation": "pages",
            "transition": "slide",
            "bypassed": {
               "target": "notFound"
            }
         },
         "routes": [{
            "pattern": "",
            "name": "appHome",
            "target": "home"
         }],
         "targets": {
            "home": {
               "viewName": "Home",
               "viewLevel" : 1
            },
            "notFound": {
               "viewName": "NotFound",
               "transition": "show"
            }
         }
      }
   }
}

Let’s extend the routing configuration in the descriptor by adding a bypassed property and setting its target to notFound. This configuration tells the router to display the notFound target in case no route was matched to the current hash. Next, we add a notFound target to the bypassed section. The notFound target simply configures a notFound view with a show transition.

webapp/view/NotFound.view.xml (New)

<mvc:View
   controllerName="sap.ui.demo.nav.controller.NotFound"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <MessagePage
      title="{i18n>NotFound}"
      text="{i18n>NotFound.text}"
      description="{i18n>NotFound.description}"/>
</mvc:View>

Now we create the view referenced above in a new file NotFound.view.xml in the webapp/view folder. It uses a sap.m.MessagePage control to display an error message to the user. In a real app you might use a dynamic message matchint the current error situation. Here, we simply display a preconfigured text from our resource bundle.

webapp/controller/NotFound.controller.js (New)

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("sap.ui.demo.nav.controller.NotFound", {
      onInit: function () {
      }
   });
});

Now we create the controller for the NotFound view and save it into the webapp/controller folder. This controller will be extended later.

webapp/i18n/i18n.properties

...
NotFound=Not Found
NotFound.text=Sorry, but the requested resource is not available.
NotFound.description=Please check the URL and try again.

Add the new properties to the i18n.properties file.

Open the URL index.html/#/thisIsInvalid in your browser. From now on the user will see a nice Not Found page if a hash could not be matched to one of our routes.

Conventions

Always configure the bypassed property and a corresponding target
Use the sap.m.MessagePage control to display routing related error messages