1.2    Architecture and Integration

In this section, we’ll discuss the high-level architecture that all SAP Fiori apps follow. Figure 1.1 shows different components of the architecture.

From this bird’s-eye view, we see that the SAP Fiori system landscape is comprised of a client/browser layer, reverse proxy, ABAP servers, SAP HANA XS, and a back-end database. Each layer has a clearly defined purpose and is bundled with components that help fulfill that purpose. Let’s look at each layer:

• Client/browser
  The client layer is where the actual consumption of SAP Fiori apps takes place. SAP Fiori launchpad is the entry point for all SAP Fiori apps on mobile, desktop, or tablet (see Section 1.2.1).
• Reverse proxy
  A reverse proxy is a type of proxy server that typically sits behind the firewall in a private network and directs client requests to the appropriate back-end server. The reverse proxy provides an additional level of security and control to ensure the smooth flow of network traffic between clients and servers. SAP recommends using SAP Web Dispatcher as a reverse proxy server (see Section 1.2.2). SAP Web Dispatcher is only required as a reverse proxy for analytical and fact sheet apps.
• ABAP server
  The ABAP front-end server is recommended for all app types. The ABAP front-end server contains the UI layer and infrastructure components, as well as SAP Gateway with OData enablement. The ABAP back-end server contains the back-end business logic and search models for fact sheet apps.
• SAP HANA XS
  SAP HANA XS is only required for analytical apps; it replicates data from the back-end server and remodels it using virtual data models (VDMs).
• Back-end server
  The back-end database can be any database for transactional apps or an SAP HANA database for fact sheet and analytical apps.

Figure 1.1    SAP Fiori Architecture

Now that you have a general idea of SAP Fiori’s architecture and system landscape, we’ll look more closely at some of the key architectural features and explore how the different layers of SAP Fiori communicate with one another.

1.2.1    SAP Fiori Launchpad

SAP Fiori launchpad is the entry point for all SAP Fiori applications. It’s a role-based, personalized platform with real-time capabilities. The beauty of SAP Fiori launchpad is that it’s designed according to a simple and intuitive user experience and doesn’t require a lot of training.

Figure 1.2 shows the SAP Fiori 2.0 launchpad homepage, now called the viewport, which displays variety of apps; a new panoramic UI with notification and ME areas comes with the new experience. Users can personalize the viewport to keep track of their daily tasks while still keeping track of activities happening in other areas.

Figure 1.2    SAP Fiori Launchpad Homepage

With SAP Fiori launchpad, users can personalize the homepage/viewport views by adding or removing apps or by bundling them into groups. Because apps are controlled by roles, users will have access to only those apps or groups to which content administrators assign them.

When you open the launchpad for the first time, you should see the tiles clustered in groups 1, and if you have more than one group assigned to you, then you’ll see all the groups in the anchor bar 2 at the top of the page. Click a group in the dropdown list in the anchor bar 3 to jump directly to that group.

On the top left of the home page is the ME area 4; clicking the icon slides the ME area into the view. The ME area provides an options bar and lists the most recently used tiles. On the top right of the home page is the notifications area 5, which helps users keep track of important events without distracting them from their current tasks.

Search 6 is another key capability of SAP Fiori launchpad. With this feature, users can view recent searches, recent apps used, and any apps found. In addition, users can open a fact sheet app directly. For example, a user can search for a sales order number in SAP Fiori launchpad and open the Sales Order fact sheet app to get answers immediately. In Chapter 5, we’ll discuss the implementation of search functionality in fact sheet apps.

SAP Fiori 2.0 now supports the new, award-winning Belize theme; this theme replaces the old Blue Crystal theme. Users can also create their own custom themes using UI Theme Designer, and apply them to SAP Fiori launchpad 7. In Appendix B, we’ll walk through the step-by-step instructions on how to create a custom theme using this tool.

Now, let’s explore the ME area. In the options bar of the ME area, you’ll see App Finder, Settings, and Edit Home Page (see Figure 1.3).

Figure 1.3    ME Area

1. App Finder is a convenient tool for finding apps that aren’t on your home page yet and to add them to the home page. In the catalogs of the App Finder view, you can find apps assigned to your role (see Figure 1.4).
   

   Figure 1.4    App Finder

2. Select Settings to set options to display your user account information, change the theme, or change language and user settings. User Profiling (see Figure 1.5) lets you record some of your activities to provide personalized results for future searches, and the Default values option (see Figure 1.5) option lets you define and launch apps with a set of specific default values.
3. The Edit home page option lets you customize your launchpad—by adding or remove or moving tiles/groups.

From the home page of the SAP Fiori Launchpad click to open the notifications area (see Figure 1.6). This new option in SAP Fiori 2.0 notifies users about important things like approving workflow items from My Inbox; in fact, you can approve or reject workflows right from the notifications area.

