Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Andre_Fischer
Product and Topic Expert
Product and Topic Expert

In this How-To-Guide christoph.kraemerand andre.fischerwill 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");

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.

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

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

6 Comments