SAP Fiori Tutorial. Part II. End to End Implementation of Fiori App

Fiori Launchpad Designer
Share on Facebook31Share on LinkedIn192Tweet about this on TwitterShare on Google+0
Please Share!!

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.

  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
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

My Time Event Fiori App

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.

Transactional app

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.

Front-End Components

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.

Pre-requisites for Fiori

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.

SAP FIORI FOR SAP ERP HCM 1.0 - SPS 05 (07/2016)

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.

Software Component 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).

SAP FIORI FOR SAP ERP HCM 1.0 - SPS 05 (07/2016)

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.

SAP Fiori

Target Mapping

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

The ICF nodes for the following SAPUI5 application must be activated on the front-end serve

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

/IWFND/MAINT_SERVICE

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

maintain service

c) Select the row and hit Add Selected Services

SAP Fiori Step by Step Guide

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

SAP Fiori Implementation

e) This Pop-Up Message would come

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

Steps to Activate and Maintain OData Service

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.

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.

SAP Fiori App specific Configuration

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.

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.

Create Catalog and Group

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

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

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.

Fiori Launchpad Designer

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.

step by step Fiori Launchpad It would ask for the Catalog where you want to put. Search for the new Catalog which you just created.


You would see the below message at the bottom of the screen.

Difference between Catalog and Group

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

Launchpad in Fiori

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.

Target Mapping

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.

Create Reference

Search for your custom catalog where you want to save it.

SAP Fiori

You should see the confirmation message like below.

sap fiori implementation

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.

SAP Fiori Tutorial
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.

Step by Step tutorial of SAP Fiori

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.

Timesheet Approve appTutorial on SAP FioriSAP HANA, SAPUI5 and Fiori
At this point, let us check how our Custom Catalog looks like.

sapui5 and fiori

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.

SAP HANATake the note of Semantic Object and Action.

SAP Fiori - Configuration Overview

Let us check our custom catalog again. This time Tiles and Target Mapping matches.

App specific configuration

Check the Tiles are still Referenced.

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

How to break the Reference of the Tiles/Apps?

reference tile

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.

SAPUI5 and Fiori

Fiori and SAPUI5

Let us check the custom catalog tile again.

SAP UI5, Fiori and HANA

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?

Fiori and SAPUI5

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.

Fiori and SAPUI5

Now let us add the custom Catalog to this group.

Learn SAP Fiori

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

difference between group and catalog

Hit the + icon below the tile icon to add the tile to the Group. It would turn green and you would get a message.

SAP Fiori end to end

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.

SAP Fiori admin

learn sap fiori

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.

fiori training

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.

/UI2/FLP - 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).

fiori online training

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.

sap fiori

All Green.

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

 

Approve Timesheets

SAPX08

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 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

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.

Share on Facebook31Share on LinkedIn192Tweet about this on TwitterShare on Google+0
Please Share!!

About the Author

SAP Yard
SAP Yard
SAPYard is one stop page for all Technical Folks in SAP. You would find un-conventional explanations, tutorials, and tricks. Please like our Facebook Page and also join our LinkedIn Group.

10 Comments on "SAP Fiori Tutorial. Part II. End to End Implementation of Fiori App"

  1. Hi, i had to say that i ve learned a lot from all the blogs you ve written.
    You make technical subjects that usually are dense in easy to follow.
    now i d like to ask for a request. Do you have something similar to this topic but for HCP.
    I have to migrate web services (ex. approve purchase order) intalled in a fiori on premise to HCP.
    Thanks!!

  2. Hi, i had to say that i ve learned a lot from all the blogs you ve written.
    You make technical subjects that usually are dense in easy to follow.
    now i d like to ask for a request. Do you have something similar to this topic but for HCP.
    I have to migrate web services (ex. approve purchase order) intalled in a fiori on premise to HCP.
    Thanks!!

  3. Hi Team,

    I have a query on the Approve Timesheet V2 Fiori app. I have implemented the standard application on our environment, but not sure how to achieve the delegation functionality. I mean a manager from any org unit should be able to delegate his time- approvals to other manager.

    Any help/idea on this would be of great support to me in implementing this scenario.

    Thanks,
    Rakesh

  4. Hello,

    In the Activation of back-end OData Services step D, which package I need to put? Could be possible to transport sap fiori app configuration?

    Regards

    • Dear Sergio,
      Thank you for visiting our page and leaving your question.
      By step D, did you mean Step 4. Fiori Launchpad Designer?

      In either condition, the answer is Yes. All the Fiori App Configurations are transportable. And that is the beauty of SAP. For Launchpad Designer, you can see a Client XXX and a tool wheel icon on the right had side. Just click on it and it will ask for Transport number.

      It is good practice to assign a Transport number and then begin your Launchpad designer. Anything you do on the designer is saved in the transport.

      Till now I found that the only thing which was not transportable in Non-Dev was activation of the SICF Service. Which the Basis/Admin team did for us in Quality and Production.

      Please let us know if you still have any question.

      Regards,
      Team SAPYard.

  5. Please note: My Time Event and My Timesheet Apps are two different Apps to book Time in SAP..

    • Hello!

      Thanks for explanation. It makes perfect sense that My timesheets and Approve timesheets work together. The confusion really comes from the fact that My time event entires (clock-in/out) are not actually approved from Approve timesheets app, our are they? If yes, I’d really appreciate a link to SAP documentation explaining this in more detail 🙂

      Anyway, thanks for your good site and blog!

      Br,
      OM

      • Dear O Maclnen,

        You are right. There would be workflow behind the scene. My TimeEvent and My Inbox App work hand in hand. For approval you need to implement My Inbox App.

        Regards,
        Team SAPYard.

  6. Great tutorial! Thank you! But are these two apps really working together? I.e. My Time Events entries are approved in Approve Timesheets app? Is it using a workflow in the background?

    thanks!
    O MacInen

    • Dear O Maclnen – Thank you for your feedback and question. If your HR system has the right profile configured in CATS both the Apps would work together. In most of the cases, My Timesheet Create App and Timesheet Approve Apps work together as most organization who book time via CATs have this configured correctly.

      Do the users in your company use SAP to book time and Managers use SAP to approve time? If yes, then the Apps should work.

      Basically, when the timesheets are created, entries are populated in CATSDB table and related tables. When Approve Timesheet is used (in SAP or Apps) it looks into this table and figure out if anything is there to Approve.

      Hope we did not confuse you more.

      If you still have question, please feel free to ask again.

      Regards,
      Team SAPYard.

Leave a comment

Your email address will not be published.


*