FIORI UI

User interfaces:

ECC >> GUI, NWBC, Fiori (as a platform: Only handful of out-of-the-box apps was there. But it came with UI5 envir.,
libraries for developers, so businesses could add their own custom Fiori apps).

S4H On premise/Private Cloud >> GUI, NWBC, Fiori (as a solution)

S4H Public Cloud >> Fiori only!

What are the problems with GUI? Why would we need a new interface? You purchase from Amazon > you don’t
need any transactions. It is very intuitive. SAP had t codes (counter-intuitive, does not speak business language).

Shortcomings of GUI
 User Onboarding > GUI must be installed on the PC (not easy remotely for 3d parties), quite time-
consuming
 User Adoption > compare Coupa and SAP Gui with blue screen. It’s very hard to investigate functionality if
you don’t know transactions
 Interface is not intelligent > GUI is call-based, no guidance or hints on what’s wrong with your particular
suppliers, purchase orders etc. GUI does not have dashboards.
 No hyperlinks, switch between steps > e.g. GR for purchase order. You need to open PO. Copy it, check the
planned quantity. Then go to MIGO and post GR.
 Search option > Fuzzy search. Most of things in ouf life starts with the search. This functionality is not
available in GUI. For GUI all users see same screen for everyone (production manager, supply chain, sales
etc) > It is not role-oriented.
NWBC (Web Dynpro technology)
 Web based: All t codes from GUI can be used in web browser
 Role based approach is available. Support different Dashboards for different users
 NOT ADAPTIVE for mobile usage
 There’re only products that do not work with GUI, but only with NWBS. These are GRC, TM, EWM, SRM,
MDG

TM and EWM have been removed from NWBS portal and developed Fiori apps for these modules since 1909. T
code NWBC. This dashboard is controlled by your role.

There’re some standard roles that SAP has given to NWBC users. Role examples: SAP_EP_LO* (single roles).
Security team would normally create custom roles by taking reference from these standard roles.

If t code is html-enabled (in properties), then it can run in Fiori since 1709. So almost 100% of all GUI t codes can be
accessed through NWBC and now Fiori. If there’s a custom report or transaction, then odata service must be
created and activated.
FIORI
Fiori will work slow when you start. It’s common for all web based applications. Performance depends on cache.
When you use transactions 2, 3time, this will be much quicker. It is important to transfer this mindset to the end
users who worked with GUI!

In Fiori the procurement specific role, will look like this:

“Google search” > You can search by certain action, e.g. Create purchase requisition, create purchase order > they
can use a simple business language to execute this search.

I can search not only in applications, but also by e.g. plant (change type to “All”):

S4H jumped into all transactions and tried to find where 1710 is in. Can we do it in ECC? No, ECC infrastructure
does not have these capabilities. Let’s step into Purchase order
Also when you click back to “Purchase orders” , you can find these additional links to other functionalities that you
can use around purchase orders.
Then if I go into PO details, I can further navigate to supplier and view what materials we receive from this supplier,
what purch org it’s assigned to, what contracts are there, what invoices have been created for this supplier, even
the analytics, activities (e.g. new product launch with this supplier)
Let’s check the details about one of the products, we purchase from this supplier. I see plant, to which material is
exetended to, purchase orders, info records, sales orders, customers, if we also sell this product

We can go to customers and check the customer master:

In the implementation project scope, you will usually define who many applications, you’re going to introduce – 10,
20 etc. , especially if GUI interface is still available to users. But in this case, the project efford will double, because
you need to test transactions and security roles both in GUI and in Fiori.
Interface structure
Fiori has launchpad. On top we are having tabs (group > old terminology, now we have spaces and pages). Each tab
is linked to the combination of applications. Each tile is an application.

This is ME area:

Recent activities will show you (1) recent activities and (2) frequently used!

App Finder will show you catalogues with the tiles + pinned apps.

On load you can define how many lines you want to see that will be loaded at the same time. Common no is 50
records + “more” button, but you can ask you Fiori developer to load more records at once

Difference between group and catalogue: Under the Catalogue and Group , I will be having multiple applications.
Groups contain transactions that are frequently used. Therefore in “App Finder” , you have pinned transactions.
Users will see them in Groups on the Launchpad. Catalogues in “App finder” will however contain other
transactions that less frequently used , but user still has option to use it (or even pin them).

If I want to pin a transaction, then the user

If you need an authorization to a tile(s), then you

need an authorization to the catalogue even if this
tile won’t show on the launchpad!

Also a role authorization will be assigned to get the

