SAP Fiori Tutorial. Part II.

End to End
Implementation of Fiori App
By SAP Yard - January 26, 2017

Shares

In Part I of our SAP Fiori Step by Step Guide, we learned about System Configuration and
Installation. You now know how to check if your SAP Landscape System is ready for SAP
Fiori Implementation and Deployment. In this article, we would take a closer look at the Fiori
App related Configurations. System Configuration check is more of Basis/Admin related
activity but Fiori App related configuration and design definitely come in the purvue of an
ABAPer and Front-end developer. So, ABAPers, sharpen your concentration power and keep
your mind open to learning this useful topic of exploring the SAP Fiori Library, checking the
Add-Ons for the chosen Standard Fiori Apps (two examples), activating the Services (UI
and OData) of Standard Fiori Apps, design and launch the Fiori Launchpad.

BREAKING NEWS!!! – End To End Video Course on SAP OData – Absolutely FREE!!!!
 The following are the Fiori App specific Configurations and points which we would try to
understand, assimilate and cover today.

1. Fiori Library
2. Activation of front-end UI Service and back-end OData Service
3. Authorizations (Admin & End Users)
4. Fiori Launchpad Designer
5. Start the Fiori Launchpad

Step 1) Fiori Library

Shares
Please bookmark the below link to the standard SAP Fiori Library. As of today, 11:02 PM CST
(see, how late in the night our SAPYard Team work), 22nd Jan 2017, there are 7671 Apps
released by SAP. For every Fiori Implementation, we would need to refer to this Fiori
Library.

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

Que: Why do we need to visit the SAP Fiori Library?

Ans: Library is the temple of information. Isn’t that enough?
Before deciding to build any custom App, you need to browse through the library if SAP has
provided any standard App(so that you do not re-invent the wheel). If you already know the
Apps name to implement, you can get more information regarding the Key features of the
standard App as what type of App is it (Transactional /Fact /Analytical) and what the App is
supposed to do.
Shares

The library also serves as the guide to technical folks like us. It has all the required
information needed for Installation, Configuration, Extension and Support.

Let us see, what is under Installation section.

Shares

Check the Software Component Version and Pre-requisite for Installation section for both
Front-End and Back-End Components in the Installation section of the Library (image above).
UIHR001 100 – SP0005 is the Front-end Software Component Version and Pre-requisites
as shown above. Now, let us go to our SAP Front-End (Gateway) system and check our
version (image below). Luckily, both, Software Component Version UIHR001 and Pre-
requisites are met in our Landscape as shown below.

Go to t-code SAINT to check your Components/Add-ons and service pack levels.

Shares

If you do not have access to t-code SAINT or if you want more information regarding your
system, go to any t-code, from System Menu > Status > Product Version Component
details.

Check the Installed Product Versions. It meets all the requirements mentioned in the
Installation Section of the Fiori Library.

Similarly, check the Product and Component Versions and Pre-requisites in SAP Back-End
system. As per the Fiori Installation guide in the Library shown above, GBX01HR is the
Software component and Release 600 SP 0005. Look below, our system has the component
(GBX01HR) installed and has the right version.
Shares
SAP FIORI FOR SAP ERP HCM 1.0 – SPS 05 (07/2016) is the Prerequisite for installation
and since we saw that the Software Component with right Version is already installed in our
system, the pre-requisite had to be met (below image).

Hope by now we were able to justify the importance of referring to the Fiori Library. If still
not convinced, look at the Configuration Section for jewels of technical information.

Configuration Section:

The configuration section is the one which most ABAPer and Front-End Developers need to
refer. It has App-specific data required to configure the App i.e. the technical names of
SAPUI5 Application Service (front-end), Back-end OData Service, Launchpad related
information (Catalog/Group/Role/Target Mapping) etc.
Shares

In the Library, do check the Extensibility and Support section. Whenever we need to do
any modification to the standard Fiori App, we would need to refer to this section to look for
 the extension points in views and hooks for custom code in controllers. When you need
to raise OSS request to SAP for their support in case of any issue in standard App, you would
need to type in the Application Component and Type from the Support section of the
library for the right team from SAP to pick your ticket and work on it.

