Skip to Content
Author's profile photo Andre Fischer

How to write a simple SAPUI5 application leveraging the SAPUI5 Theme Editor

In this How-To-Guide Christoph Kraemer and Andre Fischer will show the development of a simple SAPUI5 application, how to deploy it on the SAP NetWeaver Gateway Server and how to leverage the SAPUI5 Theme Designer to make your sample application more apealing in just a few clicks.

Publishing the SAPUI5 application directly on top of the SAP NetWeaver Gateway Server has several advantages so that it is also be used by SAP Fiori applications.

The sample SAPUI5 application will use a simple OData service published via SAP NetWeaver Gateway that delivers a list of products based on the SAP Enterprise Procurement demo data model (EPM).

How to develop an OData service with SAP NetWeaver Gateway is explained in the following whitepaper: How to Develop a Gateway Service using Code based Implementation .

Development of a SAPUI5 application

Right click inside the “Project Explorer” to create a new project. Select New –> Other… in the Context Menu


Select entry “Application Project” in the group “SAPUI5 Application Development” and click “Next”.


Create the SAPUI5 application: Enter a project name and select “Mobile” as “Target Device”, then select “Next”


Create a first view. Enter a name and select „XML“ as view type. After that click “Finish”. A basic application structure is created for you.


You need to edit the URL where the application has to load SAPUI5 from.

Before you have to find out the URL of the SAPUI5 installation within you SAP Gateway System. You can find the SAPUI5 Information page under the following URL: http://<yourservername>:<port>/sap/public/bc/ui5_ui5/index.html

At the very top you can find the URL which needs to be inserted in your “index.html” file. (i.e. /sap/public/bc/ui5_ui5/1/resources/sap-ui-core.js)

Here you can also find a link to the Demokit where you can find the API documentation, documentation and example applications.


Now you can edit the URL where the application has to load SAPUI5 from. Open the “index.html” file which can be found in the “WebContent” folder of your project. Copy the link to your “sap-ui-core.js” and paste it into the “src” attribute of the SAPUI5 bootstrap script tag.


In the index.html file you can also see some code which initializes the application. Here we also add the code to initialize the “ODataModel”. Insert the following code before the app creataion (“var app ..”)

var oModel = new sap.ui.model.odata.ODataModel(“/sap/opu/odata/sap/ZPRODUCT_SRV”);


Now we create the table control within the file “Table.view.xml”. This file can be found in the “WebContent/<projectname>/” folder. A basic page structure is already given. Within the content aggregation of the page we can add our table. Our table has two columns which display the product id and the name.

<core:View xmlns:core=“sap.ui.core” xmlns:mvc=“sap.ui.core.mvc”


               <Page title=“Title”>


                          <Table id=“myTable” items=“{/ProductSet}”>



                                                  <Label text=“Product ID”></Label>



                                                  <Label text=“Product Name”></Label>






                                                          <Text text=“{ProductID}”></Text>

                                                          <Text text=“{Name}”></Text>








Deployment of the SAPUI5 application on the SAP NetWeaver Gateway Server

The application is now ready to use. You only need to deploy it to your Gateway System. To do that the System need to be in the system list of your SAP Logon. To deploy the application you need share the project. Right click on your project and select Team –> Share project.


Select “SAPUI5 ABAP Repository” from the repository type list and select “Next”


Select the connection using the “Browse…” button. And click “Next”.


Enter your logon information and click “Next”.


Create a new BSP application for your project and click “Next…”


To deploy the application to the server right click on your project and select “Team” –> “Submit”. Select all files and send them to the server.

Adding a theme using the Theme Designer

In the following we will describe how you can easily export an existing theme of a SAPUI5 application, export it to disk, adapt it to your needs and finally apply it to the sample application that we have developed in the first part of this how to guide.

Go to to start the application.

Select “SAP Blue Crystal” to create a theme based in the “SAP Blue Crystal” Theme. In SAPGUI you can start the Theme Designer using the transaction “/UI5/THEME_DESIGNER”.


Click on “edit” to start creating your theme.

Add an UI5 Application preview by clicking on “UI5 Application Previews”


Search for the Purchase Order Approval application by entering “Purchase Order” in the search field (1). Next, select the Purchase Order Approval application in the center area (2) and start the application by selecting it on the left hand side (3).


If you want, select different colors and images to create your custom look.


Click on “Theme” –>“Export…” to save the theme to your disk.


Create a folder „resources“ inside the WebContent folder of your eclipse project.


Copy the file which are inside the “UI5” folder in the ZIP archive into this resources folder.

Edit the index.html file and edit the name of the theme:


Publish the application again and use your new theme.

To re-deploy the application to the server right click on your project and select “Team” –> “Submit”.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Wegelin
      Michael Wegelin

      Slight typo. It should be:

      var oModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/sap/ZPRODUCT_SRV");

      Author's profile photo Andre Fischer
      Andre Fischer
      Blog Post Author

      Thanks Michael. I fixed it.

      Author's profile photo Former Member
      Former Member

      Andre, Christoph,

      This is a really nice how to guide.

      I'm experiencing some problems with the Theme Designer which is available via in firefox. Instead of displaying a Theme I was getting an error.

      In Chrome it works fine. Keep up the good work.

      Kind Regards,


      Author's profile photo Former Member
      Former Member

      Hi Michael,

      can you please email me more details about the issue. Normally there should be no problem in Firefox.



      Author's profile photo Former Member
      Former Member

      Hi Christoph your email is set to private. So I can't respond in that way.

      But the issue looks like this. I don't have this issue while using the Theme Designer from our local ABAP stack it has to do something with the cloud version.


      My firefox version is 26.0.

      If you require some more info please let me know.

      Kind regards,


      Author's profile photo Former Member
      Former Member

      Hi Michael,

      i forwarded the issue to the responsible person and will come back to you as soon as I have an answer.