Figure 1.5    ME Area—Settings

Figure 1.6    Notifications Area

Notifications

SAP Fiori Notifications integration is currently possible only with SAP S/4HANA and not yet available with SAP Business Suite.

Another important aspect of SAP Fiori launchpad is its responsiveness. SAP Fiori launchpad enables cross-device UX for users. This feature makes it so that visual design adapts automatically to the respective screen size, be it for desktop, mobile phones, or tablets. SAP provides a native app for SAP Fiori launchpad called SAP Fiori Client that enables this functionality (for more information on SAP Fiori Client, see Appendix A).

Next, let’s discuss the different deployment options for SAP Fiori launchpad.

Deployment Options

There are several deployment options available to deploy SAP Fiori launchpad. Depending on your existing landscape and the types of apps you want to implement, you can decide which deployment option is right for you.

As shown in Figure 1.7, you can deploy SAP Fiori launchpad on-premise, in the cloud, or in a hybrid model.

• In an on-premise deployment, a customer buys software from SAP and manages the servers on their own. There are two options:
  • ABAP front-end server in combination with SAP Gateway
    This is the traditional implementation and is recommended for customers without an SAP Enterprise Portal implementation. It’s the only platform that supports all SAP Fiori app types (transactional, fact sheet, and analytical apps).
  • SAP Enterprise Portal
    This deployment is recommended for customers who would want to reuse their existing SAP Enterprise Portal and run SAP Fiori launchpad. Technically, this is just another framework page that enables the use of SAP Fiori launchpad.
• In a cloud deployment, customers rent infrastructure and business software from SAP. Customers can either share a public cloud environment operated by SAP or get a private/managed cloud service (i.e., there’s only one customer per cloud; this is managed by SAP as well) or get an enterprise cloud (again, only one customer per cloud, but the customer runs and manages the cloud).
  • SAP Cloud Platform
    You can now run SAP Fiori launchpad on SAP Cloud Platform in the software-as-a-service (SaaS) model or on-premise.
• In a hybrid deployment, customers run certain parts of their business on their own servers and use additional services from a cloud provider. This kind of deployment requires powerful integration between on-premise systems and cloud services.

Figure 1.7    SAP Fiori Launchpad Deployments

More Information

For more information on the different SAP Fiori launchpad deployments and on how to implement SAP Fiori launchpad, check out the SAP PRESS E-Bite Implementing SAP Fiori Launchpad, by Tamas Szirtes and Aviad Rivlin, available at www.sap-press.com/3944.

Features

In this section, we’ll walk you through some of the basic features in SAP Fiori launchpad. The following steps walk through the different features and uses of SAP Fiori launchpad. To begin, let’s look at adding to, removing from, and personalizing the SAP Fiori Launchpad viewport.

1. Launch SAP Fiori launchpad by entering the following URL in a browser, where <host> is the server name or the IP address of the server, and the <port> is the port number: https://<host>:<port>/sap/bc/ui5 ui5/ui2/ushell/shells/abap/FioriLaunchpad.html, for example, https://s4hana.nineboards.com:8001/sap/bc/ui5/ui2/ushell/shells/abap/FioriLaunchpad.html.

   Note

   You can launch the SAP Fiori Launchpad by running Transaction /UI2/FLP from the AS ABAP front-end server.

2. Login to SAP Fiori launchpad, navigate to the ME area by clicking , and then click Edit Home Page (see Figure 1.8).
   

   Figure 1.8    Edit Home Page

3. To remove a tile, click X in the upper-right corner of the tile.
4. The tile catalog is where you’ll see all the SAP Fiori apps that you have access to. To add a tile from the tile catalog, click + (see Figure 1.9).
   

   Figure 1.9    Add or Remove Tiles

5. Click + on the app and then select the group into which you want to add the app. Click OK (see Figure 1.10).
   

   Figure 1.10    Add Tile from Catalog

6. Click to go back to the workspace area.

Next, let’s create a new group and organize the tiles. Proceed with the following steps:

1. From the viewport, click Add Group (see Figure 1.11).
   

   Figure 1.11    Add Group

2. Enter a group name and click Done (see Figure 1.12).
   

   Figure 1.12    Group Name

3. Users can add tiles/apps by dragging and dropping apps from another group (see Figure 1.13) or can add a new app from the catalog by clicking + (see Figure 1.12).

Figure 1.13    Drag and Drop

You can also search for apps or business objects. To do so, proceed as follows:

1. Enter the search term in the search field and click (see Figure 1.14).
   

   Figure 1.14    Search

2. Check the search results for apps and business objects, as shown in Figure 1.15.

