Introducing the User Interface

Objectives

After completing this lesson, you will be able to:

Understand SAP Fiori UX
Explain the benefits of SAP Fiori
Understand SAP GUI
Understand SAP Business Client
Explain the benefits of SAP Business Client
Navigate in SAP Business Client

SAP Fiori User Experience

As your enterprise plans to implement SAP S/4HANA, you want to learn more about the SAP user experience strategy, and particularly the SAP Fiori UI.

Diagram highlighting SAP Fiori features like Launchpad, UI technologies, client types, and deployment options, surrounded by associated application screenshots.

Concepts and Influencing Factors

IT and the use of electronic devices is no longer reserved for a group of experts; it has spread throughout all social groups. In this context, highly performing hardware stands against a wide variety of software products with differing scope and potential. This puts stress on ease of use from the perspective of the end user. The main drivers of this development are smartphones and tablets, with their easy-to-use and flexible user interfaces. The focus of these user interfaces is no longer on maximum functionality, but on a positive user experience, which places the focus on the consumer. The focus is no longer on the expert user with many years of experience. Due to these circumstances, business software must adapt and transform the impact of this trend into an advantage for the roles of an enterprise. In this evolution, user interfaces (UIs) play an important role.

With regard to SAP software products, the challenge is to keep a clear view and to understand the overall SAP strategy in the area of user experience. Furthermore, it is important to have a clear understanding of the goals and the target groups of each UI technology. This helps to avoid incorrect decisions and situations where users are frustrated.

UI vs. UX

At the outset, it is helpful to clarify and help understand the terminology. It is useful to start with the terms "user interface" (UI) and "user experience" (UX).

The terms UI and UX refer to two different ways of thinking. UI, from a software perspective, refers to the interface between a human being and a device. Its goal is to support maximum efficiency during use. UX involves the perspective of the end user, and aims at motivation and emotion before, during, and after use. UX tries to achieve a sustainable, positive attitude in the user and create a motivating experience.

User Types

Depending on the industry and company involved, various user types can be found. There are many different user types, depending on the structure of the specialized area and the IT department, as well as the degree of digitization. However, in almost every company, there are three basic types as follows:

Occasional user: Uses the system only occasionally and needs simple, easy-to-use applications. In many cases, single-step transactions are executed.
Expert user (or key user): Is a fully-trained SAP user, who knows the processes and the available applications in detail. The expert user often uses multiple systems and different UIs.
Developer (or programmer): Has detailed process and system knowledge, and deals with the adaptation and extension of the existing applications. The developer has to look after several applications with different UIs.

Types of Access

Based on the type of access, applications can be categorized as follows:

Multi-step transactional
Single-step transactional
Single-step analytical

Diagram showing UI...? , surrounded by four connected ovals: User Types, Types of Access, Deployment Types, and Application Types.

When summarizing the different factors, it is clear that a "one size fits all" approach does not work.

Diagram illustrating SAP architecture, featuring SAP Fiori User Experience, applications, analytics, and SAP HANA Platform, connected through a cloud interface.

The long-term goal of the SAP UX strategy is to offer all business and all analytic applications on SAP HANA, with SAP Fiori as the unified UI.

SAP User Experience Strategy

The SAP user strategy has the following three components:

NEW: New applications are delivered with the latest UI technology, which in most cases is SAP Fiori.
RENEW: The most important and widely used applications will have their UIs renovated by SAP.
ENABLE: The less used applications can be improved by the customer using various technologies.

New Cloud Applications, SAP Scouting, Visual Business & Visual Enterprise.

Examples of the NEW component include the following:

SAP Fiori for new applications, such as the overview sheets in Project System or the SAP Fiori apps for changing the system status or confirming activities and milestones
SAP Visual Business (supports certain new applications)
SAP Visual Enterprise (supports certain new applications)

Renew examples: SAP Fieldglass and SAP Ariba

Examples of the RENEW component include the following:

SAP Fiori as common UI for all devices (desktop, laptop, tablet, and smartphone)
SAP Fiori for existing applications (for example, cloud applications including SAP Fieldglass, SAP Ariba, and SAP SuccessFactors). This applies to most of the transactions in Project System (PS).
SAP Fiori for existing SAP GUI or Web Dynpro applications
Single entry point via SAP Business Client. As the SAP Business Client supports the new SAP Fiori transactions as well as the existing transactions, it should be the single point of entry when both options are used.

Diagram showing SAP customization using Screen Personas for SAPGUI and Web IDE for Fiori apps, highlighting added fields, hidden areas, and extended functions.

Examples of the ENABLE component include the following:

