Skip to Content

What is SAP UI5?

SAP UI5 (or “UI Development Toolkit for HTML5“, if you prefer calling it by its official name), is SAP’s new HTML5 UI library and client-side MVC framework for building light-weight web UIs. While very flexible and open, it also supports all SAP product standards.

It is also used for new applications developed by SAP (e.g. SAP HCM).

The toolset is based on Eclipse, and can therefore be installed into the SAP NetWeaver Developer Studio (NWDS).

In this blog, I’ll walk you through the exact steps, from the initial download to the first UI5 application.

Downloading the UI toolkit

First, make sure you have at SAP NetWeaver Developer Studio 7.3 or higher installed. The UI5 tools will not work with older NWDS versions.

The toolset can be downloaded from the SAP Service Marketplace (SMP).

Go to https://service.sap.com -> SAP Support Portal -> SAP Software Download Center -> Support Packages and Patches -> A – Z index -> N -> UI ADD-ON FOR SAP NETWEAVER -> UI ADD-ON 1.0 FOR NW 7.03 -> Support Package Stack Download. The file that you need is at the bottom of the list: SAPUI5 TOOLS IDE PLUGIN 1.00. Make sure you pick the latest version (currently this is SPS 02).

SMP.png

Once the download is finished, extract the archive content into a local directory.

Installing the plugin

In NWDS, go to Help – Install New Software…

Add a new Local Update Site (named “UI5 Tools”) and point it to the folder where you have extracted the files before.

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

Wait for the installation to finish and then restart NWDS.

Creating a first application

Since NWDS is using Development Components instead of “plain” Eclipse projects, you can’t use the standard “New UI5 Application” wizard directly.

Instead, create a new Development Component of type “Web Module”.

Some small changes to the project are needed in order to prepare it for UI5. For a regular UI5 application these would normally be done by the New Project wizard, but for a DC project they need to be done manually.

Project Nature

Edit the .project file in the root folder of the project and add the UI5 nature:

...
<natures>
...
<nature>com.sap.ide.ui5.app.plugin.webappnature</nature>
</natures>
...

JavaScript libraries

Next, add the JavaScript libraries to the project settings. This is needed for auto-completion while writing JavaScript code.

Open the project properties, and go to JavaScript – Libraries. If you don’t see a “JavaScript” entry in the project settings, you might have to turn on “the JavaScript Toolkit” facet first under “Project Facets”. Switch to the “Libraries” tab and click on “Add JavaScript Library”.

Select the SAP UI5 library and finish the wizard.

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

Java Build path

To enable the local web app preview, we need to add the SAP UI5 libraries to the project build path.

Open the projects properties and add the SAPUI5 Core and Server Side Libraries via the “Add Library…”button.

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

web.xml

Add the following content to the web.xml of your Web Module project.

(Alternatively, you can also copy the web.xml from an application created by the UI5 wizard – see below).

