Manifest Routing in SAP Web IDE

In this blog I will use the ES4 system which is publicly available.  If you do not have an account on the system see

Sign up and get started with the SAP Gateway – Demo Consumption System

If you are unfamiliar with setting up a destination see

How to configure an external GW system with SAP Web IDE

which details connecting to the older ES1 system, but make sure to set the connection up for ES4.  If you are new to SAP Web IDE see

SAP Web IDE – Overview

This blog deals with apps that utilize a manifest.json file.  If your have an app where the routes are defined in the Component.js see

Creating a Fiori Starter Application with an Additional View

Create An App

Lets start by creating a Master Detail app.  First choose File -> New -> Project from Template

Choose SAP Fiori Master Detail Application with Available Version set to SAPUI5 1.32 or greater

Choose Next and provide a project name for example OrdersDemo

Choose Next and with the Source Service Catalog selected choose your ES4 system and the service EPM_REF_APPS_PO_APV_SRV

Choose Next and provide the following template values

Choose Next and Finish to complete the template.

Within the app navigate to webapp/test/testFLP.html and choose the Run option and verify that your app is working as expected.

Adding a View

Right click on the webapp/view folder and choose New -> File providing the name ItemDetails.view.xml.   Add the following content to the view

<mvc:View controllerName="com.po.demo.controller.ItemDetails" xmlns:semantic="sap.m.semantic" xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:form="sap.ui.layout.form">
  <semantic:DetailPage
  id="itempage"
  navButtonPress="onNavBack"
  showNavButton="{device>/system/phone}"
  title="Item Details">
  <semantic:content>
  <form:SimpleForm minWidth="1024">
  <core:Title text="Item Details"/>
  <Label text="Product"/>
  <Text text="{Product}"/>
  <Label text="ID"/>
  <Text text="{POId}"/>
  <Label text="Position"/>
  <Text text="{POItemPos}"/>
  <Label text="DeliveryDate"/>
  <Text text="{DeliveryDate}"/>
  </form:SimpleForm>
  </semantic:content>
  </semantic:DetailPage>
</mvc:View>

Create another file in the directory webapp/controller providing the name ItemDetails.controller.js.  Add the following content to the controller

sap.ui.define([
  "com/po/demo/controller/BaseController"
  ], function (BaseController) {
  "use strict";
  return BaseController.extend("com.po.demo.controller.ItemDetails", {
  });
  }
);

Adding Routes

Open webapp/manifest.json which will open in the Descriptor Editor.  You also have the option to view the raw file by choosing the Code Editor option at the bottom left of the file.

In the Descriptor Editor choose the Routing tab at the top of the editor.  Add a new Target under the Manage Targets section providing the values

Name: itemDetails

View Name: ItemDetails

ID : itemDetails

Next add a new route under the Routes section with the values

Name: itemDetails

Pattern: PurchaseOrders/{objectId}/PurchaseOrderItems/{posId}

Targets: master, itemDetails

Now lets add the coding in the Details view to navigate to our new view.  Open the webapp/view/Details.view.xml and add the properties press and type with the following values as shown.

</columns>
  <items>
  <ColumnListItem press="goToItemDetail" type="Navigation">
  <cells>
  <ObjectIdentifier
  title="{Product}"
  text="{POItemPos}"/>

Next open webapp/controller/Details.controller.js and define the goToItemDetail function as follows

goToItemDetail : function(oEvent){
  var sPOId = oEvent.getSource().getBindingContext().getProperty("POId");
  var sPOItemPos = oEvent.getSource().getBindingContext().getProperty("POItemPos");
  this.getRouter().navTo("itemDetails", {
  objectId : sPOId,
  posId: sPOItemPos
  });
  }

Finally in the file webapp/view/ItemDetails.controller.js we can add the coding to handle the navigation and binding of our new view.

sap.ui.define([
  "com/po/demo/controller/BaseController"
  ], function (BaseController) {
  "use strict";
  return BaseController.extend("com.po.demo.controller.ItemDetails", {
  onInit : function () {
  this.getRouter().getRoute("itemDetails").attachPatternMatched(this._onItemDetailsMatched, this);
  },
  _onItemDetailsMatched: function(oEvent){
  var sObjectPath = this.getModel().createKey("PurchaseOrderItems", {
  POId :  oEvent.getParameter("arguments").objectId,
  POItemPos :  oEvent.getParameter("arguments").posId
  });
  this.getView().bindContext("/" + sObjectPath);
  }
  });
  }
);

Now when we load our app we should be able to select one of the items in the PurchaseOrderItems table and this should navigate us to our new view.