Improving and simplifying SAP GUI or Dynpro-based views using Screen Personas
Adapting and extending standard SAP Fiori apps using Web IDE
Customizing different UIs using color schemes, fonts, icons, and so on, and customizing company logos using UI Theme Designer

SAP Screen Personas is available for SAP GUI or Dynpro-based views (Web Dynpro support is planned), and Web IDE is available for SAP UI5 applications. The UI Theme Designer is available for the following:

SAPUI5 (including SAP Fiori apps and SAP Fiori launchpad)
Web Dynpro ABAP, Web Dynpro Java
SAP GUI for HTML
Business Server Pages, HTMLB
SAP Business Client for Desktop
SAP Enterprise Portal

Transactional SAP Fiori apps need an ABAP environment and are often used for single-step transactions. Analytical apps and fact sheets are SAP HANA-based, and often contain new functionality.

SAP Fiori Architecture

The SAP Fiori architecture consists of the following levels:

HTML5 client (SAP Fiori launchpad)
ABAP front-end server, with a central UI component and SAP Fiori roles implemented
ABAP back-end system
Database (SAP HANA or AnyDB)

SAP Fiori Launchpad

The SAP Fiori launchpad is a role-based, personalized UI client that enables users to access SAP Fiori apps alongside established UIs. The SAP Fiori launchpad is based on SAPUI5 and can be used on multiple devices (leveraging the responsive design paradigm) and deployed on multiple platforms (SAP NetWeaver Application Server [ABAP Stack], SAP Enterprise Portal, and SAP HANA Cloud Platform). The SAP Fiori launchpad comes with predefined content to streamline implementation processes.

The SAP Fiori launchpad is aligned with the two main UI clients: SAP Enterprise Portal (available) and SAP Business Client (planned). This alignment is achieved as follows:

Alignment with the SAP Enterprise Portal is achieved by running the SAP Fiori launchpad user experience within the SAP Enterprise Portal (also known as SAP Fiori framework page) while leveraging the established portal infrastructure and best practices.
Alignment of SAP Business Client (BC) for desktop with SAP Fiori launchpad design is planned for future releases.

The SAP Fiori launchpad can be visually adapted and customized using the UI Theme Designer. It is designed according to the simple and intuitive SAP Fiori user experience, while supporting established UI technologies (such as Web Dynpro ABAP and SAP GUI for HTML).

Workflow showcasing project management software steps: navigating WBS elements, selecting Custom Forklift, changing system status from Created to Release.

The preceding figure shows the SAP Fiori transactional app Change WBS Element Status, which supports the user in maintaining the status values of WBS elements and network activities. As this is a transactional app, you will find the standard views and functionalities.

Transactions in SAP Fiori Launchpad — Project Builder

SAP Project Builder interface showing project structure, identification, and details for Prototype Project for Evaluation, including logistics, engineering, and procurement.

You can also use the existing SAP GUI transactions in the SAP Fiori launchpad, together with the SAP Business Client or via your web browser. Most SAP GUI transactions exist in SAP S/4HANA as well.

Start and Configure the SAP Fiori Launchpad

ExerciseStart Exercise

Spaces and Pages

A while ago, SAP released a version of SAP Fiori known as SAP Fiori 3. SAP Fiori 3 supports multi-page spaces to give users stable, well-structured and personalizable access to their important apps. Users can also benefit from SAP's continuous improvements in SAP Fiori 3 situation handling capabilities. App developers also benefit from the SAP Fiori controls for SAP Fiori native apps for iOS and Android that SAP Fiori 3 offers. As well as from SAP's next generation IDE (Integrated Development Environment) in the cloud, SAP Business Application Studio, and SAP Fiori tools for SAP Fiori 3.

A consistent and attractive home page experience is a key element of SAP Fiori 3: it delivers a significant improvement for end users accessing the system via the SAP Fiori launchpad as the single entry point for their work.

Supporting intelligence is also an area SAP Fiori 3 focuses on: situation handling, with improved situation pages and message-based situations are key elements in this area in SAP Fiori 3.

Spaces and Pages ilustrating the hierarchy of Business Role, Space, Page with Sections, and Tiles within the Project Planner Logistics screen.

Spaces, Pages and Sections are an alternative way to structure the SAP Fiori Launchpad menu. The setup can be done globally by the administrator or the users have the choice to decide if they want to use spaces or not. Spaces are predelivered similar to catalogs and groups. In most cases, a group in a role delivered by SAP also contains a space equivalent with pages that can be reused.

