Skip to Content

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

UI5patch.png

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

/wp-content/uploads/2013/01/import_sc_174309.png

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:

/wp-content/uploads/2013/01/sc_174374.png

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

/wp-content/uploads/2013/01/dependency_174375.png

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.

/wp-content/uploads/2013/01/dc_dependency_174376.png

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.

/wp-content/uploads/2013/01/app_174377.png

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.

To report this post you need to login first.

17 Comments

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

  1. Jan Penninkhof

    Hi Christian,

    Thanks for the blog and showing the possibility of using UI5 from the software component repository.

    I’m currently also contemplating whether I would like to use the SAP UI5 version that is coming from the component repository or to include it in (an external library) in my projects. I have the feeling that if I include it in my projects, I have more control over the versions that are used. I may be able to run a newer version of UI5 than the one shipped and will have more guarantees that my application still works after an SP upgrade.

    What is your take on this. Go the packaged way, or include it in your project?

    Cheers,

    Jan

    (0) 
    1. Christian Loos Post author

      Hi Jan,

      if you include the UI5 library into your application, you might end up with different UI5 versions spread across your applications, which you then have to maintain/patch separately.

      With the pre-packaged library there is only one single SCA to patch, without having to touch your applications.

      Of course you are bound to the UI5 version of your respective SP level.

      So it really depends on whether you absolutely need the features of the latest UI5 release.

      Regards,

      Christian

      (0) 
  2. Jocelyn Dart

    Thanks Christian – what I really like about this blog is it shows me all those little dependencies (in part 1) that can sometimes go wrong… especially when people are cutting and pasting.  I actually had a minor problem with the web preview and was able to fix it by re-checking the libraries on the build path.  This is great for those of us who spend significantly more time than we would like resolving obscure bugs because a not-so-obvious dependency is missing or faulty.

    A very clear description of what is necessary for operation separate from the building of the user interface itself.

    Thanks again.

    (0) 
  3. Karl Andal

    Hi Christian,

    I try to deploy my first SAPUI5 application and I followed your blog, unfortunately I got error message “GRANT LIST DOES NOT ALLOW FOR REFERENCE” when I add DC Dependency(ui/five to my DC). Do you have any idea what can be wrong?

    Many Thanks

    (0) 
  4. Karl Andal

    Hi Christian, I got the error message “GRANT LIST DOES NOT ALLOW FOR REFERENCE” when I tried to add depencies in my DC (ui/five). Do you have any idea how I can fix it. (permission in uf/five is not an option).

    Many thanks

    (0) 
    1. Christian Loos Post author

      Hi Karl,

      are you using SP05? It could be that the UI5 SC is only open for external reference from SP06 onwards.

      Regards,

      Christian

      (0) 
        1. Christian Loos Post author

          Hi Karl,

          download the latest UISAPUI5 SC for 7.31 SP07 (Patch 4) from SMP – search for patches and enter “UISAPUI5*” as search term.

          Then import into your NWDS.

          This should have the permissions enabled.

          Regards,

          Christian

          (0) 
  5. Michael Healey

    Dear Christian.

    This has been a very informative and useful blog. I have 3 questions that I hope you may be able to answer:

    1) Once the .ear file has been deployed to the SAPj2EE of my NW 7.3 SP09 Portal, how can I create an iView wrapper for the newly deployed .ear file

    2) Have you managed to create a portal application (i.e. creates portal.xml) that uses UI5 for presentation layer

    3) Is there a place for NWDS 7.3 (stuck at eclipse version 3.5) vs Eclipse Indigo / Juno with plugins.

    Any advice greatly appreciated

    Mike

    (0) 
  6. Michael Healey

    A very clear and concise blog to demonstrate how to achieve a simple UI5 application in NWDS.

    Given that this has been a core Portal development tool for a number of years, it is good to finally see an example of UI5 in action on a key SAP tool rather than developing in Eclipse,

    All Portal code at my current client is packaged in individual SC + DC per development so the UI5 application project as described in Eclipse is a deviation from current strategy.

    (0) 
  7. Lukasz Zemelka

    Hello Christian,

    Are open UI5 libraries available at NW serwer ?

    Locally developed app with open Ui5 resources doesnt work with:

    src=”/sap/public/bc/ui5_ui5/resources/sap-ui-cachebuster/sap-ui-core.js”

    I am right that UI5 and open UI5 are so similar that they can be used interchangeably, and you can switch between them without changes in the application?

    At NW where UI5 is stored Its looks like no resources in sap/ui/commons

    BR

    Lucas

    (0) 
      1. Christian Schuff

        Well, that’s what I thought 🙂 It doesn’t appear to use my web.xml for whatever reason. I also found that the SAPUI5 Web Module inside MII hasn’t activated the AppCacheBusterFilter. I’m totally stuck here :/

        (0) 

Leave a Reply