fiori configuration - ithbdownload.ithb.ac.id/downloads/crc/sap hana introduction... · 2019. 8....

© SAP UCC Magdeburg

CASE STUDY

Product

SAP S/4HANA 1809 Fiori 2.0 Global Bike

Level

Advanced

Focus

Fiori Configuration

Authors

Babett Ruß

Version

3.3

Last Update

August 2019

MOTIVATION

The SAP Fiori Launchpad (normally called Launchpad) is the central point for a user to launch Fiori applications. The Launchpad must be set up for individual users. In this case study, you will define roles for users, activate preconfigured apps and develop your own small app.

PREREQUISITES

Before using this case study, you should be familiar with navigation in the SAP back-end SAPGUI based system. In order to successfully work through this case study, it is not necessary to have finished the Navigation case study. However, it is recommended.

NOTES

This case study uses the Global Bike data set, which has exclusively been created for the SAP UA global curricula.

Fiori Configuration

This case study explains the configuration of the Fiori Launchpad, which

will be the single-point-of-entry for users on the SAP S/4HANA system.

This document fosters the understanding of the role-based build-up of

users and the underlying SAP functionality.


CASE STUDY

Process Overview

Learning Objective Understand and configure the role-based design

of a Fiori Launchpad.

Scenario In the following steps, you will learn how to configure a SAP

Fiori Launchpad. First, you will configure the Log on Screen.

Following this, you will create a role that you can assign to various

users. For this role, you will initialize different apps.

Time 120 Min.

What is Fiori?

SAP Fiori is a design guideline for user interfaces (UI) from SAP and strives to enhance

the user experience (UX). Most Fiori Apps are implemented using SAP UI5, which is

framework based on JavaScript and HTML5. In addition, they use the OData protocol

for communication.

Fiori Apps are on their way to become the single-point-of-entry for end users of SAP-

based systems. This means that eventually, all SAP user interfaces will be oriented to

Fiori or based on Fiori. A Fiori App is not a program that has to be installed on the client

(i.e. computer or mobile device) - it runs in any browser that is HTML5-compliant,

which is nearly all current browsers.

Why Fiori?

Most SAP users are still utilizing traditional SAP GUI - the user interface that has been

released in its basic functionality almost 25 years ago. Demands for a better user

experience (UX) from business users, especially since the prevalence of smartphones

and apps has led to the development of Fiori. Some complicated functions can be

presented clearly and "smartly", but the design of the software has caused a rethink in

SAP development. By a simple and intuitive operation, a better UX can be achieved.

The most important principles in the development of apps with a good UX are:

Unified UI language across all apps (similar to the design languages of the

mobile operating systems iOS or Android, in which all masks and views look

similar and have similar operating options)

Focus on a target group

Restriction on what is really needed

Using Fiori, a new UX is created that can be used on all devices. Fiori Apps can be used

on the desktop as well as on mobile devices. Of course, this also has great advantages for

the organizations using SAP and the users themselves: a UI for all platforms does not

mean a separate cost for the maintenance of different versions and the employee does not

have to rethink when switching between devices during the operation. It is also

important that Fiori runs as an application in the browser and is not installed separately.

The new UX has several advantages for SAP implementing organizations, which can

also turn out to be profitable quickly:

lower training costs

less installation and support effort

increased productivity and employee satisfaction


CASE STUDY

enhanced and improved ways to efficiently support processes

The growing collection of Fiori Apps have a central access point which is called the

Fiori Launchpad. The Launchpad - as well as the start-up interfaces of almost all current

user interfaces - can be customized to suit your own requirements and tasks.

The applications (apps) of the user appear in the Launchpad as tiles that can be arranged

as desired. However, an app is not equivalent to an SAP transaction. A Fiori app is

designed for a specific role and specific tasks or deployment scenarios. In addition, an

app only contains the data and functions that are actually necessary for the particular role

or task. Therefore, an app can contain certain sub-functions of one or more SAP

transactions depending on the usage scenario (use case). This is one reason why the user

should be involved in the development of a Fiori app from the beginning and throughout

the whole project.

Types of apps

Transactional Apps: Apps that maps functions similar to those of existing SAP

transactions. These are executable on SAP systems regardless of the database

used (as long as it is compatible with SAP).

Fact Sheet Apps: These are similar to reports on a specific topic

Analytical Apps: for analyzing more complicated facts and data

Analytical apps and fact sheets require SAP systems with the SAP HANA as a database.

Technical information

Regardless of the front end, the logic, the actual work of the application itself and the

