Getting Started with SAP UI HTML5 Toolkit Application Development

  • by Ameya Pimpalgaonkar, Senior SAP Architect
  • September 26, 2013
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 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.

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.

See more by this author


No comments have been submitted on this article. 

Please log in to post a comment.

To learn more about subscription access to premium content, click here.