Figure 1.15    Search Output

Users can personalize SAP Fiori launchpad by changing the theme. To do so, perform the following steps:

1. Click to open the ME area and select Settings (see Figure 1.16).
2. In the pop-up window, click Appearance (see Figure 1.16).
   

   Figure 1.16    Theme Settings

3. Select a theme and click Save (see Figure 1.17).

Figure 1.17    Select Theme

Keyboard Shortcuts

The following keyboard shortcuts can help you more easily navigate SAP Fiori launchpad:

• (Alt) + (C)
  Open the tile catalog.
• (Alt) + (H)
  Return to the viewport.
• (Alt) + (S)
  Search for or filter information.
• (Alt) + (U)
  Access User Preferences.

We hope that this quick walkthrough of SAP Fiori launchpad helped you to better understand its features. Next, we’ll dive into SAP Web Dispatcher and its role as a reverse proxy.

1.2.2    SAP Web Dispatcher

Depending on the type of SAP Fiori app you’re running (transactional, fact sheet, or analytical), queries are directed by the SAP Web Dispatcher from the client/browser to the ABAP front-end or SAP HANA XS. It isn’t mandatory to use SAP Web Dispatcher if you’re implementing transactional apps, but for analytical apps and fact sheet apps you’ll need to configure it.

When a user runs an analytical app, requests are forwarded from the client to the SAP HANA XS engine by SAP Web Dispatcher. Similarly, when a user runs a fact sheet app, requests are forwarded from the client to the ABAP back-end system by SAP Web Dispatcher. SAP Web Dispatcher can either act as a simple forwarding service or actively participate in the exchange between a client and server.

SAP Web Dispatcher is capable of intercepting, inspecting, and interacting with requests and responses. Interacting with requests and responses enables more advanced traffic management services, such as application layer security, web acceleration, page routing, and secure remote access. SAP Web Dispatcher also provides the ability to direct requests based on a wide variety of parameters, such as user device, location, network conditions, and even time of day.

Common uses for SAP Web Dispatcher include the following:

• Load balancing
  SAP Web Dispatcher is most commonly used to provide load balancing services for scalability and availability. Increasingly, SAP Web Dispatcher is also used as a strategic point in the network to enforce web application security through web application firewalls, application delivery firewalls, and deep content inspection to mitigate data leaks. SAP Web Dispatcher can also be deployed to offload services from applications to improve performance through acceleration, intelligence, and caching.
• Web acceleration
  SAP Web Dispatcher can compress inbound and outbound data and can cache commonly requested content, both of which speed up the flow of traffic between the browser and the ABAP servers or SAP HANA XS. SAP Web Dispatcher can also perform additional tasks such as SSL encryption to take the load off your web servers, thereby boosting their performance.
• Security and anonymity
  By intercepting requests headed for your back-end servers, SAP Web Dispatcher protects request identities and acts as an additional defense against security attacks. It also ensures that multiple servers can be accessed from a single record locater or URL, regardless of the structure of your local area network.

1.2.3    Communication Channels

It’s vital that different layers of SAP Fiori can communicate with one another. In this section, we’ll discuss how data is transferred between the client, ABAP front-end, ABAP back-end, and SAP HANA XS. In doing so, we’ll highlight the different communication channels and protocols implemented in the SAP Fiori system landscape. Figure 1.18 shows the high-level SAP Fiori architecture, with the communication channels and protocols included.

Figure 1.18    Communication Channels

As shown, the communication type between the client and SAP Web Dispatcher 1 depends on the type of application the user’s running in the client/browser or the type of task that the user is performing. For example, when a user runs a fact sheet app, the client sends an INA search request.

The communication between SAP Web Dispatcher and ABAP servers 2 depends on the type of request SAP Web Dispatcher forwards from the client to the ABAP servers:

• ABAP front-end server (transactional apps)
  • HTML requests
  • OData requests
• ABAP back-end server (fact sheet apps only)
  • INA search requests

A trusted RFC connection is established for communication between the ABAP front-end server and the ABAP back-end server 3. Data and services are provided from the ABAP back-end server to the ABAP front-end server using OData services.

Communication between SAP Web Dispatcher and SAP HANA XS 4 only happens when a user runs analytical apps. SAP Web Dispatcher forwards the OData request from the client to SAP HANA XS.

Understanding how each of these components speak with one another is useful when errors or issues arise.

1.2.4    SAP Fiori App-Supported Browsers and OS

In this section, we’ll list the browsers (Internet Explorer [IE], Google Chrome, Safari, Microsoft Edge, and Mozilla Firefox) and OS versions (Windows, Apple, and Android) that support SAP Fiori apps.

Blackberry

Blackberry OS support ended in October 2016.

Windows Support