permissions remain largely in the backend. A Fiori app therefore always consists of two

components - the UI and a data service. The UI is the "framework" for the data. The data

service (SAP NetWeaver Gateway Service, or GW Service for short) supplies the app

with the associated data and also writes information back to the backend system.

The UI is developed in SAPUI5 - a framework, which means a development and

implementation module that provides the graphical elements and other required

functions as ready-to-use blocks. SAPUI5 is based on HTML5, CSS3 and JavaScript, the

common standards for the development of surfaces on the internet.

For implementation, SAP provides the browser-based development tool Web IDE.

However, any other development tool can be used as well.

The communication between the Fiori app and the SAP back-end system is established

by the SAP NetWeaver Gateway (SAP GW) via appropriate Web services.

The GW service communicates via the Open Data Protocol (OData), an HTTP protocol

developed by a consortium of various companies such as Microsoft, IBM and SAP. The

central advantage of OData is the fact that it consumes and processes data from a wide

range of front-end technologies and operating systems and has become a tried and tested

standard on the Internet. The GW service is not linked to the individual app but can be

used for other UI technologies and therefore, it is future-proof.


CASE STUDY

Use of different Tools

In this case study you will work with three different kinds of tools. The SAP GUI, the

Fiori Launchpad and the Fiori Administration Designer. To not confuse you there are

different icons to mark which tool you need to use for the next steps.

The icons are as follows:

GUI

Launchpad

https://<SID>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-

client=<XXX>&sap-language=en

If you are working with the system A20 and client 200 your link would be

https://a20z.ucc.ovgu.de/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-

client=200&sap-language=en

Fiori Administration Designer

https://<SID>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap-

client=<XXX>&sap-language=en

If you are working with the system A20 and client 200 your link would be

https://a20z.ucc.ovgu.de/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap-

client=200&sap-language=en


CASE STUDY

Table of contents

Process Overview ............................................................................................................ 2

Step 1: Checking SAP system data ................................................................................. 6

Step 2: Fiori App library ................................................................................................. 8

Step 3: Configuration Log on / Log of Screen .............................................................. 12

Step 4: Create a role ...................................................................................................... 15

Step 5: Create new group for Fiori Launchpad ............................................................. 17

Step 6: Assign role authorization .................................................................................. 22

Step 7: Initialize App .................................................................................................... 24

Step 8: Create WebGUI application .............................................................................. 27

Step 9: Initialize App for External Page ....................................................................... 36

Step 9: Initialize App for Hyperlink ............................................................................. 40


CASE STUDY

Step 1: Checking SAP system data

Exercise For development that is independent of your environment, it is

always necessary to check the version of the system beforehand. The use

of Fiori Apps depends on the version of the SAP components.

Write down the most important components for Fiori development.

Time10 Min.

A software component bundles a set of packages, which can only be delivered to

customers together. All packages are discretely divided into software components.

Hierarchy of the software components

The software components delivered with SAP S/4HANA form a hierarchy. Using the

hierarchy (see figure), you can see which dependencies the use of a software component

entails. For example, SAP_HR uses objects from the component SAP_ABA, which in

turn depends on SAP_BASIS.

SAP_BASIS SAP Web Application Server

(former: SAP Basis)

SAP_ABA Cross-application components

SAP_HR Human Resources

SAP_APPL Logistics and accounting

Log in to the SAP GUI with the user and password assigned by your

lecturer.

In the Easy Access menu, use the transaction SPAM.


CASE STUDY

Confirm the following pop-up with .

To see a list of all SAP basis components and their version installed in your system click

on . Now click on the column Component and sort it in

ascending order with the button . Look for the S4Core version and note the SP

(Support Package) level: _____________

In this example, the SP level is 1.

Please be aware that your level might differ from the screenshot.

Also, look for the SP level of the component:

UIS4HOP1:__________

SAP_UI: :__________

SAP_BASIS:__________

UIAPFI70:__________


CASE STUDY

Step 2: Fiori App library

Exercise Get an overview of the SAP Fiori App library. Time 10 Min.

You have the option of using predefined apps for the configuration of the Launchpad.

Open the SAP Fiori App library:

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#

If the link doesn’t work search for Fiori App Library in Google. Select the first link.

On the following homepage you will find information about the library. You will also

see the different app categories on the left.

You can see that for S / 4HANA two different app types are available. In the category:

only Fiori apps are available. In the

category: the GUI transaction apps are also

available, besides the Fiori apps.

Select the category .

Here you have the possibility to filter again.

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/


CASE STUDY

