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.

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

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.

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:

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.

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.

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

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.

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.

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.