In the previous article, we revealed that the IT director wanted to implement My Time
Event App for Employees and Approve Timesheets for Managers. So please do not be
surprised if you see information and screen prints of those two standard Apps in today’s
presentation.

Shares
Step 2) Activation of frontend UI Service and backend OData Service

We will configure “My Time Event” App and “Approve Timesheets” (Version 2) App
simultaneously. We would show step by step for My Time Event and you need to do the
same steps for Approve Timesheets as well (hands-on for you). All the screen shots above
were for My Time Event App.

Hand-On Exercise # 1: Go to the Fiori Library and check the Installation and Configuration
section for Approve Timesheets App.

i. Active the SAPUI5 Application (service) In the Front-end system

Go to t-code, SICF. Provide service name HCM_CICO_MAN (we got this service name
from Fiori Library) and execute. Right-click on the service name and Activate it (if not active).
If you do not have access or authorization for SICF, please take help of your company’s SAP
Admin or Basis Team.

Path to ICF Node is /sap/bc/ui5_ui5/sap/hcm_cico_man

Shares

Do the same step for Approve Timesheets App UI Service: HCM_TSH_APV. How did we
get this Service name? From the Fiori Library buddy. Go the library and search for Approve
Timesheets and get the information.

ii. Activation of back-end OData Services

If you have embedded system, your front-end and back-end services need to be activated in
the same one system. But if you have Central Hub System (separate front-end and back-
end), you need to add and activate the back-end OData Service on the front-end server
(even though it is back-end OData service). In the beginning, I thought the OData Service
had to be added to the back-end system but I was wrong. I had some confusion initially so
thought of pointing this out.

a) Go to t-Code /IWFND/MAINT_SERVICE
Shares

b) Provide the System Alias and Technical Service Name (HCM_CICO_MANAGE_SRV)

c) Select the row and hit Add Selected Services

d) Keep the default Technical Service Name or change the name as per Project naming
convention
Shares

e) This Pop-Up Message would come

f) Go back to t-code IWFND/MAINT_SERVICE. The added service should be available.

 When you select the added service and hit the Call Browser on the above screen, an XML
page should open up. Assuming the System Aliases and other configurations mentioned in
Part I is done correctly. If the browser shows any error, fix the error first before you proceed
to next step.

Hand-On Exercise # 2: Please follow the same steps and activate the OData Service
HCM_TIMESHEET_APPROVE_SRV for Approve Timesheet App.

Also Read: SAP Netweaver Gateway and OData Service for Beginners from a Beginner.

Shares
Step 3) Authorizations (Admin & End Users)

Authorization object S_RFCACL should be assigned to Fiori App users so that they can use a
trusted connection.

As per the Configuration section of the Fiori Library, standard PFCG role
‘SAP_HR_BCR_EMPLOYEE_T‘ is needed for My Time Event App.

Users also need the below two Roles as per their job duty:

Standard Role SAP_UI2_USER for Fiori Launchpad User

Standard Role SAP_UI2_ADMIN for Fiori Launchpad Designer

In addition to the above roles, Fiori User who intend to use the My Time Event App, should be
provided access to the Service Object generated in t-code /IWFND/MAINT_SERVICE. Go to t-
code PFCG, Menu Tab > Authorization Default > TADIR Service:
a. Program ID: R3TR
b. Object Type: IWSG

Maintain the newly added Service Object Name ZHCM_CICO_MANAGE_SRV_0001.

Shares

How did we come to know about the ZHCM_CICO_MANAGE_SRV_0001 name? Do a

F4 in the PFCG while adding it, you can find it. Or go to Maintenance View
‘/IWFND/V_MGDEAM’ (Assign SAP System Aliases to OData Service) to get the exact
Service Document Identifiers.

Hand-On Exercise # 3: What is the standard Business PFCG Role name for Approval
Timesheet App? Hint: Check the Fiori Library.

Step 4) Fiori Launchpad Designer

The default URL for the Fiori launchpad is:

https://<hostname>:<port
number>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html

The default URL for the Fiori launchpad designer is:

https://<hostname>:<port number>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html

Que: How do we know the Hostname and Port number of our SAP System?
 Ans: Please check Part I for it. Or just execute t-code /UI2/FLP for SAP Fiori Launchpad