Click on . The following overview appears:

Enter Manage Customer Line Item in the search field and confirm with .

You get two search hits. Select the first hit. On the right side of the screen you will see

the app type.


CASE STUDY

Now select your second hit. You can see that the app is available in both Fiori and GUI

Transaction App.

The requirements for the backend version SAP S/4HANA and database HANA are the

same for both apps.

Select the Fiori App Manage Customer Line Items again. Under the Product Features

tab, you can get general information about the app.

Navigate to the Implementation Information tab. First of all, you must ensure that there

is the app for your system release. Check this in the pull-down menu.


CASE STUDY

In the previous step, you have noted the Support Package Level. In this case study

version SAP S/4HANA 1809 and FPS02 is used. Note that your component version may

be higher.

Under Installation, you will see the necessary front-end and back-end components.

Check whether the listed versions are compatible with yours (remember the steps from

task 1 where you checked the components).


CASE STUDY

Step 3: Configuration Log on / Log of Screen

Exercise The Launchpad has already been configured in this case study.

It is not configured for the user, but for the entire client. In the

following, you will be shown how, and at which point, the settings are

made. The transaction you are working on will still be relevant to you

when you initialize your first application.

Time 5 Min.

Note There are several important shortcuts, which you can put before a transaction

/n closes your present transaction and opens a new one. Where the transaction

SICF, you would put /nSICF in the command field.

/o opens a new transaction without closing your present one.

You can display other helpful tips by clicking F1 while your curser is in the command

field.

Back in the SAP GUI open transaction SICF. In this transaction services

are maintained.

For the HTTP request handler to be called when a specific URL is entered in the

browser, the handler must be included as an ICF (Internet Communication Framework)

service. You can use the transaction SICF to create, configure, and include the

appropriate handler.

After installation of the Application Server ABAP (AS-ABAP), all ICF services are

delivered inactive for security reasons. After the installation, you must decide which

services must be activated manually.

Since several services can be executed when a URL is called, all service nodes must be

activated in the SICF tree.

To create and configure an ICF service, you usually perform the following steps:

Create service

Maintain the logon procedure

Maintain service options

Determine security requirements

Set up the error pages

Include request handlers

Activate / deactivate service

You can create your own services under your own virtual host, if necessary.


CASE STUDY

In the Define Services view, you have the option to jump directly to a specific service.

As in the Easy Access menu, SAP offers the possibility to navigate through a tree

structure. Leave all fields as they are and click .

Access to the Launchpad is maintained under the following path:


CASE STUDY

Compare this path with your link:

https://XXXz.ucc.ovgu.de/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.ht

ml

Here you can make changes to the Launchpad. In our case, we leave all the settings as

they are, otherwise you will affect other participants.


CASE STUDY

Step 4: Create a role

Exercise Create a role for your new employee that contains the

necessary authorizations.

Time 10 Min.

The authorization concept of SAP S/4HANA is role-based – just like all SAP systems.

Roles are groups of related apps that are used for the execution of certain tasks. For

example, there are roles for an Accounts Payable Clerk or a Warehouse Person.

Therefore, you create a role that you will then assign to the users that need it to perform

their jobs.

Roles are based on your company’s organizational plan. These roles are the link between

the user and the appropriate permissions. The actual authorizations and profiles are

available as objects in the SAP system.

Authorization profiles are generated from roles. Authorization roles contain the

individual authorization objects, together with authorization fields. The user menu is also

maintained here. Authorization profiles then contain the required authorizations.

After generation, roles can be assigned to users.

What is the relationship between roles (n) and users (m)?

_______________________

In the GUI, open transaction PFCG. Create the Z_Config### role using

the button.

Note Composite roles include several roles. A user who is assigned a composite role is

automatically given the individual roles contained in this composite role and - therefore -

receives the associated authorization profiles.


CASE STUDY

Save the role. For a short description, enter Role Config LEARN-###. Specify any short

description in the Long Text field and assign the role to your user in the User tab. You

can also specify how long the user assignment should be valid. By default, 31.12.9999 is

configured in this system. For your user, select the starting day on yesterday’s date and

the end date as 31.12.9999.

The following data is required:

1. Catalog

2. Group

3. OData Service

You will assign the category, group and service in a later step.

You can remain in the transaction for the following tasks.


CASE STUDY

Step 5: Create new group for Fiori Launchpad

Exercise In this case study, the Launchpad has already been

configured. Unfortunately, no apps have been defined. In the following

activity, you will initialize the Launchpad with a new Fiori group

including apps.

Time 10 Min.

