Navigating to Routes with Hard-Coded Patterns

1. Open the i18n.properties resource bundle file from the i18n folder in the editor.

2. Add the following key-value pair to the i18n.properties file to define a translatable title for the Page UI element to be created in the next step:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1
   detailPageTitle=Customer Details

   Result

   The i18n.properties resource bundle file should now look like this:

   

3. Now open the Detail.view.xml file from the webapp/view folder in the editor.

4. Add the following code to the view to display a (still empty) page with the title created above:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   12345
   <Page title="{i18n>detailPageTitle}">
     <content>
   
     </content>
   </Page>

1. Open the manifest.json application descriptor from the webapp folder in the editor.

2. In the application descriptor, find the routing property in the sap.ui5 namespace:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1234567891011121314151617181920212223242526
   "routing": {
     "config": {
       "routerClass": "sap.m.routing.Router",
       "viewType": "XML",
       "async": true,
       "viewPath": "sap.training.exc.view",
       "controlAggregation": "pages",
       "controlId": "app"
     },
     "routes": [
       {
         "name": "overview",
         "pattern": "",
         "target": [
           "overview"
         ]
       }
     ],
     "targets": {
       "overview": {
         "viewId": "overview",
         "viewName": "Overview",
         "viewLevel": 1
       }
     }
   }

3. Add the following object to the routes array to define a route called detail, for which the target named detail is displayed when the hash of the browser equals detail:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1234567
   {
     "name": "detail",
     "pattern": "detail",
     "target": [
       "detail"
     ]
   }

   Note

   The referenced detail target is defined in the next step.

   Result

   The routing configuration should now look like this:

   

4. Finally, add the following property to the targets object to specify that the detail target referenced above will be used to load the Detail view:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   12345
   "detail": {
     "viewId": "detail",
     "viewName": "Detail",
     "viewLevel": 2
   }

The routing configuration done above causes the router to load the Detail view into the pages aggregation of the App UI element when the hash of the browser equals detail. Therefore, in the following steps, you will set the browser's hash to this value via the navTo method of the router when the user selects a customer from the customer table.

1. Open the Overview.view.xml file from the webapp/view folder in the editor.

2. Add the following two attributes to the <ColumnListItem> tag in the customer table:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1
   type="Navigation" press=".onNavToDetails"

   Note

   The Navigation type indicates that the table rows are navigable to display additional information. When selecting a row, the onNavToDetails event handler method is called, which is implemented in the next step and in which the navigation is triggered.

   Result

   The customer table should now look like this:

   

3. Now open the Overview.controller.js file from the webapp/controller folder in the editor.

4. Add the onNavToDetails event handler method to the view controller as follows to trigger navigation to the Detail view:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1234
   onNavToDetails: function () {
     var oRouter = this.getOwnerComponent().getRouter();
     oRouter.navTo("detail");
   }

   Note

   In the implementation of the method, the router instance is accessed. On it, the navTo method is called to navigate to the detail route specified in the routing configuration. This sets the detail pattern to the browser's hash, which causes the Detail view to be displayed.

   Result

   The view controller should now have the following additional method:

   

5. Test run your application by starting it from the SAP Business Application Studio.

   Caution

   Use the start-mock npm script to start the application.

   Make sure that the Detail view is displayed when a customer is selected in the customer table.

   Note

   Please keep in mind that the navigation from the Detail view back to the Overview view is not supported yet. This will be implemented in the next exercise.

   1. Right-click on any subfolder in your sapui5-development-learning-journey project and select Preview Application from the context menu that appears.

   2. Select the npm script named start-mock in the dialog that appears.

   3. In the opened application, check if the component works as expected.