and t-code /UI2/FLPD_CUST for Fiori Launchpad Designer (client-spec.)

i. Create Custom Catalog and Add Standard Catalog Tiles to Custom Catalog Tiles

Go to your Fiori Launchpad Designer link or execute t-code /UI2/FLPD_CUST. You should
see a blank screen like below.

Shares

Select the Catalog Menu and hit the + icon at the bottom.
Shares

Provide a suitable Title and Id. You can change the title anytime but the Id cannot be
edited. So give the id as per the naming convention of your project.
 Now search for the standard catalog which we want to move to the new custom catalog.
For our case, we are using Employe (HCM) SAP_HR_BC_EMPLOYEE_T catalog. Check the
Fiori Library Configuration section for the Catalog name for My Time Events App.

The moment you hold any tile, Create Reference and Delete options show up. Hold the My
Time Event App and drag and drop it to Create Reference icon.

Shares

It would ask for the Catalog where you want to put. Search for the new Catalog which you
just created.
Shares
Shares
You would see the below message at the bottom of the screen.

Along with tiles, we also need to move the Target Mapping.

 Click on the Tile of the App (My Time Events) for which we want to move the Target
Mapping. Take note of the Semantic Object and the Action.

Shares

Go back. Select the Target mapping Icon. Choose the Semantic Object and Action which
we noted above. Once you select the line, buttons become active at the bottom.

Hit on Create Reference. We are just creating the reference (link) from standard to our
custom Catalog.

Search for your custom catalog where you want to save it.
 You
Shares should see the confirmation message like below.

Please note: The custom catalog has number 2 beside it. Hope you guessed it correctly. One
is for the tile and another one is for the target mapping which we just added. The number
would grow as we keep adding tiles and target mappings.
Shares

Tip: Usually, the number of Tiles and Target Mapping should be same. Always check the
numbers. If you forget to configure the Target Mapping correctly, then your Launchpad would
have an issue.
 Now, let us assume our launchpad needs to be available for the approvers as well. So let us
configure the standard launchpad for Timesheet Approve App.

Hand-On Exercise # 4: Configure the standard catalog of Timesheet Approve App into the
custom catalog created above.

Hint screenshots below.

Shares
Shares

At this point, let us check how our Custom Catalog looks like.

We mentioned earlier, Tiles and Target Mapping numbers should be same. But it is not
matching in this case. So, let us add our target mapping.
Shares

Take the note of Semantic Object and Action.

Shares

Let us check our custom catalog again. This time Tiles and Target Mapping matches.
 Check the Tiles are still Referenced.

Shares

It means, the Tiles are referenced and the original tile or application resides
somewhere else.

How to break the Reference of the Tiles/Apps?

Shares

There is a message which says, it is a reference tile.

Any change in the Tile would break the reference. We will change the Title from My Time
Events to Employee Time Events and save it. Pop up message confirms it would break the
reference.
Shares

Let us check the custom catalog tile again.

Shares

Now, if you click on Employee Time Events tile, you would not see any Reference Message.
Did you notice on the above image, the dotted border is vanished from non-
reference tile but exists on the reference one?

Hand-On Exercise # 5: Following the above steps, break the reference of Approve
Timesheets Tile/App.
 ii. Create Custom Group and Add Tiles

Go to the Groups menu, hit the + icon, give the Title and Id and hit Save.

Shares

Now let us add the custom Catalog to this group.

Shares
 Since we added two Tiles in the Custom Catalog, we have two available for the group.

Shares

Hit the + icon below the tile icon to add the tile to the Group. It would turn green and you
would get a message.
 Que: How to assign the new Catalog and Group to SAP User?
Ans: Go to t-code PFCG and create a Role. Hit Menu and then Insert Node and add SAP Fiori
Tile Catalog and Group one by one.

Shares
Shares

After you select SAP Fiori Tile Catalog, choose the Catalog Id you want the user to have.

(please pardon us for the low quality of the above three images)
 Hand-On Exercise # 6: Following the steps mentioned above, add Catalog Group to SAP
User Id’s role.

After both Catalog and Group are added, it should look like this.