After you log in to the Fiori Launchpad with your user, there will be no

new apps displayed.

The SAP Fiori Launchpad acts as an access point for apps on mobile devices or desktop

devices. In the Launchpad Administration Designer, you can maintain groups and

catalogs. The apps are displayed using tiles. These tiles provide access to the individual

apps. The apps are organized by the following entities:

Note Apps can only be maintained in English. In Customizing, you can update or delete

tile catalogs and groups that are available in several languages in one language only.

This is to prevent an administrator from accidentally deleting a translation.

There are several ways to open the Fiori Administration Designer. You can either use the

link in the browser. Or you can use a transaction in the GUI.

In the SAP GUI, open transaction /N/UI2/FLPD_CUST.

The Fiori Administration Designer will open in a browser.

Note If you open the Fiori Administration Designer through the GUI you won’t have to

log in.

If not already done log in to the Fiori Administration Designer.


CASE STUDY

The following screen appears. You will automatically reach the overview of all catalogs.

The first catalog SAP_TC_ISPSCA_TRM_COMMON with the ID: X-SAP-UI2-

CATALOGPAGE is displayed. This contains several tiles.

Catalog

A catalog is a set of apps that you can make available to a role. Depending on the role

and the catalogs associated with the role, users can browse the catalogs and select the

apps they want to view on the SAP Fiori Launchpad homepage.

Group


CASE STUDY

A group is a subset of apps from one or more catalogs. The tiles displayed on a user's

homepage depend on the groups associated with the user role.

In addition, the user can personalize the homepage by predefining apps and adding or

removing self-defined groups.

All the tiles added are displayed in the group overview. Individual tiles can be deleted by

clicking the tile and pulling it into the center appearing trash can icon.

Similarly, you can delete an entire group. Click on the group in the list and drag it into

the trash can icon.

Using the back end system transaction PFCG uses Role Maintenance to provide access

to the assigned groups and catalogs.

In the Launchpad Administration Designer, click and then click the

Create Group icon .

In the Create Group pop-up fill in Fiori Launchpad Configuration ### as title and for

ID Z_Config###

Note The naming convention Y* or Z* is recommended for all self-developments of

customers in the SAP system. This is to avoid overlaps with SAP objects during a

release change.

By checking the box Enable users to personalize their group you allow users later to

move the apps in the group or delete them on their Launchpad. Compare your screen

with the following screenshots and choose .


CASE STUDY

You have the following view in the Fiori Administration Designer.


CASE STUDY


CASE STUDY

Step 6: Assign role authorization

Exercise In this step, you learn how to assign the necessary

authorizations to your previously created role.

Time 10 Min.

As already explained, a role-based authorization system exists within S/4HANA.

Therefore, we assign your user not directly to the group, but to the role assigned to your

user.

To do this, go to the SAP GUI and start transaction PFCG.

Enter your role Z_CONFIG### created in Task 4 and click on the button .

Click on the extended menu button of the transaction button . In

the pull-down menu, choose SAP Fiori Tile Group.

In the pop-up Assign Group, use the F4 help to search for the group previously created.

You can enter *### in the field Group ID. Select your group Z_Config###, press

continue and save the role .


CASE STUDY

Now go to your launchpad and refresh the page with F5.

Click on and then . You will see that you can edit the Fiori

Launchpad Configuration ### group. Now finish editing by clicking .


CASE STUDY

Step 7: Initialize App

Exercise Assign different apps to your role. Time 10 Min.

In the following step, assign the preconfigured App Manage Customer Line Items to

your role.

To do this, go to the Fiori Administration Designer again. Select Add

Tile under Show as Tiles.

You will be taken to the window Add Tile to Group „Fiori Launchpad Configuration

###“.

Select the F4 Help or in the field .

A pop-up opens with all catalogs stored in the system.


CASE STUDY

Enter the catalog SAP_TC_FIN_FO_COMMON in the Search field.

You will be taken to the catalog SAP: Financials – Accounts Payable Receivable. Scroll

down and find the app Manage Customer Line Items. Click on the tile to add it to the

group.

Use the back button . You will see that the app Manage Customer Line Items has

been added to your group Fiori Launchpad Configuration ###.


CASE STUDY

Now go to your launchpad and select F5 to refresh the page. You will

see that the predefined app has been added to your launchpad.


CASE STUDY

Step 8: Create WebGUI application

Exercise Add a WebGUI application to your launchpad. Time 20 Min.

As previous tasks explained, you can use the predefined Apps for the configuration of

