Skip to Content

In Vegas I had the opportunity again to participate in the CodeJam (mini-editions) on the Showfloor (thanks a lot Craig & team! 🙂 ) and to demo how to build a simple SAPUI5 mobile application. Below I want to recap the content of the session in a blog.

/wp-content/uploads/2014/11/15653856886_85c43b01f3_z_579679.jpg

(That’s me doing my first session in Vegas!)

Creating a new SAPUI5 Project

  1. Create a new SAPUI5 project by clicking on “File” –> “New” –> “Other…” in the menu bar.

    Screen Shot 2014-11-05 at 13.58.23.png

  2. In the “New Project” Dialog select “Application Project” in the “SAPUI5 Application Development” folder.

    Screen Shot 2014-11-05 at 13.58.37.png

  3. Name the project, select “Mobile” as “Target Device” and uncheck “Create an Initial View“. Then click on “Finish

    Screen Shot 2014-11-05 at 13.58.58.png


Lets have a look at our project structure. There is the WebContent folder in which we will work in the next steps. There you can find the index.html file which we will edit in the next step. 


Screen Shot 2014-11-05 at 14.04.36.png

Index File

First of all we edit the index.html file, a base-frame app file which is used to run the app in a stand-alone mode (instead of running it inside a container like a Launchpad for example). We give our app a title (“Demo App”) and set the binding mode to complex to get some more functionality later on when we bind our model to a UI control. Furthermore, we create a shell so that our app is opened in a neat way when we run it in stand-alone mode. The shell references to the component container which we will edit in the next step.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<title>Demo App</title>
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
 data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"
 data-sap-ui-xx-bindingSyntax="complex"
 data-sap-ui-resourceroots='{
            "sap.demo": "./"
        }'>
</script>
<script>
sap.ui.getCore().attachInit(function() {
  new sap.m.Shell({
       app : new sap.ui.core.ComponentContainer({
            height : "100%",
            name : "sap.demo"
     })
  }).placeAt("content");
});
</script>
</head>

Component File

The component file encapsulates all of the sample app. It represents an independent unit which can be instantiated inside a container. From this unit, the child artifacts, such as views, are brought into play. Furthermore, you also define some metadata like the version of the app, which libraries and service it uses.

To create a component file go to “File”  –> “New” and select “File“. Select the “WebContent” folder and enter “Component.js” as file name then click on “Finish”.

Screen Shot 2014-11-05 at 15.45.39.png

We create a split app with a master view on the lefthand side, which contains a list, and a detail view on the righthand side. We also configure our service (URL: http://services.odata.org/Northwind/Northwind.svc/) here. For browser security reasons we cannot enter the complete URL with the host here. We have to use the SAPUI5 proxy servlet, which is enabled by default for all SAPUI5 application projects. Therefore, we replace the host with /proxy.


jQuery.sap.declare("sap.demo.Component");
sap.ui.core.UIComponent.extend("sap.demo.Component", {
  metadata : {
       name : "Demo App",
       version : "1.0",
       dependencies : {
            libs : [ "sap.m", "sap.ui.layout" ],
       },
       config : {
            serviceConfig : {
                 name : "Northwind",
                 serviceUrl : "/proxy/Northwind/Northwind.svc/"
            }
       },
  },
  createContent : function() {
       var mConfig = this.getMetadata().getConfig();
       var sServiceUrl = mConfig.serviceConfig.serviceUrl;
       var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);
       this.setModel(oModel);
       var oApp = new sap.m.SplitApp({
            id : "SplitApp"
       });
       var oMaster = sap.ui.view({
            id : "MasterView",
            viewName : "sap.demo.view.Master",
            type : sap.ui.core.mvc.ViewType.XML
       });
       var oDetail = sap.ui.view({
            id : "DetailView",
            viewName : "sap.demo.view.Detail",
            type : sap.ui.core.mvc.ViewType.XML
       });
       oApp.addMasterPage(oMaster);
       oApp.addDetailPage(oDetail);
       oApp.setInitialMaster("MasterView");
       oApp.setInitialDetail("DetailView");
       return oApp;
    }
});

Master View

Create a new folder inside the “WebContent” folder and name it “view“. To create a master view, go to “File” –> “New” –> “Other” and select “View” in the “SAPUI5 Application Development” folder.

