Skip to Content
Author's profile photo Sergii Zaitsev

How to create simplest Fiori application locally: step-by-step from CDS View to Fiori Launchpad. Part 2.

In the first part of this blog  https://blogs.sap.com/2017/09/08/how-to-create-simplest-fiori-application-locally-step-by-step-from-cds-view-to-fiori-launchpad.-part-1./  we have created simplest Fiori application with local WEB IDE. Now we will deploy it on the frontend server and run with Fiori Launchpad.

 

1.Deploy SAP Fiori Application on Fiori Frontend Server.

We have to deploy our application to Fiori frontend server.

Select our application (ListReportPurchaseOrders) in Workspace folder and use menu “Deploy->Deploy to SAPUI5 ABAP Repository”:

Pictures 27

“System”  is destination to the frontend server.

Choose Next.

Picture 28

Because SAP Fiori Application is deployed to ABAP Server as BSP application, we have to use for the name up to 15 symbols and start the name from Z. Of course, if you want to transport this application, you must use transportable package (not $TMP).

Press Next and Finish.

Now we can check availability  of our application ZFIORI_PO as BSP application on the frontend server (transaction SE80 is used):

Picture 29

Consequently, with transaction SICF we can see our application as web service under ui5_u5 handler:

Picture 30

2. Adding our Fiori Application to Launchpad.

SAP Fiori Launchpad is the entry point to Fiori applications as on mobile as on desktop devices.

The Launchpad contains Fiori applications as “tiles”. Access to this tiles based on the user roles. Tiles are collected in catalogs. So, we will work with tile, role, catalogs,  and users.

There is well-known picture from SAP documentation with Fiori artifact relationship:

 

Picture 31

Recall there main definitions:

  • Semantic object – Represents a business entity (for example vendor, a sales order, purchase order in our case)
  • Action – Describes which operation is intended to be performed on the semantic object (display purchase order in our case)
  • Intent is a mechanism that allows to perform some actions on semantic objects
  • Target Mapping map the intent to the application. In this sample, simplification of target mapping is used(without LPD_CUST)
  • Catalogs contain tiles, user can find necessary tile in a catalog if the catalog belong to users’ role
  • If group with tile belong to users’ role, user see tiles from the group on Launchpad immediately

 

2.1 Semantic Object

Execute transaction /n/UI2/SEMOBJ. Press New Entry and add record:

  • Semantic Object: ZPOSem
  • Semantic Object Name: ZPOSem
  • Semantic Object Description: Sem Object for Purchase Order Items Report

2.2 Catalog and Title

Open your Fiori Launchpad Designer (the link will look like

http(s):<fronted_server_name>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap-client=<sap client>

By default,  catalog creation mode is opened.
Click on  :

Picture 32

Enter ID and Title and Press Save

Picture 33

Next, we create target mapping. Click on  to create an intent:

Picture 34

First, set application type to “SAPUI5 Fiori App”, then enter:

  • Semantic Object=ZPOSem
  • Action=display
  • URL = /sap/bc/ui5_ui5/sap/zfiori_po/  (see picture 30, there is path to the web service of our application)
  • Component = ListReportPurchaseOrders
  • Title = “Purchase Order Items Report”

Save.

Picture 35

Click to Tiles

Picture 36

Press “+” and select “Static” variant.

Picture 37

Again enter

  • Title = “Purchase Order Report”
  • Semantic Object = ZPOSem
  • Action=display

Save it. There is result:

Picture 38

2.3 Group and PFCG role

After creating the catalog with the tile, we can create a group. If user have a group in his PFCG role,  he can immediately see  tiles from a group on the Fiori launchpad.

Click on   the navigational pane and press

Enter ID and Title for the group.

Picture 39

Save it.

Picture 40

Click to “Plus” bellow “Show as Tiles” and enter “First Fiori Catalog” in value helper:

Picture 41

Press “Plus” for adding our tile from  ZCAT_1 (First Fiori Catalog) to ZGRP_1.

Picture 42

Result:

Picture 43

So, we have created the Fiori tile that can call the Fiori application through the Launchpad role.

This tile belongs to new tile group and tile catalog

After this, we have to assign there  group and catalog  to users by PFCG roles.

2.4 PFCG role and user for frontend server

We have to create PFCG role on frontend server and assign it to a user. Run transaction PFCG, create empty single role ZFIORI_1 and  save it.

Picture 44

On the Menu tab, open the menu of the pushbutton for adding objects (+ pushbutton) and choose the object type “SAP Fiori Tile Group”. Press the button.

Picture 45

Enter  ZGRP_1 into Group ID Field. Similarly, we add our catalog ZCAT_1 (select “SAP Fiori Tile Catalog” on the button):

Picture 46

It’s need to add an authorization for the OData service. On the Menu tab, open the menu of the pushbutton for adding objects (+ pushbutton) and choose the object type “Authorization Default”:

Picture 47

In the window, choose TADIR Service for Authorization default

Enter following values:

  • Program ID: R3TR
  • Object Type: IWGS

and enter Z_DDL_PUR_ORDER* in value help. You need to find out the full name (including version) of our OData service:

Picture 48

Now, we can see the set of authorization:

Picture 49

 

In addition to the role with Fiori application (ZFIORI_1) we need a role with basic Fiori authorization. This role is usually created during the Fiori configuration phase. See, for example https://help.sap.com/ -> SAP NetWeaver 7.5 -> SAP NetWeaver User Interface Services -> Security Information – Authorization .

For example, in my work  landscape I use a composite role ZSAP_UI2_ADMIN (copy from SAP_UI2_ADMIN) with additional authorization:

  • /UI2/CHIP
  • S_PB_CHIP
  • RFCALC (for trusted connection to backend server)

Finally, assign our basic Fiori role and  role ZFIORI_1 to test user on frontend server.

2.5 PFCG role and user for backend server

For PFCG role of the test user on backend  server (the same login name as on frontend) you can use authorization template /IWBEP/RT_MGW_USR.

3. Result

Go to Launchpad (the direct  link will look like

https://<frontend server>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.htm ), and enter your login and password. We can see the tile “Purchase Order Report”  belong to First Fiori group:

Picture 50

Press on the tile, and you  see blank “Purchase Order Report”. Next click view customization :

Picture 51

Select all columns on Columns table, group by pourchase document on Group table, and you can see something like:

Picture 52

4.Troubleshooting with Fiori and OData

1.Cache issues are very common in Fiori application development. When you change Fiori group, catalog, role on frontend server, I recomend to use  report /UI2/INVALIDATE_GLOBAL_CACHES on frontend server. When you change oData services,  transaction /IWFND/CACHE_CLEANUP must be used on frontend server, and transaction /IWBEP/CACHE_CLEANUP must be used on backend and frontend servers.

Please, read the blog https://blogs.sap.com/2015/06/16/sap-fiori-cache-management/ about Fiori cache details.

2.SAP Gateway Error Log transaction (/IWFND/ERROR_LOG) is very useful to resolve troubleshooting with OData authorization and other OData problems. There are examples an output of this transaction.

Picture 53

Line 3 – the authoization S_RFCALC has not been added to the role of backend user.

Line 4 – the authorization for OData service has not been added to the role of frontend user.

(For both mistakes, the Fiori application did not return data).

 

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Ibrahim Khan
      Ibrahim Khan

      Hi Sergii,

      Very informative Blog. You have configured the App without using LPD_CUST. Can you please let me know what is the difference between configuring the App directly and with using LPD_CUST.

       

      Rgds

      Ik

      Author's profile photo Sergii Zaitsev
      Sergii Zaitsev
      Blog Post Author

      Hi, Ibrahim.

      I have read that SAP recommend to use the target mapping configuration within the SAP Fiori launchpad designer (without LPD_CUST) - by performance and simplification reasons, see https://blogs.sap.com/2016/06/09/sap-fiori-launchpad-simplification-of-target-mapping-maintenance/#

      Technically, if we want to use LPD_CUST, we have to create Z-role in LPD_CUST transaction,

      Enter path to the  application web-service

      The, semantic object and

      SAPUI5.Component=ListReportPurchaseOrders in "Additional Information"

      After this on the intent step (Picture 34) we have to set Application type = ... with LPD_CUST and

      enter the LPD_CUST role name.

       

       

      Author's profile photo Former Member
      Former Member

       

      Where did you get the Component ListReportPurchaseOrders in the target mapping? I don't see it anywhere in the app and My Fiori app does not have anything called component. Did I miss a step somewhere?

      PS. My app says "Could not open app. Please try again later."

      Author's profile photo Jose Roberto Milan
      Jose Roberto Milan

      I did!!!!

       

      Excellent!!!!!

      Author's profile photo Cung Phan
      Cung Phan

      Great Post!!

      Thank you very much!!

      Author's profile photo GEORGI SHIRKOV
      GEORGI SHIRKOV

      Wonderful post! Very informative!