the Launchpad from the SAP. In addition to Fiori Apps, you may also be familiar with

WebGUI applications. In the previous task, you added the transactional Fiori App

Manage Customer Line Items. In the following task, you will add the WebGUI

application Manage Customer Line Items.

Open the SAP Fiori App library:

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#

Enter Manage Customer Line Item in the search field and confirm with .

You get two search hits. Select the second option. You will see that this app is available

as a GUI Transaction App.

Navigate to the Implementation Information tab. First of all, you must ensure that the

app exists for your system release. Check this in the pull-down menu.


CASE STUDY

In Step 1, you noted the Support Package Level. In this case study, the version SAP

S/4HANA 1809 and FPS02 is used. Note that your component version may be higher.

Under Installation you will see the necessary front-end and back-end components. Check

whether the listed versions are compatible with you.

Under the tab Configuration you will see all necessary information to set up the app.


CASE STUDY

Your own tile is provided under catalogs. Go to SAP Fiori

Administration Designer. For this, click on and then

Create Catalog .

As a title enter Fiori Catalog ### and as ID ZFiori_Catalog_###. Then choose .

Add a new static tile. To do so, click on the empty tile and select App Launcher - Static

in the next screen.


CASE STUDY

In the window Configure ´App Launcher – Static´ enter the information from the Fiori

App Library.


CASE STUDY

Select an icon. Use the F4-Help or in the field icon.

Compare your screen with the following screenshot and select .

You have successfully created the Tile Manage Customer Line Items for the WebGUI.


CASE STUDY

You must now create the link to the system.

To do so, click on .

Click on

In the Configure: 'Target Mapping' view, you maintain the fields Semantic Object and

Action again. Then select the application type Transaction. In the Transaction field,

type the transaction code from the Fiori App library.

In this view, you can also configure which devices can use the app (desktop, tablet,

phone). Click on .


CASE STUDY

Now you must assign the created tile to your Fiori group. Navigate to your Z_Config###

group.

Select Add Tile under Show as Tiles.


###“.

Choose the F4 help or in the field .

A pop-up opens with all the catalogs stored in the system.


CASE STUDY

Enter the catalog ZFiori_Catalog_### in the field Search.

You will be taken to the catalog ZFiori_Catalog_###. There click on the tile of the app

Manage Customer Line Items – FBL5N.

Use the back button . You will see that the app Manage Customer Line Items –

FBL5N has been added to your group Fiori Launchpad Configuration ###.


CASE STUDY

Now go to your Launchpad and select F5 to refresh the page. You will

see that the predefined app has been added to your Launchpad.


CASE STUDY

Step 9: Initialize App for External Page

Exercise Configure an app that points to an external page. Time 15 Min.

Navigate to the Fiori Administration Designer. Go to your catalog

ZFiori_Catalog_###.

You can create your own tile in the created catalog. Make sure the Tiles tab is selected.

Click on Add Tile.

In the following picture Select a tile template you have the choice of which type of tile

you want to create. You want to point to an external page, in our case Google.com, so it

makes no sense to use a dynamic app or a news app. Therefore, click the Template App

Launcher – Static.

For Title enter for example any search engine. We used as Titel as an example Google ,

Explore the world as Subtitle and then remove the check at Use semantic object

navigation. Enter also Target URL https://www.google.xx (replace xx with your

country specific top-level domain).

Compare your screen with the following screenshot and select .


CASE STUDY

Back in the catalog view Fiori catalog ### you will see your created tile.

Now navigate to the group Z_Config###.

Select Add Tile under Show as Tiles.


CASE STUDY


###“.

Choose the F4 help or in the field .

A pop-up opens with all the catalogs stored in the system.

Enter the catalog ZFiori_Catalog_### in the field Search.

You will be taken to the catalog ZFiori_Catalog_###. Click on the tile of the app Google

– Explore the world.


CASE STUDY

Use the back button . You can see that the app Google – Explore the world has been

added to your group Fiori Launchpad Configuration ###.




CASE STUDY

Step 9: Initialize App for Hyperlink

Exercise Configure an app that points to an external page. Time 15 Min.

Navigate to the Fiori Administration Designer. Go to your group

Z_Config###.

Choose add tile under Show as Link.

Select the value help symbol .

Search for zucc_learning and select Learning Snacks.


CASE STUDY

Add Learning Snack SD to your catalog as shown before. .



Select Learning Snack SD. You will be directed to another website.


CASE STUDY

fiori configuration - ithbdownload.ithb.ac.id/downloads/crc/sap hana introduction... · 2019. 8....

Documents