Explaining User Interfaces

Remember the three dimensions of SAP Fiori. Technology is one of these three dimensions. To deepen your understanding of the dimension, let's explore the main UI technologies used in current SAP applications.

But before going into the details, how about checking what all you remember about the three dimensions of SAP Fiori.

Let's play a mini-game.

Time to look into SAP Fiori UX technologies.

The majority of 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 programming language in the Android Studio. In contrast to the cooperation with Apple, apps are neither shipped by Google nor SAP.

The terms Conversational User Interface (CUI) or Conversational User Experience (CUX) describe digital assistants and chat bots for communicating with enterprise systems. The SAP Conversational Artificial Intelligence (CAI) is a combination of SAP CoPilot and the startup formerly known as Recast.AI. CAI enables users to smoothly interact with SAP software through one unique conversational interface. The skills of conversational agents are built, trained, generated, and connected using the Bot Builder.

Note

SAP Conversational Experience Design (CxD) is the design language with guidelines and tools for designing conversational products. Please check https://experience.sap.com/conversational-ux/.

Here's a short stop for a checkpoint on SAP Fiori UX technologies.

Shall we begin with understanding the web browser support available for processing HTML5?

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.

Caution

Although Microsoft Internet Explorer has officially supported HTML5 since version 8, it is recommended to switch to Microsoft Edge. Microsoft and SAP announced the end of support for Internet Explorer.

And now comes the part where we try to define and describe the role of HTML5, CSS3, JavaScript, and JQuery in web development.

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.

To understand the difference between pure HTML5 with JavaScript and JavaScript libraries like jQuery or SAPUI5, let's examine a small code snippet.

The sample code creates a "Say Hello" button both using JavaScript but in different ways. 

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-like controls (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.

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

Model

View

Controller

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.

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 Application Server 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.

Note

For more information about this topic, see UX400 (Developing UIs with SAPUI5):

https://training.sap.com/course/ux400.

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 pre-configured environments, so-called Dev Spaces, with pre-installed 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 an 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/.

Note

Between 2014 and 2019, SAP provided the SAP Web Integrated Development Environment (IDE) based on Orion, an open source project by Eclipse. Today, it is recommended to use the SAP BAS instead.

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.

Each type of application requires a different development environment, which is called a dev space in SAP BAS.

Ready to see how to create a dev space in SAP BAS?

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.

Perform the steps to access SAP Fiori Tools in SAP Business Application Studio.

When starting the Visual Studio Code (VS Code), 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 are based on installed extensions, like the one for SAP Fiori.

Perform the steps to install SAP Fiori tools - extension pack from the Visual Studio Code (VS Code).

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.