SAP provides space and page templates per business role for SAP S/4HANA, making it easy for customers to structure the layout of the SAP Fiori launchpad for their end users. This layout remains stable, even if a user is assigned to more roles later.

A SAP Fiori space represents an area of work, typically corresponding to one or more business roles. You can structure each space using pages for various work contexts, and optionally use sections to further group the work within a page.

Users can easily personalize their pages, by adding or removing tiles, or adding or removing sections.

There are several ways to semantically structure and visualize the content of a space. Use multiple pages and sections to semantically structure the content of a space. Page and section titles may help identify the tasks that the content relates to. Tiles are used to visualize the content of a space. In addition to tiles, more options to visualize the content will be available in later releases.

A space comes with a predefined set of apps related to the user’s business role. The idea is to show only the most important and most used apps per space that users need to complete their daily tasks.

To further structure a space you might use one or multiple pages depending on the number of assigned apps associated with the users’ business role. Users can still access all apps in the app finder which they might use to add apps to their pages or to directly launch apps that they rarely use.

Sections can be used to semantically structure the content of a page. To ensure consistency across pages within a space and across spaces, we recommend using a section called "Quick Access" to summarize the most important apps, and/or a section called "Insights" to summarize the most important analytical apps.

The use of multiple pages might be the case for business roles which have many apps assigned. Each page should then reflect one self-contained work-context. Aim for lean pages and show only the most important and used apps on each page. Therefore, a page serves as a "favorites" page.

"Overview" Page – If you would like to provide a page which summarizes the most important and most used apps across the multiple work-context pages, use a term which summarizes the most important tasks of the whole space or use "Overview" as page title. The Overview page may contain additional overall apps or generic apps such as "My Inbox". To ensure consistency, position this page as the first page on a multiple-pages space.

To aim for lean pages, do not overwhelm sections with apps, go for lean pages instead. Check the chapter tiles to choose appropriate tile types.

The spaces concept gives users more than one page to access their SAP Fiori launchpad content. In fact, the concept assumes that users can access multiple spaces, and each space itself can have one or more pages. Each page can have its content portioned into sections, similar to the groups used before. As a result, users have two levels with which to structure their content instead of just one: multiple spaces (each with one page), and multiple sections per page – i.e. spaces and sections. The following diagram shows this with an example for the space "Accounts Receivable".

At the top of the screen you can see that the user can navigate to several spaces; the space Project Planner General has been selected here. This space contains one page, which contains two sections, Project Maintenance and Project Overviews. Each section contains the most relevant apps for the named activities.

Sample Administrator View and End-User View.

A WYSIWYG (what you see is what you get) editor is available for administrators and end users to adjust the layout. For the moment, only administrators can create new spaces; end users can personalize a page’s sections and the tiles therein. The following figure shows what the editor looks like (on the left), when editing the page shown on the right. As you can see, by providing a split screen editor to administrators, they can see the home page structure on the left while searching for or browsing through the available content on the right. The app for administrators is called Manage Launchpad Pages.

Since users are used to their current home pages, and have quite likely personalized them to their needs, we are introducing the spaces and pages approach as an additional option to start with. If system administrators switch it on, then users can select for themselves whether they want to continue working with their home page, or whether they want to use spaces.

Spaces = 'true' for decision on admin level. SPACES_ENABLE_USER = 'true' for user-specific decision.

To be able to use spaces, the corresponding setting has to be enabled in the SAP Fiori Launchpad configuration in the front-end system. This can be achieved in Customizing or by using transaction /UI2/FLP_CUS_CONF. The parameter to use is one of the following options:

SPACES, if the setting should apply to all users (either/ or decision by administrator)
SPACES_ENABLE_USER if the user can decide.

The value has to be set to true.

InSpaces and Pages, select the Use Spaces checkbox.

If the user-specific flag has been activated, the user can enable or disable spaces on their own.

The following requirements beside the SAP Fiori Launchpad settings have to be made to be able to manage spaces and pages:

Catalogs have already been defined
Access to role administration with transaction PFCG in the frontend system. Spaces have to be assigned to a user role similar to groups
Assignment of the business catalog SAP_BASIS_BC_UI_FLD. It contains the following apps:
Manage Launchpad Spaces: Here you create and manage spaces and you define the page assignment. You can also check to which business roles a space is assigned. This app has two main views: the spaces overview and the space details.
Manage Launchpad Pages: Here you create new pages, define the page content and edit existing pages. This app has two main views: the pages overview and the page details.
The authorization of role SAP_FLP_ADMIN is assigned to you.
Activation of the corresponding data services.

Spaces can be translated using the standard SAP translation tools.

