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: 
ch_loos
Advisor
Advisor

Introduction

In part one of this blog, we installed the SAP UI5 toolkit into SAP NetWeaver Developer Studio, created a first sample application and tested it locally using the web app preview.

In this part, we will deploy and run the application on the SAP NetWeaver Java application server.

SAPUI5 as part of NetWeaver Java

Since EHP1 for SAP NetWeaver 7.3 SP05 (or short 7.31 SP05), the SAP UI5 runtime library are shipped as part of NetWeaver, so you can use it from within your own application. There is no need to include a reference to an external source.

For this guide, we assume that you already have SP05 installed on your system. If not, there are good reasons for upgrading...

Download the latest patch for the SAPUI5 software component from the Service Marketplace and deploy it to your system.

The full name of the SC is "SAPUI5 CLIENT RT AS JAVA 7.31":

Note: NW 7.31 SP05 contains SAP UI5 Version 1.6. The next SP will include UI5 Version 1.8.

Import the UI5 SCA in NWDS

Once you have deployed the SC to your system, you also need to import it into NWDS.

Switch to the "Development Infrastructure" perspective, right-click the development configuration and select "Import SC".

Select the .sca file that you have downloaded from SMP.

After the import process is complete, you should see the SAP UI5 SC appearing in your development configuration:

Creating references

In order to use the SAP UI5 runtime library from our application, we need to create the respective references on both the software component (SC) level and development component (DC) level.

Open the component properties for your software component, switch to the dependencies tab and add a dependency to "UISAPUI5_JAVA".

Next, open the component properties of the Enterprise Application DC which contains the Web Module DC with your UI5 application.

Switch to the Dependencies tab and add a dependency to the DC "ui/five" within the SC UISAPUI5_JAVA.

Adapting the sapui5 source location

The last thing left to do is to adapt the source path to the UI5 libraries in the index.html file.

In case of NetWeaver Java, the UI5 libraries are available under "/sapui5/resources", so change your index.html file accordingly:

 <script src="/sapui5/resources/sap-ui-core.js"
                      id="sap-ui-bootstrap"
                      data-sap-ui-libs="sap.ui.commons"
                      data-sap-ui-theme="sap_goldreflection" >
              </script>

Running the application

Deploy your DCs to the server and open the app in your favorite browser.

Summary

In this two-part series, we have seen how you can easily develop UI5 applications and views in the NetWeaver Developer Studio and use them in other NetWeaver-based applications. Due to the open and flexible nature of SAP UI5, it can be easily integrated into existing development landscapes to create appealing user interfaces.

20 Comments