Shares

Step 5) Start the Fiori Launchpad

http://hostname:port number/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
or
https://hostname:port number/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html

If you are wondering how to remember the link for every other client. Just remember the t-
code /UI2/FLP. This would take you to the SAP Fiori Launchpad.
Shares

After the role is assigned to the user, the Fiori login should show you the Group we create
above. For our exercise, we created the Group 3 (Employee Time Booking and Approval).
 Remember, we added only Employee Time Events Tile on the Group. Therefore only one tile
is visible when we log into the Fiori Launchpad. The Approve Employee Timesheet tile is not
visible as of now. Let us add Approve Employee Timesheet Tile as well to the Group. When
we re-login, we should be able to see two tiles on the Employee Time Booking and
Approval Group.

Steps to add the second tile to the custom Group: Go to the custom group we created.
Add the Approve Employee Timesheet Tile.

Shares

All Green.
Shares

We just added the second tile to the Group. Let us log into the Fiori link again. We would see
the second tile as well. Hope this clarifies that the catalog tiles need to be added to the group
in order it to be visible to the user.

Let us test the two Apps which we just configured and implemented as delivered by
SAP, without a single line of custom code.

My Time Event App

Shares

Approve Timesheets

Congratulations, you have successfully implemented two standard Fiori Apps end to end.

This is one of the lengthy posts in SAPYard. We could have divided into multiple parts but we
decided otherwise. I think our readers would benefit more by having all the information on
one page rather than browsing through multiple web pages.

Summary for today’s session:

 1. We got the link to Fiori Library and how to interpret the App related information present
in the library
2. We learned how to activate the front-end UI Service and back-end OData Service
3. Now we know the PFCG roles and authorizations needed by Admin and End Users
4. We created a custom Catalog and custom Group and designed our Fiori Launchpad
5. We logged into the Fiori Launchpad and executed two standard Fiori Apps

In case you are lost, please scroll up and try to go through this article again (especially if you
are a newbie to Fiori). Intermittently, please log into your front-end and back-end SAP
System and try the t-codes. You need to have a good friend in your Basis/Security Team to
Shares
grant you all the access. Take them into confidence to provide you the required role in your
sandbox system so that you can make your hands dirty and learn from your mistakes.

Hopefully, this post and the one before this would give you the confidence to implement any
Fiori App supplied by SAP. Many clients like to implement the SAP Fiori App out of the box
with no customization and enhancements. Such projects would be a good learning ground for
ABAPers. Make good use of such opportunities.

But everything is not a bed of roses. There are business cases and exceptions where you
would need to modify and enhance the standard Fiori App. Now, you are in a soup. Do
not worry, Team SAPYard would not leave you with half-baked knowledge about Fiori. In our
next part, we would show step by step, how to enhance a standard Fiori App. We would
also learn to enhance a standard OData Service, add new fields in the standard Fiori
App, add a new column in the Standard Fiori App table, hide buttons etc. Till then, get
accustomed to the new T-Codes you came across today. Try to implement some more
standard Fiori Apps apart from the two demonstrated above. Do not worry, there is no
chance that you can break anything in your development or sandbox system.

If you GENUINELY like our articles then it would be a HUGE help if you subscribed and liked
us on facebook. It might seem insignificant, but it helps more than you might think.

Do you have anything to add to this article? Have you faced any issue understanding SAP
Fiori? Do you want to share any real project requirement or solutions? Please do not hold
back. Please leave your thoughts in the comment section.

Thank you very much for your time!!

Call for Guest Authors and Contributors to write SAP Articles on our page and get
noticed and also receive cool Gifts.
 Do you have any tips or tricks to share? Do you want to write some articles at SAPYard?
Please REGISTER and start posting and sharing your knowledge to the SAP world and get
connected to your readers. Please check our simple guidelines for contributing your articles
and receiving the gifts.

Check Step by Step Tutorials on SAP Fiori

SAP Fiori from Space Level