<!-- ============================================================== -->
  <!-- UI5 resource servlet used to handle application resources -->
  <!-- ============================================================== -->
  <servlet>
  <display-name>ResourceServlet</display-name>
  <servlet-name>ResourceServlet</servlet-name>
  <servlet-class>com.sap.ui5.resource.ResourceServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>ResourceServlet</servlet-name>
  <url-pattern>/resources/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
  <servlet-name>ResourceServlet</servlet-name>
  <url-pattern>/test-resources/*</url-pattern>
  </servlet-mapping>
  <!-- BEGIN: DEV MODE -->
  <context-param>
  <param-name>com.sap.ui5.resource.DEV_MODE</param-name>
  <param-value>true</param-value>
  </context-param>
  <!-- END: DEV MODE -->
  <!-- ============================================================== -->
  <!-- Cache Control Filter to prevent caching of any resource -->
  <!-- ============================================================== -->
  <filter>
  <display-name>CacheControlFilter</display-name>
  <filter-name>CacheControlFilter</filter-name>
  <filter-class>com.sap.ui5.resource.CacheControlFilter</filter-class>
  </filter>
  <filter-mapping>
  <filter-name>CacheControlFilter</filter-name>
  <url-pattern>*.html</url-pattern>
  </filter-mapping>
  <filter-mapping>
  <filter-name>CacheControlFilter</filter-name>
  <url-pattern>*.js</url-pattern>
  </filter-mapping>
  <filter-mapping>
  <filter-name>CacheControlFilter</filter-name>
  <url-pattern>*.xml</url-pattern>
  </filter-mapping>
  <filter-mapping>
  <filter-name>CacheControlFilter</filter-name>
  <url-pattern>*.json</url-pattern>
  </filter-mapping>
  <filter-mapping>
  <filter-name>CacheControlFilter</filter-name>
  <url-pattern>*.css</url-pattern>
  </filter-mapping>
  <!-- ============================================================== -->
  <!-- UI5 proxy servlet -->
  <!-- ============================================================== -->
  <servlet>
  <servlet-name>SimpleProxyServlet</servlet-name>
  <servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>SimpleProxyServlet</servlet-name>
  <url-pattern>/proxy/*</url-pattern>
  </servlet-mapping>

Creating the view

You are now ready to create the actual application content. The easiest way to get started is create a new UI5 application using the wizard and then copy the content into your Web Module DC.

Go to File – New – Other… and select “SAP UI5 Application Development” – Application Project.

Enter a project name and a view name. Once the project is created, open it in the Project Explorer and open the WebContent folder.

You will find an index.html and a sub-folder for the application.

Copy the index.html and the whole application folder into the WebContent folder of your Web Model DC project.

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

Now let’s create some content in the view. Open the *.view.js file and fill the createContent function with the following code:

createContent : function(oController) {
   var button = new sap.ui.commons.Button({ "text": "my button" });
   return button;
}

Check out the code completion feature:

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

Running the app

Once done, you can test the application locally. Right-click on the index.html and select Run As – Web App Preview.

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

Summary

The SAP UI5 Toolkit works well with the SAP NetWeaver Developer Studio. Only small adjustments are needed due to the Java development component model.

In part 2, we will prepare the application for running on SAP NetWeaver Java.

To report this post you need to login first.

17 Comments

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

  1. Indira Priyadarshini

    Hi Christian,

     

    Very useful blog.

    I just have one question-  after installing UI5 in NWDS, can we deploy the application(developed using UI5) in CE server?

     

    Thanks,

    Priya

    (0) 
  2. Mukesh Adwani

    Hi Christian,

    very useful blog.

    I am trying to understand the architecture options of UI5, I mean, do I need to definitely use SAP NW Gateway or I can deploy the UI5 applications on Portal and make webservice calls to ECC. Can you please guide me to the right place where I can get the basic information about UI5.

    many thanks!

    Regards

    Mukesh

    (0) 
      1. Mukesh Adwani

        Hi Christian,

        Thanks for the link. I have gone through it, have installed Juno Eclipse and most of the add ons. I have been able to locally run the “button” app. But when I tried to install the add on for ABAP connection “SAPBASISAIE00_6-10011741” on Ecplise, I get the below error.

        Will you be able to guide me to some resource which gives me further understanding of developing HR applications using UI5.

         

        Missing requirement: ABAP Communication Framework 2.0.2 (com.sap.adt.fwk.ci.feature.group 2.0.2) requires ‘org.eclipse.emf.workspace.feature.group [1.5.0,2.0.0)’ but it could not be found

         

        I am doing all this analysis as I need to kick off a project and I am trying to evaluate if I should use UI5 or a 3rd party AJAX library (e.g. Dojo). will you be able to suggest.

         

        Regards

        Mukesh

        (0) 
  3. Jun Wu

    Hi Christian,

    struggled whole day, not able to install it in my nwds 7.31sp8

    i have downloaded UI5TOOL07P_2-10011992

     

    session context was:(profile=NWDSProfile, phase=org.eclipse.equinox.internal.provisional.p2.engine.phases.Install, operand=null –> [R]com.sap.ca.scfld.md 1.18.6, action=org.eclipse.equinox.internal.p2.touchpoint.eclipse.actions.InstallBundleAction).

     

    can you give me some idea?

    it tries to connection nwds 7.31  update website, what is that for?

    https://nwds.sap.com/swdc/downloads/updates/netweaver/nwds/nw/731/

    Best regards,

    Jun

    (0) 
  4. Christian Loos Post author

    I just tried this again with NWDS 7.31 SP11 PAT002 and UI5TOOL07_0-10011992.ZIP and the installation worked fine for me. I can see all the libraries and the New “Application Project” wizard.

    However when I run the new wizard I get an error. If you create the application manually (html/js) everything works including code completion.

    (0) 
  5. Merve Gul

    Hi,

     

    I am very newbee on SAP UI5 development platform and trying to learn this platform on both Eclipse and SAP Netweaver sides. But I have a simple question about usage constraints of this platform.

     

    In SAP UI5 we are coding on Eclipse and transfer this application to SAP Netweaver as a BSP application. And also we can write web applications as a BSP on SAP Netweaver with JS libraries and HTML codes without any need of Eclipse.

     

    What is the advantage coding on Eclipse and transfering as a BSP or coding direclty BSP on SAP Netweaver.



    Any answer would be appreciated.

    Merve.   

    (0) 
  6. Ranjit Rao

    Hi Chris,

     

    Is there any url from where I can get my “Install new software” to set up SAPUI5 in NWDS.

    Since I don’t have a market place ID. I Cannot download the plugin. Please suggest

    (0) 
  7. Pankaj valecha

    Hi Christian,

     

    I followed all your steps and successfully run the application locally. I want to deploy this web module on my SAP portal server but not able to deploy it as deploy option is disabled.

     

    Please help me with this issue.

     

    Regards,

    Pankaj Valecha

    (0) 
  8. Kishore Aripirala

    Hi Chris,

     

    Thank you for the detailed blog…

    I have a basic doubt… For whom this SAPUI5 is intended for?? I’m an abaper… looks like this is not for the abapers.. as it needs more of HTML, Javascript and CSS…

     

    Please let me know which one is best suitable to learn for an abaper???

     

    Thank you.

    (0) 

Leave a Reply