Screen Shot 2014-11-05 at 16.33.04.png

In the Create a New View Dialog enter “Master” as the view’s name and select XML as the development paradigm.

Screen Shot 2014-11-05 at 16.34.17.png

Master.view.xml

The master view contains a list of all items in the model, in our case the list contains the first and last names of employees. Therefore we bind those two attributes to our StandardListItem which act as a template and will be repeated as many times as there are employees.


<mvc:View controllerName="sap.demo.view.Master" displayBlock="true"
 xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
      <Page id="page" title="Employees">
            <content>
                 <List id="list" items="{/Employees}" mode="SingleSelectMaster" select="onSelect">
                      <items>
                           <StandardListItem xmlns="sap.m" title="{FirstName} {LastName}" icon="sap-icon://employee">
                           </StandardListItem>
                      </items>
                 </List>
            </content>
      </Page>
</mvc:View>

Master.controller.js

In the controller of our master view we have to implement the update function for our detail view. So when the user clicks on an employee on the master view the detail view will be updated.


sap.ui.core.mvc.Controller.extend("sap.demo.view.Master", {
  onSelect : function(oEvent) {
       sap.ui.getCore().byId("DetailView").setBindingContext(oEvent.getParameter("listItem").getBindingContext());
       sap.ui.getCore().byId("SplitApp").toDetail("DetailView");
       },
});

Detail View

Create the detail view similar to the master view, also choose XML as the development paradigm and name it “Detail“.

Detail.view.xml

The detail view contains all the information of an employee, so in this case the name, address, phone number and some notes.


<mvc:View controllerName="sap.demo.view.Detail" xmlns:mvc="sap.ui.core.mvc"
 xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
      <Page title="{FirstName}">
            <content>
                 <f:SimpleForm maxContainerCols="2" layout="ResponsiveGridLayout">
                      <f:content>
                           <Label text="Name" />
                           <Text text="{FirstName} {LastName}" />
                           <Label text="Address" />
                           <Text text="{Address}" />
                           <Label text="City" />
                           <Text text="{City}" />
                           <Label text="Country" />
                           <Text text="{Country}" />
                           <Label text="Home Phone" />
                           <Text text="{HomePhone}" />
                           <Label text="Notes" />
                           <Text text="{Notes}" />
                      </f:content>
                 </f:SimpleForm>
            </content>
      </Page>
</mvc:View>

Test Your App

Before testing the app, we have to configure the SAPUI5 proxy servlet. Therefore, double click on “Deployment Descriptor” in your application project and scroll down to the section “SAPUI5 proxy servlet” and modify this part as shown.


<!-- ============================================================== -->
 <!-- UI5 proxy servlet                                              -->
 <!-- ============================================================== -->
 <servlet>
       <servlet-name>SimpleProxyServlet</servlet-name>
       <servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>
 </servlet>
 <servlet-mapping>
       <servlet-name>SimpleProxyServlet</servlet-name>
       <url-pattern>/proxy/*</url-pattern>
 </servlet-mapping>
 <context-param>
       <param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>
       <param-value>http://services.odata.org/</param-value>
 </context-param>

New create a new server, therefore go to “File” –> “New” –> “Other” and select “Server” in the dialog window.

Screen Shot 2014-11-05 at 17.48.00.png

Select “Tomcat v7.0 Server” in the “Apache” folder and give your server a name.

Screen Shot 2014-11-05 at 17.50.31.png

Go to the server settings by double clicking on it and select the “Modules” tab on the bottom. Click on “Add Web Module…” and select your project. Remove the string in the “Path” filed and click on OK, then save your changes.

Now, go to your project and do a right click on the index.html file, select “Run as…” and choose “Run on server“.

Screen Shot 2014-11-05 at 17.55.11.png

And here you go 🙂

Screen Shot 2014-11-05 at 17.58.00.png

Next Steps

Obviously, this app isn’t finished yet. There are a lot of features which could be added like a quick search, the functionality to add an employee or a map view of the employee’s address. So feel free to work on your project and enhance the app.

Another good source to learn more about SAPUI5 is the Demo Kit, especially this Application Best Practices is very useful to get an idea about how to structure your app. Have fun! 🙂

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply