Skip to Content

This Guide explains how to build a simple SAPUI5 application, as it was shown in the CodeJam at Antwerp on Feb 20th 2014.

Creating the SAPUI5 Application

  1. Create a new SAPUI5 project by right clicking in the “Project Explorer” and selecting “New” –> “Project…”
    17-02-2014 08-12-35.png
  2. In the New Project Dialog select “Application Project” in the “SAPUI5 Application Development” folder.
    17-02-2014 08-13-53.png
  3. Name the project, select “Mobile” as “Target Device” and check “Create an Initial View“. Then click on “Next >”
    17-02-2014 08-15-35.png
  4. Create the initial view. In our example we name it “App“. We choose “XML” as “Development Paradigm”. Then click on “Finish”
    17-02-2014 08-18-14.png
  5. Let’s have a short look at our applications file structure. There are three important files. The “index.html” which is the HTML page which displays the application. An “App.view.xml” which is an XML file which describes the view and the “App.controller.js” which implements the views logic.
    17-02-2014 08-22-02.png
  6. To test your application you can always right click on the project and select: “Run As” –> “Web App Preview”

App View

The App view should contain a split app, which contains a list on the left hand side (to display the products) and a navigation container on the right hand sind (to display details). Therefore we edit the index.html and App.view.xml as shown below.

index.html


<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
  <script src="resources/sap-ui-core.js"
  id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.m"
  data-sap-ui-theme="sap_bluecrystal">
  </script>
  <script>
  //Define subfolder which includes the applications files
  sap.ui.localResources("codejamapplication");
  //Instantiate the view
  var app = sap.ui.view({id:"productsApp", viewName:"codejamapplication.App", type:sap.ui.core.mvc.ViewType.XML});
  // to avoid scrollbars on desktop the root view must be set to block display
  app.setDisplayBlock(true);
  app.placeAt("content");
  </script>
  </head>
  <body class="sapUiBody" role="application">
  <div id="content"></div>
  </body>
</html>








App.view.xml


<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m" controllerName="codejamapplication.App" xmlns:html="http://www.w3.org/1999/xhtml">
  <Shell title="Product Explorer">
       <SplitApp>
            <masterPages>
                 <Page title="Products">
                      <List></List>
                 </Page>
            </masterPages>
            <detailPages>
                 <NavContainer id="navContainer"></NavContainer>
            </detailPages>
       </SplitApp>
  </Shell>
</core:View>






Routing

