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">
  <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

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.


</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.

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

Assigned tags

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

      Hi

      Thanks for the blog.

      Thanks

      Author's profile photo ' Pavan ' Golesar
      ' Pavan ' Golesar

      Cool stuff for beginners..

      Thanks Can't wait to try these.. 🙂

      Regards,

      PavanG

      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.

      EPM_ES4_sapwebide_lcl.JPG

      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.

      Regards,

      Jamie

      SAP - Technology RIG

      Author's profile photo Former Member
      Former Member

      Hello,

      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

      controlAggregation

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

      Hi Vinod,

      Please post your questions in a new forum thread.

      Regards,

      Jamie

      SAP - Technology RIG

      Author's profile photo TAPAS SANTRA
      TAPAS SANTRA

      Hello Jamie,

      Thank you for posting such a beautiful article.

      Thanks.

      Tapas.

      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?

       

      Regards

      Paul

       

      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

      window.open(TheURL, '_blank');

      Regards,

      Jamie