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

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

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

    (0) 
    1. Jamie Cawley 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

      (0) 
  2. Vinod Patil

    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

    (0) 

Leave a Reply