Skip to Content
Author's profile photo Jamie Cawley

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

Screen Shot 2016-02-12 at 10.19.36 AM.png

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.

Screen Shot 2016-02-12 at 10.05.43 AM.png

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">
  title="Item Details">
  <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}"/>

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

  ], 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

Screen Shot 2016-02-12 at 3.44.03 PM.png

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.

  <ColumnListItem press="goToItemDetail" type="Navigation">

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.

  ], 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.

Screen Shot 2016-02-12 at 2.44.32 PM.png

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Timothy Muchena
      Timothy Muchena


      Thanks for the blog.


      Author's profile photo Pavan Golesar
      Pavan Golesar

      Cool stuff for beginners..

      Thanks Can't wait to try these.. 🙂



      Author's profile photo Samir Habib Saad
      Samir Habib Saad

      I just want to add that if you are using the latest SAPWebIDE Local installation, after creating the Destination file you should use the Service URL instead of the Service Catalog. Check the screen-shoot below for details.


      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      That is dependent on the WebIDEUsage you set for your destination.  I would assume you only provided odata_gen and not odata_abap.  See the install guide for specifics.



      SAP - Technology RIG

      Author's profile photo Former Member
      Former Member


      Thanks for the blog. It is helpful.

      In my application, i want to navigate from full page view to master-detail.

      Can you please guide on it? Also it will be great if you can explain below 2 concepts with some example-

      Control ID


      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      Hi Vinod,

      Please post your questions in a new forum thread.



      SAP - Technology RIG

      Author's profile photo TAPAS SANTRA

      Hello Jamie,

      Thank you for posting such a beautiful article.



      Author's profile photo Pawel Pawlonka
      Pawel Pawlonka

      Hallo Jamie,

      I can not find any answer so far. I would like to open a new window from the detail view by pressing a button. Do you know any way?





      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      Hi Paul,

      In the future please post unrelated questions in the questions and answers area.

      For a button just assign a function to it's press event and then you can just do, '_blank');