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

Picture01.png

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

/wp-content/uploads/2013/12/02_338530.png

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

/wp-content/uploads/2013/12/03_338965.png

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.

/wp-content/uploads/2013/12/04_338565.png

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.

/wp-content/uploads/2013/12/05_338574.png

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.

/wp-content/uploads/2013/12/06_338582.png

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”);

sap.ui.getCore().setModel(oModel);

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”

          xmlns=“sap.m”controllerName=“odatagatewayexample.Table”       
          xmlns:html=http://www.w3.org/1999/xhtml>

               <Page title=“Title”>

                  <content>

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

                                  <columns>

                                          <Column>

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

                                          </Column>

                                          <Column>

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

                                          </Column>

                                  </columns>

                                  <items>

                                          <ColumnListItem>

                                                  <cells>

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

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

                                                  </cells>

                                          </ColumnListItem>

                                  </items>

                          </Table>

                  </content>

          </Page>

  </core:View>

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.

/wp-content/uploads/2013/12/09_338583.png

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

/wp-content/uploads/2013/12/10_338584.png

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

/wp-content/uploads/2013/12/11_338587.png

Enter your logon information and click “Next”.

/wp-content/uploads/2013/12/12_338585.png

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

/wp-content/uploads/2013/12/13_338591.png

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 http://themedesigner.hanatrial.ondemand.com/ 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”.

31.PNG

Click on “edit” to start creating your theme.

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

/wp-content/uploads/2013/12/32_338944.png

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).

/wp-content/uploads/2013/12/32_338944.png

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

/wp-content/uploads/2013/12/35_338958.png

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

/wp-content/uploads/2013/12/36_338959.png

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

/wp-content/uploads/2013/12/25_338963.png

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:

/wp-content/uploads/2013/12/26_338964.png

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”.

To report this post you need to login first.

6 Comments

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

  1. Michael Hardenbol

    Andre, Christoph,

    This is a really nice how to guide.

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

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

    Kind Regards,

    Michael

    (0) 
      1. Michael Hardenbol

        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.

        Capture.JPG

        My firefox version is 26.0.

        If you require some more info please let me know.

        Kind regards,

        Michael

        (0) 

Leave a Reply