SAP already delivers a lot of spaces and pages with the existing roles. You can copy both in the space next to your name.

This transition period gives administrators time to build up optimal spaces and pages for their users. It also gives users the opportunity to familiarize themselves with the new approach and gradually apply their personalization to the new spaces and pages, while having the previous home page available to them as a fall-back.

Manage Spaces and Pages

ExerciseStart Exercise

User Experience: SAP GUI

The SAP Graphical User Interface (GUI) is the front-end program used to access SAP systems. Several variants of the SAP GUI are available and are adapted for use in different environments. The SAP GUI program connects the front-end computer to a specific SAP system. To start the SAP GUI, SAP provides another program, SAP Logon. When the user launches SAP Logon, a screen displays a list of available SAP systems. This list is derived from a file on the front-end computer, and is preconfigured and made available to users.

SAP Easy Access

When you work in your SAP S/4HANA system, you can start the SAP Easy Access menu. Here, you can select transactions via a menu path or by executing the transaction code. If you migrated your "old" SAP ERP system to SAP S/4HANA, you could opt to work with the classic SAP GUI transactions.

Most of the transactions used in SAP Project System (PS) are actually renewed SAP GUI transactions. This means that you could also log on to the back-end system directly and use the same transactions, with or without the SAP Fiori Belize theme.

Screenshot of the SAP Easy Access Project System.

The Project Builder appears the same way as in SAP ERP. The design has been adopted to the new themes, but the functionality remains the same.

The Choice is Yours

It is up to you which system access you prefer. Most SAP S/4HANA scenarios can be reached via the SAP Fiori launchpad. As an alternative, you can use SAP Business Client with standard Web Dynpro or the SAP GUI for HTML transactions. If users don’t want to work with SAP Fiori or SAP Business Client, they are still able to open the classic SAP transactions.

Even in the SAP GUI you can set the options in such a way that the appearance is similar to the design that the SAP Fiori apps are using. In this case you have to choose a Fiori theme, for example Quartz Theme and make sure that the flag Activate SAP Fiori features is activated in the SAP GUI options. This only works on an SAP S/4HANA system. This design is also used in this course.

Work with the SAP GUI

ExerciseStart Exercise

User Experience: SAP Business Client

Previously, users could choose between a wide range of user interfaces. These included SAP Portal, Business Server Page solutions, HTML5 Apps, Web Dynpro, and SAP GUI. The standard SAP GUI menu offers a wide range of access points for different objects, such as project, network, or documents. Each individual object has its own search template. It is not possible to search across all objects. If you want to define your search, you do this on the SAP GUI using a SAP Query. SAP Business Client, which was called SAP NetWeaver Business Client in older releases, attempts to solve these problems. It does so by providing a new interface and serving as an alternative to the applications used formerly.

Sample screenshots of the SAP Business Client User Interface.

With SAP Business Client, SAP provides users with a new interface that they can use alongside the SAP GUI, SAP GUI for HTML, SAP NetWeaver Portal, Web Dynpro, or Business Server Page solutions. It can be locally installed on a PC or as an internet scenario.

SAP Business Client can be used for the SAP GUI as a SAP Fiori launchpad or for Web Dynpro scenarios, such as the ones used in SAP Portfolio and Project Management.

Control Center

The user interface of the SAP Business Client offers:

A central point of access for all users
An overview of:
- Transactions
- Object searches
- Favorites
- Personal work lists

SAP Business Client is comprised of the following areas:

Navigation pane:
This area shows the transactions, which can be found in the assigned role.
Work area:
In this area, you can use the individual search templates, favorites, or object lists for individual navigation objects such as projects, networks, or material components. The work area also contains the transactions for creating, changing, and displaying the objects.

After logging on to the system, the first thing you see is the Control Center. In both the local and internet-based SAP Business Client, the Control Center has a navigation pane containing the role assigned to the user. Each entry contains the individual work areas for project activities related to logistics or controlling.

Comparison of the control center and the SAP Fiori lanichpad.

Alternatively, you can access the SAP Fiori launchpad in the SAP Business Client and start the HTML5 transactions there. This offers you the advantage of checking the SAP GUI transaction work that are not (fully) SAP GUI for HTML enabled, like the Project Planning Board. Additionally, the SAP Business Client uses the full screen view without letter-boxing when rendering SAP GUI transactions compared to the SAP Fiori Launchpad in the browser. As you access your system via the SAP Fiori Launchpad, you're also able to use the new SAPUI 5 apps as well as the traditional SAP GUI transactions.

Work with SAP Business Client

ExerciseStart Exercise

Next lesson