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.
The following are the Fiori App specific Configurations and points which we would try to understand, assimilate and cover today.
- Fiori Library
- Activation of front-end UI Service and back-end OData Service
- Authorizations (Admin & End Users)
- Fiori Launchpad Designer
- Start the Fiori Launchpad
Step 1) Fiori Library
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.
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.
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.
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.
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.
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.
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.
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. 🙂
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
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
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
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.
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.
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:
The default URL for the Fiori launchpad designer is:
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.
Select the Catalog Menu and hit the + icon at the bottom.
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.
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.
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 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.
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.
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.
Let us check our custom catalog again. This time Tiles and Target Mapping matches.
Check the Tiles are still Referenced.
How to break the Reference of the Tiles/Apps?
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.
Let us check the custom catalog tile again.
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.
Now let us add the custom Catalog to this group.
Since we added two Tiles in the Custom Catalog, we have two available for the group.
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.
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.
Step 5) Start the Fiori Launchpad
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.
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.
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
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:
- We got the link to Fiori Library and how to interpret the App related information present in the library
- We learned how to activate the front-end UI Service and back-end OData Service
- Now we know the PFCG roles and authorizations needed by Admin and End Users
- We created a custom Catalog and custom Group and designed our Fiori Launchpad
- 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 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!!
Useful Tutorials in SAPYard
1. ABAP for SAP HANA Tutorials
2. ABAP Web Dynpro Tutorials
3. GOS Tutorial
4. OOPs ABAP Tutorial
5. HANA Tutorial
6. SAP Netweaver and OData Tutorial
7. SAP Adobe Form Tutorial
8. SAP Fiori Tutorial
9. SAPUI5 Tutorial
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.