—Categories: SAP, Web Development

Getting started with SAPUI5

A while back I had the opportunity to investigate SAPUI5 as an option for user interfaces on our current project. Here is a quick little getting started guide that I wrote back then, partly for my own benefit in case I ever need to get started on it again.

SAPUI5, SAP’s UI development tookit for HTML5 development,  is an exciting framework for building fancy, single page web applications. There is a lot of information about it already, but I thought I would write down a getting started guide that is hopefully easy to follow, without bombarding you with all the background knowledge. (I will save that for the end).

You should hopefully end up with an easy-to-use setup that will give you a simple workflow for creating and testing SAPUI5 applications, in the process hopefully saving you the pain of figuring out what to do.

In the process we will be developing a simple application that consumes services from services.odata.org (not from your SAP system at present, I will explain toward the end why). The end result will be a simplistic page that shows a list of customers, and orders for those customers when one of them is selected.

To begin, you will need the following:

Step 1: Setting up a test server environment

I will assume you have Java installed already. Ensure you have the JRE_HOME environment variable set to the location of the JRE, for example C:\Program Files\Java\jre7.

Unzip your Tomcat distribution to somewhere on your hard drive. From now on, I will refer to the location where you unzipped it (e.g. C:\temp\apache-tomcat-7.0.39) as TOMCAT_HOME. (You don’t have to set the environment variable, it’s just a useful reference).

Next, create a folder somewhere and unzip the SAPUI5 evaluation toolkit (my file is called HTML5Evaluation_complete_1.12.1.zip). Let’s call this SAPUI5_HOME for now.

Open up the command shell and navigate to TOMCAT_HOME\bin. Run startup.bat to launch Tomcat, which will open a new console window in which it shows the output of the server. Once you see that it has started up, copy sapui5.war and sapui5-sdk.war to TOMCAT_HOME\webapps. Give the two .war files a little time to auto-deploy. After this, you will have the complete documentation and Javascript libraries available on the server. Navigate to http://localhost:8080/sapui5-sdk/ to view the documentation.

In the command prompt you had open, run shutdown.bat to stop the server again. We will start it again from Eclipse later on.

Step 2: Setting up the development environment

In the next step, we will set up the Eclipse Workbench, install the SAP plugins and set up the connection to the Tomcat development server.

Extract the Juno Java EE Eclipse archive. Start Eclipse by double-clicking eclipse.exe. In the Eclipse Workbench, choose Help -> Install New Software… from the menu.

In the dialog that comes up, choose “Add…”, then, in the Add Repository dialog, click “Local…” and select the SAPUI5_HOME/tools-updatesite folder. Give the new repository a name, like SAPUI5.

Adding a new repository
Selecting the local folder

Click OK and go through the wizard to add the components to the workbench, (click Next, Accept the License and click Finish) then restart the workbench. This will require a considerable number of components to be downloaded from the internet, so make sure you are connected.

Selecting the components to install

When Eclipse has restarted, navigate to the Servers view and create a new server definition.

Creating a new server instance

Select “Tomcat v7.0 Server” under the Apache section. In the next page of the wizard, choose the TOMCAT_HOME directory and finish the wizard. Once done, double-click the server definition to open up the properties page. Under “Server Locations”, select “Use Tomcat installation (takes control of the Tomcat installation)”.

Setting Eclipse to control the Tomcat installation on the properties page

You can optionally also set the deploy path to TOMCAT\webapps, otherwise a new folder is created under your Tomcat installation, which should not cause a problem, but do this just to be safe.

Make sure to save the Properties page, and then we can start developing.

Step 3: Develop a SAPUI5 application

In this step, we finally create the SAPUI5 application.

From the Eclipse menu, choose File -> New -> Other….  Under “SAPUI5 Application Development”, choose “Application Project”.

Selecting the type of project to create

Let’s call the project “northwind”, after the famous sample schema shipped with SQL Server. (After all, the data is coming from that same set).

Creating our new project

We need to specify a default view. The generated code will load this view into the start page, and this is where we will specify our code. We will call our view “customer-orders” and then we can complete the wizard. Leave Javascript as the default (views can be written in JSON and XML as well).

The generated project contains an index.html file and a folder with the same name as the project (“northwind” in our case). If you open up the index.html file, you will see that there is generated code to load the view specified in the project creation wizard.

File layout of the new project

The view consists of two files: customer-orders.js and customer-orders.controller.js. The controller contains some functions that are called during various stages in the view’s lifecycle, and you can add additional functions that are called from your own view components.

As a first step, open index.html and change the following lines: