SAP Code Jam (mini-editions): Your first SAPUI5 Mobile App
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.
(That’s me doing my first session in Vegas!)
Creating a new SAPUI5 Project
- Create a new SAPUI5 project by clicking on “File” –> “New” –> “Other…” in the menu bar.
- In the “New Project” Dialog select “Application Project” in the “SAPUI5 Application Development” folder.
- Name the project, select “Mobile” as “Target Device” and uncheck “Create an Initial View“. Then click on “Finish“
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.
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”.
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.
In the Create a New View Dialog enter “Master” as the view’s name and select XML as the development paradigm.
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.
Select “Tomcat v7.0 Server” in the “Apache” folder and give your server a name.
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“.
And here you go 🙂
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! 🙂