Table 1.1 shows the Windows mobile devices and browsers that support SAP Fiori apps.

OS Type	OS Version	SAP Fiori Client	Microsoft Browser
Phone	8.1 GDR1	Latest version	IE 11.x
	10	Latest version	Microsoft Edge

Table 1.1    Windows Mobile

Table 1.2 shows the Windows desktops and browsers that support SAP Fiori apps.

OS Type	OS Version	Microsoft Browser	Google Chrome	Mozilla Firefox
Hybrid (touch-enabled desktops)	8.1	IE 11.x	–	–
	10	Microsoft Edge	–	–
Desktop	8 8.1	IE 10.x IE 11.x	Latest version	Latest rapid release cycle (RRC) Latest extended support release (ESR)
	10	Microsoft Edge	Latest version	Latest RRC Latest ESR
	7	IE 9.x IE 11.x	Latest version	Latest RRC Latest ESR

Table 1.2    Windows Desktop

Internet Explorer 9

IE 9 is not supported for any SAP Fiori apps.

Apple Support

Table 1.3 shows Apple’s iOS devices and browsers that support SAP Fiori apps.

OS Type	OS Version	SAP Fiori Client	Apple Safari
iPhone 5 or newer	9.x – 10.x	Latest version	Latest version
iPad Pro, Mini, or Air	9.x – 10.x	Latest version	Latest version

Table 1.3    iOS (iPhone/iPad)

Table 1.4 shows Apple’s MacOS X versions and browsers that support SAP Fiori apps.

OS Type	OS Version	SAP Fiori Client	Apple Safari
Desktop	OS X 10.9 OS X 10.10 OS X 10.11	Latest version	Latest Version

Table 1.4    Mac

Android Support

Table 1.5 shows Google’s Android devices and browsers that support SAP Fiori apps.

OS Type	OS Version	SAP Fiori Client	Android Browser	Google Chrome
Phone/Tablet	4.1.3–7.x	Latest version	Latest version	Latest version

Table 1.5    Android Phones/Tablets

Android Devices

The following Android devices have been tested by SAP:

• Phones
  Samsung Galaxy S4, S5, S6
• Tablets
  Samsung Galaxy Tab Series Pro, Samsung Galaxy Tab Series Pro S, Google Nexus

1.2.5    SAP Fiori, Cloud Edition

SAP Fiori, cloud edition is one of the major new releases in SAP Fiori. SAP Fiori, cloud edition provides customers with a simple approach to revolutionize UX by using SAP Fiori apps and services in the cloud, running on SAP Cloud Platform.

With SAP Fiori, cloud edition, customers can connect easily to their on-premise SAP landscape and experience SAP Fiori with literally zero installation and configuration. SAP released a demo cloud edition so that customers can explore SAP Fiori by connecting to their on-premise SAP landscape and can build some prototypes. During SAPPHIRE 2016, SAP released SAP Fiori cloud edition for general availability (GA).

Accessing SAP Fiori, Cloud Edition Trial

You can now access the SAP Fiori, cloud edition trial from the following link: http://www.sapfioritrial.com. Once you open the webpage, click the See it in Action button to access the SAP Fiori, cloud edition trial.

SAP Fiori, Cloud Edition Architecture

Figure 1.19 shows the high-level architecture of SAP Fiori, cloud edition. Your on-premise SAP Business Suite is securely connected to SAP Cloud Platform using the SAP Cloud Platform cloud connector. In the SAP Cloud Platform, SAP Fiori launchpad, SAP Fiori apps, UI Theme Designer, and SAP Web IDE run as services consuming data from your on-premise systems.

Figure 1.19    SAP Fiori, Cloud Edition Architecture

The best part of the SAP Cloud Platform is that customers can quickly use SAP Fiori launchpad without worrying about software maintenance or updates, and they can seamlessly leverage cloud services to extend and develop SAP Fiori apps.

SAP Fiori On-Premise vs. SAP Fiori Cloud

Now, let’s look at some of the key differences between SAP Fiori on-premise and SAP Fiori, cloud edition from both architecture and features perspectives. Figure 1.20 shows the simple, high-level architecture of SAP Fiori, comparing on-premise and cloud versions.

Figure 1.20    SAP Fiori On-Premise vs. SAP Fiori Cloud

Be aware of the following key points:

• SAP Fiori on-premise is managed in your own data center, with full flexibility in installation and configuration. All seven thousand plus apps can be installed and configured.
• SAP Fiori, cloud edition is managed by SAP, and customers can quickly connect SAP Business Suite to it. Only around 70 apps are currently supported on SAP Fiori, cloud edition.

Now that we’ve looked at SAP Fiori, cloud edition, next we’ll begin discussing the different types of SAP Fiori apps.