Fiori App – An Introduction from an ABAPer
SAP Fiori Tutorial. Part I. System Check, Installation and Configuration
SharesSAP Fiori Tutorial. Part II. End to End Implementation of Fiori App
SAP Fiori Tutorial. Part III. Flow Chart to Enhance Standard SAP Fiori App
SAP Fiori Tutorial. Part IV. How to change non-English Default Language in Fiori Launch
Pad?
SAP Fiori Tutorial. Part V. End to End Implementation of My Inbox – Purchase Order
Approval App
Display & Download PNG JPG PDF Document in Fiori Client Android with 3rd Party App for
Zoom/additional options
How to Deploy UI5 App without LPD_CUST?
SAPUI5 For ABAPers – Component Reuse with Real Time Example
SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD
Operations
Configuring SAP GUI Transaction in Fiori Launchpad
SAP Fiori Tutorial. Part VI. How to Troubleshoot SAP Fiori Errors?
CDS Part 11. How to Consume CDS View in Smart Business Service KPI Fiori Apps?
SAP Fiori Tutorial. Part 7 – Custom Fiori App to Approve Change Requests in SOLMAN
SAPUI5 – Custom Control in UI5
SAP Fiori Tutorial. Part 8 – How to Extend Standard Fiori App – both UI & OData?

Also, check HANA-ABAP Tutorials

 ABAP on SAP HANA. Part I. First Program in ABAP HANA
ABAP on SAP HANA. Part II. ADT Eclipse and HANA Studio
ABAP on SAP HANA. Part III. Debugging in ADT
CDS Part 1. Core Data Services – Introduction
CDS Part 2. Core Data Services – Deep Dive
ABAP on SAP HANA. Part VI. New Age Open SQL ABAP 740
ABAP on SAP HANA. Part VII. SQL Script and SAP HANA Stored Procedure
ABAP on SAP HANA. Part VIII. ADBC – ABAP DataBase Connectivity
ABAP on SAP HANA. Part IX. AMDP – ABAP Managed Database Procedure
ABAP on SAP HANA. Part X. AMDP with SELECT OPTIONS
Shares
ABAP on SAP HANA. Part XI. Are Native SQL and Open SQL Competitors?
ABAP on SAP HANA. Part XII. Open SQL, CDS or AMDP, which Code to Data Technique to
use?
ABAP on SAP HANA. Part XIII. Sample Functional Specification of HANA Project
ABAP on SAP HANA: Part XIV. HANA Ready, HANA-tization & HANA Plus
CDS Part 3. Expose CDS Views as OData Service through Annotation
ABAP on SAP HANA: Part XVI. HANAtization
ABAP on SAP HANA: Part XVII. ATC – ABAP Test Cockpit Setup & Exemption Process
SAP ABAP on HANA: Part XVIII. SALV IDA (Integrated Data Access)
ABAP for SAP HANA. Part XIX. Sample Technical Specification of HANA Project
ABAP for SAP HANA. Part XX. ALV Report On SAP HANA – Opportunities And Challenges
4 Useful Tips on ABAP and ABAP on HANA
Associations in HANA – A Conceptual Approach
CDS Part 5. ABAP CDS Views With Authorization
ABAP for SAP HANA. Part XXII. How to Consume Native HANA Views Using ADBC?
CDS Part 6. Basic Expressions & Operations Available for CDS View – I
115 ABAP for SAP HANA Interview Questions & Answers
CDS Part 7. Basic Expressions & Operations Available for CDS View – II
CDS Part 8. Usage of Built-In Functions in CDS – I
CDS Part 9. Usage of Built-In Functions in CDS – II
CDS Part 10. Usage of Built-In Functions in CDS – III

We have a very active Telegram SAP Technical Group. Please join it using below link.
Telegram SAP Technical Discuss Group.

WhatsApp had the limitation of 256 members per group and we were finding a hard time
syncing and maintaining information in multiple WhatsApp group. Therefore we have moved
to Telegram as it can accommodate more than 10,000 users. Please join.
 SAP Yard
https://sapyard.com/

SAPYard is one stop page for all Technical Folks in SAP. You would find un-conventional explanations,
tutorials, tricks and end to end Free SAP Video Courses and Training. Please like our Facebook Page,
follow us at Twitter, Instagram and also join our LinkedIn Group. Please Subscribe to our Youtube
Channel for Free SAP Video Trainings.

       

Shares