The SAP user interface (UI) toolkit for HTML5 (or SAP UI5) aims to leverage mobile infrastructure and promote a lean solutions development approach. When I first started implementing SAP UI5, I had doubts about how it could be used in existing portal architecture, how it could replace or enhance an existing application development scenario, and what scope SAP UI5 would have in future portal releases. Despite a lot of material being available on the toolkit, I still couldn’t find a clear starting point for SAP UI5 application development. In an effort to provide you with a smoother, more informed start to your own SAP U15 implementation, I’ve written this article for portal developers, architects, team leads, and managers who want to enhance their user experience and align their UI strategy with SAP’s UI strategy.

In the newer version of SAP NetWeaver Portal, SAP Netweaver Portal 7.4, SAP UI5 applications are used primarily to build custom applications on top of SAP HANA. In addition, components such as Universal Work List (UWL) and system administration are also key areas in which SAP UI5 offers faster application development and a very high performing UI compared with existing UWL and system administration components. Soon SAP UI5 is going to be used extensively in mobility, and companies can easily port existing SAP UI5 applications to mobile devices without much restructuring, which is a major advantage. To get started with the SAP UI HTML5 toolkit, download its evaluation package from the SAP UI5 development center on SDN at https://scn.sap.com/community/developer-center/front-end. You also need SAP NetWeaver Developer Studio (NWDS) 7.3 or 7.31 and jQuery version 1.7 or higher. A good working knowledge of JavaScript and jQuery is beneficial, but is not required. Once you download the evaluation package for the SAP UI5 toolkit and extract the ZIP file, you see the files and folders shown in Figure 1. The file named getting-started-sample.war contains the first demo application, which says Hello World. You do not need NWDS to run this application. Note the sap-ui-core.js file present in the sapui5-static > Resources. You need this JS file to run the application. Copy and paste the code in Figure 2 into a .txt file and save it as an .html file to run the application in a new browser window. Figure 3 shows the results of this application. When you click the Hello World button, the screen in Figure 4 appears. The value of the src attribute of the script tag refers to the sap-ui-core.js file. This file contains jQuery functions defined for SAP UI5 elements.   The code Btn.placeAt(‘content’) places the alert popup inside the div element defined by the ID content. placeAt is a jQuery function defined in the sap-ui-core.js file. This function accepts the instance of sap.ui.core.Element — in this case, an instance of a div element with the ID content that uses another jQuery function createUIArea() to create a UI area to display the popup.

Integrate the SAP UI5 Plug-In into NWDS

The SAP UI5 toolkit provides you with a plug-in that enables you to develop an SAP UI5 application project in NWDS. Before you go any further, make sure your download contains a folder named tools-updatesite. If you cannot see this folder, then you either have downloaded a beta version of SAP UI5 toolkit or your download is corrupt. Download a fresh copy of the SAP UI5 evaluation tool from SDN. Once you have confirmed that you have the tools-updatesite folder, launch NWDS and navigate to Help > Install new software. To add the tools-updatesite folder to this window, click the Add… button (Figure 5). Now select the tools-updatesite folder seen in Figure 1. In the following screen (Figure 6), click the Next button to complete the installation. This action integrates the SAP UI5 plug-in with NWDS and creates two new application development perspectives. To confirm the SAP UI5 plug-in is properly integrated into NWDS, navigate to File > New > Others. In the next screen, you should see the options for creating an Application Project in NWDS (Figure 7).

SAP UI5 Application Development with Model View Controller (MVC)

The SAP UI5 toolkit is an HTML5 rendering library for the client side. Its major advantage is that the UI5 toolkit also supports the MVC-based application development approach. SAP NetWeaver Portal developers are well versed in MVC-based developments and that is what makes SAP UI5 a preferred choice for portal developers. Similar to Web Dynpro for Java, the SAP UI5 toolkit separates presentation and business logic by creating two separate components for view and controller. You can implement views and controllers in XML, JSON, or JavaScript format. Begin by launching NWDS. From the SAP UI5 Application Development Perspective in the New file menu (Figure 7), select Application Project. Click the Next button. In the New Application Project window that appears, (Figure 8) enter the project name. At this time you have the option to create an SAP UI5 project targeted specifically at either the desktop user or the mobile user.   In the next screen (Figure 10) you can view your project summary. Review the summary of the project in case you wish to change anything. Figure 10 shows the name of the controller to be created. If everything looks correct, click the Finish button to complete the project creation. Figure 11 shows the structure of the project I created with the name UI5_first_app. Note the files myview.controller.js and myview.view.js. I show you how to use the controller and view files in the View Implementation section. Click the myview.view.js file in the project structure (Figure 11). In the next screen (Figure 12) you can see the standard implementation of the view JS file.

View Implementation

Next add some code into your view implementation. First, define a function to create content. myFunction : function() { }, This code creates an anonymous function with the name myFunction. You can use this function to write whatever UI-specific functionality you want. To make this function accept data from your controller, alter the function code by adding oController: myFunction : function(oController) { }, Add this code to enable the function to accept data returned by the controller. Now write a variable array to accept data returned by the controller: Var uiControl = []; Let us now see how to create a button using UI5 element library. var oButton = new sap.ui.commons.Button ({ id : this .createId("MyButton"), text : "Hello JS View" }); With sap.ui.commons.Button, you can define button attributes such as the button ID and display text. To show how to capture events in SAP UI5 applications, pass arguments to the array originally created to accept data from the controller and display when a particular event occurs (Figure 13). This process has in two steps. First, refer to controller function with oController.<function name>. Second, trigger this function on a push event with uiControl.push: uiControl.push(oButton.attachPress(oController.doIt)); return uiControl; doIt is a function defined in the controller that returns data manipulation to be displayed at the press of a button.

Controller Implementation

Open the myview.controller.js file and define a doIt function. This function is executed from a view to show data flow between the view and controller. It is important to understand MVC-based development in SAP UI5. You already know how to define a function by using this code: doIt : function () { } To set this function to be called when an event occurs,  add oEvent: doIt : function (oEvent) { } After you add this code to the myview.controller.js file, whenever an event is triggered in the view, this function is called. Assign an alert and fetch ID to the button and append some text to the ID to see how the controller works here.  Using Figure 14 as a reference, enter this code: alert(oEvent.getSource().getId() + " does it!"); This initially gets the source of the event (i.e., a button) and then gets the ID of the button. Adding does it! at the end displays this text after the button ID in an alert window.

View the Results

Now run the project to see the results. In the project explorer pane of NWDS, right-click the name of the project. Choose Run As from the list of options in the menu and then select Web App Preview. This opens a new browser window and renders the application in the browser (Figure 15). As shown in Figure 15, no event has been called yet.  Therefore, only view data is rendered. Now, click the Hello JS View button to see the controller in action. After you click the button, the controller function doIt is executed and the ID of the button MyButton displays along with appended text (Figure 16).

What’s Next?

How can you connect to the SAP back end and develop some useful applications with real data? You need the following infrastructure components to develop these applications:

• SAP NetWeaver Gateway
• Windows Server Edition 8 (minimum)

Both of these products are available as trial versions on SDN and can be downloaded at the NetWeaver Gateway developer center: https://scn.sap.com/community/developer-center/netweaver-gateway. Data communication between the SAP UI5 application and the SAP systems is done via a protocol called OData. OData can retrieve data from different silos and consolidate it to be consumed as an OData webservice or OData Service. For more on how to write OData service, read this blog: https://scn.sap.com/people/dj.adams/blog/2012/02/13/sapui5-says-hello-odata-to-netweaver-gateway.