What is best to create a tile for a custom code ?

[cherifabir]

Introduction :

With an S4 / HANA system we are always asked to create tiles for custom programs/transactions.
The purpose of this blog post is to provide a step-by-step guide that explains on how to add ABAP
custom sap transaction to the Fiori Launchpad with two methods.

Prerequisite :

We must have a transaction created with SE93 and translated in SE63.
In our example, we already created the custom transaction ZFI_PAY to call a custom program
(Z program).

First method :

In this method, we will follow the steps indicated in this diagram.

1. Create semantic object :

Use the transaction «/N/UI2/SEMOBJ_SAP» to create a semantic object. Click on the «New
Entries» button and enter the name of the semantic object «ZFI_PAY» as shown in the
screenshot below.

 

2. Create business catalog :

Open the Fiori Launchpad designer using the transaction «/N/UI2/FLPD_CUST» or by
opening this link :  https: // : /sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html

Next, create a new catalog by clicking « + » :

Select the «standard» catalog, enter the «title», the «ID» and click «save».

NB: you can always modify the title, but the identifier (ID) cannot be changed.
The business catalog ID and the group ID are useful it will be used when configuring the role.

Click on the tile icon, then click on «+» to add the tile.

Select « App Launcher – Static ».

Enter the following details «Title», «Subtitle», «Icon», «Semantic Object», the «action» and
click on «save».

The new fiori tile «Payroll integration » is created successfully.

Next, you need to create a new target mapping by clicking on « create target mapping ».

To configure the target, enter the following details: « semantic object», « action», « application
type», « title», « transaction» and click « save».

Here is the result we get.

 

Before finishing, make sure to assign the configuration to a transport request (customizing
request).

Uncheck the «None (Local Object) » checkbox, and then choose the customizing request from
the drop-down box and click «OK».

3. Create Group :

Choose «Groups» from the top toolbar and click on the «+» icon on the left bottom of the
screen to create a new group.

Add the « Title» and the «ID» of the group then click on «save».

 

Click on the icon «+» to add a tile.

 

Search the business catalog and click on the «add button» to add the tile.
Once it turns green, it means it is added successfully to the Group.

 

4. Create role and assign to the user :

Use the transaction «PFCG» to create a simple role that will call the custom catalog and
group.

Enter the role name «ZS_FI_PAYE2» and click on « single role».

Next, go to the «menu» tab, click on transaction -> SAP Fiori Launchpad -> Launchpad
catalog and Launchpad group.

Assign the catalog and the group name, created in the previous step, to the role.

 

To visualize the tile, navigate to the user tab, enter the user ID and click save.

 

Finally, with the transaction /N/UI2/FLP you can view the tile in Fiori Launchpad.

 

Second method :

In this method we will follow the steps indicated in this diagram.

1. Create semantic object :

Use the transaction «/n/UI2/SEMOBJ_SAP» to create a new semantic object
«ZFI_PAY2» as indicated in the preceding method.

2. Create the technical catalog :

Open mass maintenance tool for app descriptors by executing the FPM Application
Configurations in the «SUI_TM_MM » package.

Also, we can follow the tree below :

Define the catalog name « ZTC_FI_PAY2 » and add the semantic object «ZFI_PAY2».

 

Enter the package and the transport request.

 

Fill these fields: the «semantic object », the «semantic action », the «application type »,
the «transaction code », the «target application title», the «target mapping information »
and click on «save ».

 

3. Add the mapping between the technical catalog and the system alias:

Map the custom back-end catalog to the front-end alias system by modifying the entries of the
table «/UI2/V_ALIASCAT » using the transaction SM30.

Enter in the catalog, the technical catalog name «ZTC_FI_PAY2» and the alias «S4FICA» and
click on «save».

4. Replicate application backend application to the frontend :

Run the extraction report «/UI2/GET_APP_DESCR_REMOTE_DEV» to extract the
Backend application descriptors and replicate them to the Frontend Technical Catalog.
Choose the «technical catalog», the «system alias», set «add transaction code to tile», set full
replication to the «Replication mode» and click «execute».

5. Create business catalog by reference to the technical catalog :

Open the Fiori Launchpad designer, search the technical catalog and swipe down to create a
reference catalog.

Add the title « BC FI PAY» and the ID « ZBC_FI_PAY» of the new catalog and click on
«copy».

 

We can see that the mapping is automatically copied.

 

Make sure to assign all the configuration to a transport request as we did in the first method.

6. Create a new business catalog :

Create a group «ZBG_FI_PAY2» as we did in the first method.

7. Create role and assign to the user :

Create a new simple role containing the catalog ID and the group as we did in the first method.
Finally, like in the first method, the tile is created successfully in the fiori launchpad.

Tile translation :

To translate the Fiori Launchpad tiles you can follow the steps described in this blog post .

 

Comparison between the first and the second method :

With the first method, the creation of the tile is simple, flexible and does not take much time
compared to the second method. But its maintenance is complex and take much more time.
The main difference between these two methods, is that in the first one, everything is created
in the business catalog. But with the second method, the business catalog is created by reference
to the technical and every change done in the tile and in the target mapping is also done
automatically in the reference.
In the second method, the technical catalog has too much content but sometime we need to
separate some applications from users. In this case there is the business catalog which acts as
a container of content that is needed for a specific users or specific business use case.

Conclusion :

Technically, the two methods allow us to create Fiori tiles but  sap, as described in this article , recommended the use of the second method because of its major benefit the re-use.