SAPexpert/IT
Discover how to integrate the SAP user interface (UI) HTML5 toolkit into SAP NetWeaver Developer Studio for application development. Learn how to implement functions in views and controllers and how to perform data manipulation. You can use this instruction as a base to develop complex applications and explore more UI functionalities.
Key Concept
The SAP user interface (UI) HTML5 toolkit is the latest UI technology offered by SAP for building lightweight non-transactional applications. The toolkit is a client-side HTML5 rendering library that enables you to develop simple and fast high-performing applications based on Model View Controller (MVC) architecture.
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.
Figure 1
Files from the SAP UI HTML5 toolkit after extracting the ZIP file
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 2
HTML source code to test SAP UI5 functionality
Figure 3 shows the results of this application. When you click the Hello World button, the screen in Figure 4 appears.
Figure 3
Application showcasing the SAP UI5 Hello World button
Figure 4
Result of the SAP UI5 function attached to the Hello World button
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.
Note
Code in the second <script></script> section creates a button with the text Hello World. When you click this button, an alert pop-up screen displays.
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).
Figure 5
Add new software to NWDS for SAP UI5
Now select the tools-updatesite folder seen in Figure 1. In the following screen (Figure 6), click the Next button to complete the installation.
Figure 6
SAP UI5 plug-in selection for integration with NWDS
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).
Figure 7
SAP UI5 application development perspective in NWDS
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.
Figure 8
SAPUI5 application creation – project details
Note
In the Options section, select the check box to create an initial view to be embedded into this project automatically. Click the Next button. The view creation wizard (Figure 9) provides you with the option to use a JavaScript-, XML-, or JSON-based view. If you choose JavaScript, the view and controller are implemented in two separate JS files. You have the option to select your development approach from the three available choices, but for the purpose of this article, I only explain the JavaScript option. Enter names in the Project, Folder, and Name fields, select the JavaScript option, and click the Finish button.
Figure 9
Select an implementation paradigm for your SAP UI5 project
In the next screen (Figure 10) you can view your project summary.
Figure 10
SAP UI 5 application creation confirmation
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.
Figure 11
SAP UI5 application structure
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.
Figure 12
SAP UI5 View JavaScript-based implementation
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.
Note
Not all data manipulations should be written into myFunction. You can declare and write any UI-specific content you wish to display there, but if you want to manipulate some or all parts of the UI elements, use the controller JavaScript file to define a data manipulation function.
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).
Figure 13
Add controls in UI5 application view
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!");
Figure 14
Controller function definition in UI5 application
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.
Note
You should write all your controller functions inside the main sap.ui.controller function. If you define custom functions outside the main function, the application cannot refer to your custom functions, leaving your developers wondering why the function is not getting called on an event. This is one the most common errors for not getting the application executed correctly. Refer to Figure 14 to see how this should look.
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).
Figure 15
Application result of the first SAP UI5 application
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).
Figure 16
Event from view is captured and the doIt() function is called from the controller of the UI5 application
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.
Ameya Pimpalgaonkar
Ameya Pimpalgaonkar is a senior SAP architect. He specializes in SAP Netweaver Portal, SAP BPM, BRM, MDM, and SAP Mobile. His interests include UI and front-end technologies, SAPUI5, Responsive Design, and integration of modern technologies with SAP UI. He has also worked on HTML5, CSS3, and jQuery. Ameya is also a certified usability analyst from HFI, USA.
You may contact the author at ameya85@gmail.com.
If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.
Premium