To enable routing within the application you need to create an application router. We place this in the javascript section of the index.html file (the same <script> section, in which the view is initialized. In this router we define two routes for the product details and the supplier details. Additionally we define a configuration object which sets default values for all routes. To automate the navigation in the nav container we use the RouteMatchedHandler.


jQuery.sap.require("sap.ui.core.routing.Router");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
var oRouter = new sap.ui.core.routing.Router({
     product: {
          pattern: "product/{id}",
          view: "Product",
  },
  supplier: {
  pattern: "supplier/{id}",
  view: "Supplier"
  }
  }, {
  targetControl: "navContainer",
  targetAggregation: "pages",
  targetParent: "productsApp",
  viewType: "XML",
  viewPath: "codejamapplication",
  clearTarget: false
  });
  var oRouteHandler = new sap.m.routing.RouteMatchedHandler(oRouter);
  oRouter.register("router");
oRouter.initialize();




The oRouter.initialize() should be done after the application view has been placed on the screen (app.placeAt(“content”)) All the other code needs to be executed before the app view is initialized.

Model

To connect your application to the backend, you have to define a Model. We do this in the index.html file:


var oModel = new sap.ui.model.odata.ODataModel("http://54.224.71.58:50000/sap/opu/odata/sap/ZGWSAMPLE_SRV");
  sap.ui.getCore().setModel(oModel);



This definition should be placed before the lines where the application view is instantiated.

Service URLs need to have the same host as the application. Else the requests are blocked by the browser for security reasons. To overcome this you can use the SAPUI5 proxy servlet, which is enabled by default for all SAPUI5 Application projects. You can write the url like


new sap.ui.model.odata.ODataModel("proxy/http/54.224.71.58:50000/sap/opu/odata/sap/ZGWSAMPLE_SRV");



Products and Supplier View

To display the details we defined two routes for which we need to define the views.

To use all the bindings which are define din this view, you have to enable the extended binding syntax. This can be done by adding “data-sap-ui-xx-bindingSyntax=”complex” “ to the bootstrap script tag.

Supplier.view.xml


<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m" controllerName="codejamapplication.Supplier" xmlns:html="http://www.w3.org/1999/xhtml">
  <Page title="{CompanyName}" showNavButton="true" navButtonPress="handleNavBack">
  <content>
  <ObjectHeader title="{CompanyName}" number="Phone: {PhoneNumber}"
  numberUnit="{EmailAddress}">
  <attributes>
  <ObjectAttribute text="{Description}" />
  <ObjectAttribute text="{Category}" />
  </attributes>
  </ObjectHeader>
  </content>
  </Page>
</core:View>



Product.view.xml


<core:View xmlns:core="sap.ui.core" xmlns:form="sap.ui.layout.Form"
  xmlns="sap.m" controllerName="codejamapplication.Product" xmlns:html="http://www.w3.org/1999/xhtml">
  <Page title="{Name}">
  <content>
  <ObjectHeader title="{ProductId}" number="{Price}"
  numberUnit="{CurrencyCode}">
  <attributes>
  <ObjectAttribute text="{Description}" />
  <ObjectAttribute text="Category: {Category}" />
  <ObjectAttribute text="Supplier: {SupplierName}" press="showSupplier" active="true"></ObjectAttribute>
  </attributes>
  </ObjectHeader>
  </content>
  </Page>
</core:View>



In this coding you also see the data binding syntax. You can write the entities properties in curly braces. You can also define complex binding structures like mixing strings and bindings. To enable this, you have to add an additional attribute to the bootstrap in the index.html file.

We also still miss the databinding in the App.view.xml which is shown below.


<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m" controllerName="codejamapplication.App" xmlns:html="http://www.w3.org/1999/xhtml">
  <Shell title="Product Explorer">
  <SplitApp>
  <masterPages>
  <Page title="Products">
  <List items="{/ProductCollection}">
  <items>
  <StandardListItem title="{Name}" description="{Description}" type="Active" press="selectProduct"></StandardListItem>
  </items>
  </List>
  </Page>
  </masterPages>
  <detailPages>
  <NavContainer id="navContainer"></NavContainer>
  </detailPages>
  </SplitApp>
  </Shell>
</core:View>



We have now created all the views, that we need for our application. We still miss the logic.

Controllers

To logic of the application in imiplemented in the controllers. Here we handle the navigation and data binding.

App.controller.js


sap.ui.controller("codejamapplication.App", {
  onInit: function() {
  this.oRouter = sap.ui.core.routing.Router.getRouter("router");
  },
  selectProduct: function(oEvent) {
  var oBindingContext = oEvent.getSource().getBindingContext();
  this.oRouter.navTo("product", { id: oBindingContext.getProperty("ProductId") });
  }
});



Product.controller.js


sap.ui.controller("codejamapplication.Product", {
  onInit: function() {
  this.oRouter = sap.ui.core.routing.Router.getRouter("router");
  this.oRouter.attachRouteMatched(function(oEvent) {
  var sRoute = oEvent.getParameter("name"),
  oView = oEvent.getParameter("view");
  if (sRoute === "product") {
  oView.setBusyIndicatorDelay(0);
  oView.setBusy(true);
  sap.ui.getCore().getModel().createBindingContext("/ProductCollection('" + oEvent.getParameter('arguments').id + "')", function(oContext) {
  oView.setBindingContext(oContext);
  oView.setBusy(false);
  });
  }
  });
  },
  showSupplier: function(oEvent) {
  var oBindingContext = oEvent.getSource().getBindingContext();
  this.oRouter.navTo("supplier", { id: oBindingContext.getProperty("SupplierId") });
  }
});



Supplier.controller.js


sap.ui.controller("codejamapplication.Supplier", {
  onInit: function() {
  this.oRouter = sap.ui.core.routing.Router.getRouter("router");
  this.oRouter.attachRouteMatched(function(oEvent) {
  var sRoute = oEvent.getParameter("name"),
  oView = oEvent.getParameter("view");
  if (sRoute === "supplier") {
  oView.setBusyIndicatorDelay(0);
  oView.setBusy(true);
  sap.ui.getCore().getModel().createBindingContext("/BusinessPartnerCollection('" + oEvent.getParameter('arguments').id + "')", function(oContext) {
  oView.setBindingContext(oContext);
  oView.setBusy(false);
  });
  }
  });
  },
  handleNavBack: function() {
  var oHistory = sap.ui.core.routing.History.getInstance();
  if (oHistory.getPreviousHash()) {
  window.history.go(-1);
  }
  }
});



To report this post you need to login first.

8 Comments

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

  1. Seshu Srinivas

    Hi Christoph,


         Nice Blog. I am implement the same example in my system. I required some additional info regarding the database model (tables, columns, Datatypes and if any relationship between tables.).

    As we are working on this on high priority, Can you please share the screenshots of final output to get idea about the expected output?

    Thanks,

    Seshu

    (0) 
  2. Jagadeesh Biyyapu

    Hi,

    I am new to SAPUI5 .Can u please tell me why there is createbindingcontext concept in supplier and product controllers.Instead why we cant use getbindingcontext in both supplier and product.Please some one help on this

    (0) 

Leave a Reply