Anthony Cecchini is the President and CTO of Information Technology Partners (ITP), an ERP technology consulting company headquartered now in Virginia, with offices in Vienna. ITP offers comprehensive planning, resource allocation, implementation, upgrade, and training assistance to companies. Anthony has over 20 years of experience in SAP business process analysis and SAP systems integration. ITP is an Appian and Pegasystems iBPM Low-code and RPA Value Added Service Partner. You can reach him at [email protected].
We have been discussing the SAP back-end for a few blogs now. I want to switch gears and talk a little bit about UI5 and the front-end User Experience (UX). So what is UI5? What’s the difference between OpenUI5 and SAPUI5?
OpenUI5 and SAPUI5 Explained 
OpenUI5 is an open source JavaScript UI library that you can use to build responsive web applications. SAP maintains the OpenUI5 code bank and makes it available to any user under the Apache 2.0 license. SAPUI5 is the proprietary sibling of OpenUI5 that SAP includes in packages like SAP HANA and SAP Cloud Platform. The main difference is that OpenUI5 is free to anyone and SAPUI5 licenses must be purchased from SAP. SAPUI5 has additional libraries and nice add-ons like smart controls that automatically configure OData annotations. Open UI5 and SAPUI5 are compatible, but the version and patch numbers are different. In general, you can easily switch back and forth between the two platforms. I’ll be using OpenUI for this blog, but everything covered can be done using either Open UI5 or SAPUI5.
So before we move on, let me see if I can ground some of the ABAP developers that might be reading this. First, who remembers this book?
OK, your OLD!! This book was the documentation of canned SAP Controls like the ALV Control, the Table Control, etc…etc. They were classes that had formal parameters to quickly instantiate and render a control without needing to code it. Then of course SAP introduced WebDynpro for portal rendering. Well, this may be an over-simplification, but this is the JavaScript UI5 library more or less.
Let’s take a look at OpenUI5. You can download the code for OpenUI5 on GitHub or start with the latest stable release from OpenUI5.org (see below).
Another option is to use the OpenUI5 Content Deliver Network (CDN) to explore the library. The CDN is a network of distributed servers that lets you use OpenUI5 without downloading. If you go to the openUI5.org home page a scroll a bit, you will see the Plnkr tool. It allows you to choose HTML, XML, or JavaScript as a project, then code and see the results instantly!
Coding Hello World
OK then! Lets take the below HTML code and plug it in and see what renders on the right.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="https://openui5.hana.ondemand.com/1.28.15/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"></script>
<script>
var btn = new sap.m.Button({
text:'Hello World',
press: function(){
alert("Hello");
}
}).placeAt('content');
</script>
</head>
<body id="content" class="sapUiBody">
</body>
OK, it should look like the screen shot below…. What happens when you click the button?
You should get a pop up like the one below…
You can play around with the code and the tool will render your changes instantly. If you need a refresher, W3Schools has several excellent free tutorials that only take a few minutes.
Explore Demos & Download UI5 Code
Let’s look at some examples on the OpenUI5 website. This webpage changes slightly as new versions are released, so don’t worry if your screen looks different. Spend a few minutes browsing the control and action libraries, then click on Demo Apps from the menu on the top of the page.
Notice that most of the Demo Apps give you options to View Documentation, Run Integration Tests, or Run Unit Tests. There is an active OpenUI5 developer community constantly working to improve the platform. Most of the code for these apps is available in GitHub and you are welcome to download, beta test, and modify whatever you need. Let’s look closer at the Shopping Cart Demo.
Run the demo. You will see in the screen shot below shows the Shopping Cart rendering on a Google Chrome Browser. Any app built in OpenUI5 is responsive and will render differently on various browsers and devices. For example, here is the same screen in Microsoft Internet Explorer. Notice that the categories are not listed by default in Explorer.
Now page back to the main Demo App page and click on “Run Integration Tests (OPA5) under “Shopping Cart”. The integration tests will start to run automatically. After the tests run, you’ll see the results page. You can review the results by modules or other filters.
Now back to the Demo Apps page and click “Run Integration Tests (Gherkin). The screen changes rapidly as the tests are executed, but if you watch closely you’ll see that the tests are automatically run on different devices and browser screens.
Clicking on Unit Tests runs automated unit tests and shows the results in the same manner as the Integration Tests.
Finally lets take a deeper dive and look at a control itself. Since we have been working with the Shopping Cart, we’ll start with the sap.m Control. Click on sap.m in the Shopping Cart frame or click on “API Reference” on the menu at the top of the Demo Apps page.
The Control Library gives you all the information you might want on fields and methods. If you scroll down the Methods frame, you see sample code snippets. The Namespaces and Classes column is clickable, so click on the top item: sap.m.ActionListItem.
One of the most helpful sections only appears in some overviews. Take a look at sap.m.BusyDialog using the menu on the left. If you scroll down, you will see Usage Information with clear instructions about when and when not to use.
Summary
This blog was just a brief sample of OpenUI5 and SAPUI5. You’ll find many helpful tools on OpenUI5.org. The Getting Started: Setup and Tutorial section includes prerequisite knowledge, a helpful learning path, and over 30 walkthroughs that are very useful. The Getting Started pages have step-by-step instructions for downloading and troubleshooting.
You’ll also want to look through the Essentials section, particularly at the Bootstrapping: Loading and Initializing and the Model View Controller. The Developing Apps section offers several App Templates that are free for download and useful tips for structuring and architectural layouts. Every developer will find useful information on the Coding Issues to Avoid in JavaScript, CSS Styling, and Performance Issues. Finally, you’ll find more help in the OpenUI5 community on GitHub, BootStrap, and multiple web blogs and forums.
