Explaining User Interfaces

Watch the video to explore the tools and technologies in SAP UI.

Most SAP Fiori apps are web apps built using SAPUI5 as UI technology. SAPUI5 is based on HTML5 and can be consumed on every device using a browser. The recommended development environment for SAPUI5 is the SAP Business Application Studio.

SAP Fiori also supports native apps. These apps are developed in the native programming language used on a device, allowing a better integration. Apple and SAP are cooperating to develop native apps for iOS using Apple Xcode as the development environment. The open source language Swift, which was originally created by Apple, serves as programming language (see https://swift.org). You can also develop native apps for Android using Java as the programming language in the Android Studio. In contrast to the cooperation with Apple, apps are not shipped by Google or SAP.

Cross platform SAP Fiori apps are developed using "low-level" code like metadata or scripts. The "low-level" code is dynamically interpreted to render a native mobile UI. The SAP Mobile Services provide the SAP Mobile Development Kit (MDK) for creating and interpreting "low-level" code. The MDK is integrated in the SAP Business Application Studio.

With SAPUI5 as a basis for web apps, browsers need a certain minimum release to process all code elements used in HTML5 and JavaScript. Google Chrome and Microsoft Edge both support HTML5 from the beginning. Mozilla Firefox and Apple Safari were updated to support it.

Hypertext Markup Language 5 (HTML5) is a markup language used to structure webpages. In combination with Cascading Style Sheets 3 (CSS3) for the layout, these webpages can be visualized using a browser. For dynamic interactions in webpages, the programming language JavaScript is used. JavaScript code is organized in libraries from which it can be reused in other webpages. jQuery is a well-known library in the area of HTML5 that offers best practices.

SAPUI5 was originally built on top of jQuery and added additional HTML5 browser rendering libraries. All extensions to jQuery aimed to make webpages SAP product standard-compliant in visualizing and handling. Today, most of the original jQuery libraries are replaced by SAP ones.

The original theme of SAPUI5, created in CSS3, was Gold Reflection. Today, SAPUI5 is closely coupled with SAP Fiori design implementing all supported themes in CSS3.

SAPUI5 extensibility options allow a wide range of adaptations:

• Include custom JavaScript, HTML, and CSS in SAPUI5-based pages
• Include custom JavaScript libraries
• Create composite controls from existing SAPUI5 controls
• Create new libraries and controls

Asynchronous JavaScript and XML (AJAX) was first implemented at SAP with Web Dynpro, and it is also used in SAPUI5 to present a native-like handling of web apps. Apps developed with SAPUI5 present a consistent user experience and are responsive across browsers and devices including smartphones, tablets, and desktops. The user interface (UI) controls automatically adapt themselves to the capabilities of each device.

SAPUI5 is the SAP user interface development toolkit for HTML5. Let's try to better understand SAPUI5.

Besides SAPUI5, SAP also provides OpenUI5 as a delivery of the UI development toolkit. The core containing all central functionality and the most commonly used control libraries are identical in both deliveries. Although very closely related, they have their differences:

OpenUI5

OpenUI5 is open source, free to use, released under the Apache 2.0 license. OpenUI5 provides all the important features needed to build feature-rich Web applications. The source is available on https://github.com/SAP/openui5/.

If you find a bug or have an idea for a new feature, you can propose a GitHub issue or a change. Please read the guidelines first: https://github.com/SAP/openui5/blob/master/CONTRIBUTING.md.

For more information, please visit https://openui5.org/.

SAPUI5

SAPUI5 is not a separate SAP product with a separate license. It is integrated in many SAP products. The first one was the AS ABAP 7.4, which included SAPUI5 in the UI technologies component SAP_UI.

The additional libraries in SAPUI5 include more controls on top of OpenUI5, like charts and smart controls. The exact feature range of SAPUI5 also depends on the platform.

For more information, please visit https://ui5.sap.com/.

Technically, you can switch between OpenUI5 and SAPUI5 (provided you have a product where SAPUI5 is included). Please check first, which SAPUI5 version is needed. The version numbers of OpenUI5 and SAPUI5 might differ on patch level (last number).

A library bundles a set of controls and related types to make them consumable by Web applications. There are predefined and standard libraries with many commonly used controls:

• Responsive controls (sap.m)
• Smart controls (sap.ui.comp)
• Core controls (sap.ui.core)
• Layout controls (sap.ui.layout)
• Table control for desktop (sap.ui.table)

The core library (technically, this is the sap.ui.core library) defines a core set of types that can be used in other libraries. Developers can create their own custom UI libraries, making it easy-to-use their own controls alongside predefined controls.

TypeScript is an extension of JavaScript that adds type information to the language. It helps developers catch errors early through type checking and by providing code assist in supporting code editors, for example through code completion and inline documentation. It increases development efficiency.

TypeScript is not much different from JavaScript. In fact, it is a super-set of JavaScript that adds some language features on top. As a simple example, if a variable is specified as number, then it is not possible to assign a string (which would be possible in JavaScript). The same is possible for more complex structures and classes. This type information is used by the code editor to help you writing code:

• Error messages while you code
• Code completion
• Inline documentation
• Easier refactoring and maintenance

Web browsers cannot execute TypeScript. Hence, a transpilation step is needed. It converts the code to JavaScript basically by stripping away all the type information and minimizing the code. This also means that the type safety and everything that TypeScript provides is purely focused on development time, not the runtime of the code. Nevertheless, the original source code can be made available to browsers using "source maps". During debugging, you can see the original TypeScript code you wrote.

SAPUI5 itself is written in JavaScript without any type information. But all the types of the SAPUI5 APIs are declared in separate type definition files. In the development environments provided by SAP, these type definitions are already added as dependencies and the transpilation step is also already set up.

The Model View Controller (MVC) concept separates the tasks in an application into three programmatic elements:

Model

Holds the data of the app and/or connection to the data source organized as OData, JSON, XML, or resource bundle.

View

Holds the user interface consisting of UI5 controls organized in libraries.

Controller

Holds the logic of the application as TypeScript or JavaScript reacting on messages from models and views and updating these.

In SAP Fiori, views are defined using XML. The only SAP Fiori app that uses HTML is the SAP Fiori launchpad, which provides a frame for the XML-based views. Controllers are developed using JavaScript and are either bound to a view or standalone to be used by multiple views. Data binding can be used on the views to connect to data in the models.

SAPUI5 provides updates on a regular basis through maintenance and innovation versions.

Watch the video to get an overview of SAPUI5 versions.

In an on-premise scenario, the SAPUI5 libraries are stored in the SAP_UI software component of an Application Server (AS) ABAP. The customer is responsible to keep this up-to-date.

In a cloud scenario, the SAPUI5 libraries are loaded from the Content Delivery Network (CDN) of SAP. SAPUI5 and OpenUI5 versions are removed from the CDN one year after their end of maintenance. In addition, patches of versions in maintenance, which are older than one year, are removed.

A full list of all SAPUI5 versions including their end of maintenance can be found under https://ui5.sap.com/versionoverview.html.

Which SAPUI5 versions are available on an AS ABAP is provided via https://<host>:<port>/sap/public/bc/ui5_ui5/index.html.

The version a running app is using is visible in the technical information dialog opened via CTRL+ALT+SHIFT+P on Microsoft Windows or via CTRL+ALT+OPTION+P on Apple Mac.

Time to look at SAPUI5 development tools. These include SAP Business Application Studio and Visual Studio Code.

Let's compare the two tools.

Since 2020, SAP provides the SAP Business Application Studio (BAS), back then based on Theia, an open source project by Eclipse. Since 2022, it is based on Code OSS, an open source project by Microsoft. It is provided in the SAP BTP as a service subscription and brings its own runtime. It provides preconfigured environments, so-called Dev Spaces, with preinstalled runtimes and tools tailored for key scenarios. These are based on extensions such as the SAP Fiori tools extension.

Another tool where the SAP Fiori tools extension can be included is Visual Studio (VS) Code. It is developed by Microsoft based on the open source IDE Code OSS. Although not based on Theia, it is fully compatible. SAP offers the SAP Fiori tools beside others free of charge in the extensions marketplace of VS Code. VS Code can be downloaded under https://code.visualstudio.com/.

Developing an SAP Fiori web app means developing SAPUI5 using the SAP Fiori tools extension in SAP BAS or VS Code. A project in the development environments can connect and, therefore, represents an SAP Fiori app delivered and managed in an Application Server (AS) ABAP as Business Server Page (BSP). The BSP serves as a container for SAPUI5 apps, although BSP was originally developed based on HTML4. The tools in the ABAP Workbench (SE80) have not been updated for this new role of BSP. The complexity of SAPUI5 is better handled in a pure web-based environment.

The Cloud Connector is a standalone software that is available free of charge to connect the services in the SAP BTP with the on-premise systems in the customer network. Once installed in the customer network, it establishes a secure SSL Virtual Private Network (VPN) connection to the SAP BTP. Therefore, it is not needed for VS Code. The Cloud Connector is available for download under https://tools.hana.ondemand.com/.

In the ABAP Workbench (SE80), SAPUI5 artifacts can be displayed by opening the surrounding BSP application. This allows some administrative functions like assigning the BSP to a transport request or to another package. It is also possible to view the unformatted source code in the files, but it is not suitable to edit any artifacts.

All HTTP services of an AS ABAP are organized in the HTTP Service Hierarchy Maintenance (SICF). The HTTP service to run an SAPUI5 application can be found under /sap/bc/ui5_ui5 in the Internet Communication Framework (ICF). Applications without an own namespace are organized in the subfolder sap. The name of the service is equal to the name of the BSP application.

The HTTP service to run a BSP application can be found under /sap/bc/bsp. This does also mean that for a BSP housing an SAPUI5 application, the same applies. But these services are inoperable because there is no actual BSP application connected. These services can be ignored and therefore deactivated.

When starting the SAP Business Application Studio (BAS), the Get Started page is shown. It offers buttons to start the development by creating, cloning, importing, or just opening projects. On the left side, side panels can be opened to jump to different parts of the development. The upper ones originate from Code OSS, the lower ones were included by SAP, like the one for SAP Fiori.

The SAP BAS is hosted as a service subscription in a subaccount of the SAP Business Technology Platform (BTP). A subscription is standalone and runs without the need of a runtime environment or any other service. The entitlement, the right to provision and consume a resource, must be available in the subaccount.

From the Service Marketplace in the SAP BTP Cockpit of a subaccount, a service can be created by choosing a service plan. Creating the SAP BAS does not need any additional data and results in a service subscription in Instances and Subscriptions.

For operating the SAP BAS, certain authorizations are needed. These are organized in the following role collections:

Business_Application_Studio_Administrator

Allows administrators to manage (export and delete) user data.

Business_Application_Studio_Developer

Allows developers to load and develop applications.

Business_Application_Studio_Extension_Deployer

Allows extension developers to deploy simple extensions.

Assigning a role collection can be done in the SAP BTP cockpit under Security→Users. Select the user and choose Assign Role Collection on the right. Then, select the role collections you want to assign.

Watch the video to see how to create a dev space in SAP Business Application Studio.

Although the SAP BAS offers several buttons and menu entries to start a tool of the SAP Fiori tools, the most comprehensive list of tools can be accessed in the Command Palette. Choose Help→Show All Commands in the menu or use Control+Shift+P to show and run commands. Entering fiori in the Command Palette provides a list with all SAP Fiori tools to start from including generators and templates.

When starting the Visual Studio Code (VS Code), the Welcome page is shown. It offers buttons to start the development by creating, cloning, importing, or just opening projects. On the left side, side panels can be opened to jump to different parts of the development. The upper ones originate from Code OSS. The lower ones are based on installed extensions, like the one for SAP Fiori.

The Extensions side panel grants access to the extension marketplace for VS Code. Assuming that an internet connection is available, a search for all existing extensions can be performed. You can read the documentation, install or uninstall, enable or disable, change settings, and check for updates. The search field also supports tags. Entering @ in the search field shows a list of possible search criteria like categories.

SAP Fiori tools are an extensions pack consisting of seven extensions. It is recommended to install the whole extension pack with all included extensions in the same version. Other extensions may be valuable to support the development of SAP Fiori like the UI5 Language Assistant.

The VS Code only offers a few buttons and menu entries to start a tool of the SAP Fiori tools directly. The most comprehensive list of tools can be accessed in the Command Palette. Choose Help→Show All Commands in the menu or use Control+Shift+P to show and run commands. Entering fiori in the Command Palette provides a list with all SAP Fiori tools to start from including generators and templates.

The SAP Business Application Studio toolkit extension allows you to connect and access dev spaces of SAP Business Application Studio (BAS) in VS Code. It can be found and installed in the extension marketplace.

The extension adds the SAP BAS Desktop Client as a side panel. For the connection, the URL to access the SAP BAS is needed. The logon uses a Web browser window asking for your credentials and establishing an SSH connection in a new VS Code window. You can access and change the connection details choosing the blue SSH URL at the bottom of the window.

Accessing a dev space in VS Code loads all extensions of the dev space in the local VS Code window. This includes extensions, which are not available in the extension marketplace. In addition, you can add more extensions from the extension marketplace.

You can start and stop dev spaces, open the dev space manager, and connect to multiple dev spaces of different accounts. All settings are saved in the dev spaces but are used locally in VS Code.