new tab in the launchpad with the set of
frequently used transactions.
SAP gives the standard roles with spaces and pages. These roles are generally very wide (with many tasks and
apps). Therefore, companies prefer to create custom roles with some limited number of apps in it (e.g. all apps that
are needed to perform some task, like create and manage purchase orders).

SAP Fiori Library

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

You can see here all applications that are available.

Fiori Lighthouse apps – incl. document. These are simple apps that are quick to adopt.

Go to SAP Fiori apps for SAP S/4HANA > Line of Business > Sourcing and Procurement

Select “Manage Purchase orders” (Ver 2) > You see in which S4H
versions this app can run.

You can see device compatability: Device Type(s) Desktop,

Smartphone, Tablet

and technical app ID F1660A. Then product features/ description

is available. For some apps there’re even some short videos about
the apps.

Let’s check implementation information: All the things that are

required for the installation. SAP Notes>> Basis team can either go
through notes one by one or install a package. Installation>>
Software Component Version /…

Configuration: Services UI5 services and Odata that are required

to make the app work.

To troubleshoot why the app does not work, you must check 3
things: 1) SAP role (standard roles) – role is also available in the
Fiori library 2) App services 3) OData services
These are App services and Odata services

In S4H apps overview at the bottom of the screen, you can find button “List View” >> Overview of the apps

This is a fiori page. You can filter and narrow it down to your area.

OData service: Basically it’s a Rest API. That’s a bridge that converts your ABAP Stack information into the browser
based HTML information. Linkage between the S4HANA application layer (not to DB directly) and Fiori.

UI5: Localization of HTML5 (SAP has introduced their own templates and libraries) >> ABAP is a language in SAP
GUI, now with Fiori the developers must use UI5 in the web browser.

*** OData service does not trigger transactions directly. Everything still runs through BAPIs!!!! ***

Fiori Challenges
 Architecture
 Performance
 Mind Set
 Roles
 Testing (both GUI and Fiori apps)
  Resources >> much more resources than before. Skill sets: UI5 , ABAP on Hana/OData (developers must
know how to work with csd views and OData services), Fiori Analytics consultans > will work only in the
frontend to set up the KPIs and analytics.

Front-end server to optimize the performance. UI5 consultants will be doing it with ABAP team.

Let’s do full procurement cycle using Fiori apps

1.1 Manage Purchase Requisitions – Professional.

Here you can Copy/ Create New.

The app will automatically prepopulate “Purchase req description” with user name and date

Item details: E.g. material can be search even by “Plant”

1.2 Assign the source to PR
In the second step, let’s add a vendor to the requisition

Let’s select “Monitor Purchase Requisition items”

1.3 Convert PR to PO
Use the app with the name “Process Purchase Requisition”
Difference between “Manage PR Professional” and “Process PR” is that

 “Manage PR Professional” will be used by end business users to create a PR and

 “Process PR” will be used by the procurement team to identify which PRs must be converted to POs, assign
the source of supply/ create RFQs

In this app you can see the sources of supply for the material. You can click on it to view them incl. chart option
Once we select the source of supply for the unassigned PR with NO PO(!!!), then “Create Purchase Order” button
becomes enabled and you can convert PR to PO.

1.4 Monitor PO items

In this app you can view your PO items >> by e.g. PO number. This report is similar to ME2N with many additional
fields with delivery qty, value, invoice qty, amount. You can view the details, go into PO item itself. Also using the
quick links, you can manage PO or Post GR.

1.5 Post GR
Select Sloc >> see embeded analytics. As you can see here, if you have multiple Sloc, you have an overview of the
current stocks incl. stock category. So you can take a decision where to post the product. Also you can post splitted
stock > button “Distribution”.

You can navigate to the link to view the GR document with the process flow.
You can reserse it straight away. This transition from one step to another
works very quick. Please find the process flow below. You can click e.g. on
Accounting document and
 You can view Journal entries, Journal
entries in T account view (Soll/Haben
konto)

Note: For invoices, there’s also an app that

allows you to load invoices from Excel

1.6 Create Invoice

This link is not available in “Mnoitor Purchase order items”. But you can grab the assistance from UI5 consultant
who can add this link to the list.

Search for “Invoice”. You need a business role SAP_BR_AP_ACCOUNTANT_PROCUREMT.

App name is “Create Supplier Invoice”. We need to add PO number, CC, Invoice ref., change tax code from I1 to I0.
Then we need to simulate and post. Again after the invoice is created, we can view it.

From the invoice, you can go to “Manage PO” by navigating to PO item and view the process flow by PO Item: