Technical Articles
How to create Custom Tiles for external applications in SAP S/4HANA Cloud
In this short blog post, you will learn how you can create your own custom Fiori Tile that can be used to access an external application, for example, that you would have developed in SAP Cloud Platform.
Target Audience
Key Users of SAP S/4HANA Cloud and Developers
Introduction
What can you expect from this blog?
In this blog I will guide you how to create a new Custom Tile in your SAP Fiori Launchpad to access the external applications. These external applications could be those that are developed using Side-by-Side Extensibility for example.
What skills are required?
Basic know-how of extensibility framework and working with SAP Fiori Launchpad is enough.
Note – As of now this tool is applicable only for SAP S/4HANA Cloud
The app in consideration to create custom tile looks like below –
How do I get this tile?
To get this app, you should be a Key User of the SAP S/4HANA Cloud system and should have following extensibility roles and catalog assigned to your user.
Business Catalog | SAP_CORE_BC_EXT |
Business Roles | SAP_BR_ADMINISTRATOR SAP_BR_ANALYTICS_SPECIALIST |
Let’s get started!
Let’s go ahead and understand how we can do this and create a custom tile for our external applications.
Since this blog only talks about creating the custom tile for our external application, details and how to create the external application is out of the context of this blog. I will just assume that in the practical and real scenario, you would already have this external application available.
Some of the key features of this app include –
- Define the URL to access the application
- Add an icon (this is optional. But I recommend using this feature to create a better look and feel of the custom tile)
- Define a title and subtitle
- Test the tile from the configuration itself to make sure it takes you to the external application
For complete details, please refer to the relevant app details in the Fiori Apps Library. The details of this App ID – F2994 can accessed from the link here.
Scenario
Create a custom tile for a Web application that is deployed on the SAP Cloud Platform
Let’s go ahead and see how to achieve this.
I already have a web application that is deployed on the SAP Cloud Platform. This application displays the product list from SAP Cloud Platform. Please refer to Figure 17 below to see how the app looks like. A user can select the product and place order for it. The app is deployed to the SAP Cloud Platform and you can see its URL below.
[Fig 2: Web app deployed on the SAP Cloud Platform]
Let’s go ahead a create a custom tile for this application. Follow the steps below –
Go to your Fiori Launchpad and choose the tile – Custom Tiles. Click on ‘New’ to create a new custom tile
[Fig 3: Create Custom Tile app in SAP Fiori Launchpad]
[Fig 4: Creating a new Custom Tile]
Give a Title to the tile and click on – Create
[Fig 5: Creating a new Custom Tile]
Next you can give – Subtitle (Optional), URL of the Web App, Hash and Icon (Optional). You can also specify the parameters. See the details of all these in the below table. Click on – Save.
[Fig 6: Creating a new Custom Tile]
Title | This is the main title of the custom tile that will be displayed on top |
Subtitle | Subtitle can be provided to give more details about the app |
URL | This is where you will provide the main URL of your external application |
Hash | This is the fragment identifier of the subordinate resource. Refer to this link for more details |
Final URL | This is the final URL |
Icon | You can provide a matching icon to give better aesthetics to your tile. The icon will appear in the below left portion of the tile |
Note – Now from the configuration itself, you can Preview how the tile will look like and click on the tile to confirm that the URL is working, and it takes you to your Web application
In the next step we will add this newly created custom tile to the catalog so that it appears in our Fiori Launchpad. For this click on the option – Assign Catalogs.
[Fig 7: Assigning the new custom tile to catalog]
Click on- Add and search for the business catalog, for example, I will use – SAP_CORE_BC_EXT business catalog.
[Fig 8: Assigning the new custom tile to catalog]
Select the Catalog to which we would like to add the new custom tile.
[Fig 9: Assigning the new custom tile to catalog]
Once selected, click on – Publish. The new app will now be published and added to the Catalog
[Fig 10: Publishing the new custom tile]
Once published the status will appear in green.
[Fig 11: Publishing the new custom tile]
Now let’s go ahead and add the newly created custom tile to the group. Go back to the home screen and click on the user icon and choose the option – App Finder
[Fig 12: Choose App Finder to add the new tile to the group]
Search for your custom tile or you can also go to the catalog – Extensibility from the list. Next click on the Pin icon – Add tile to add the new custom tile to the group
[Fig 13: Add the tile to the group]
[Fig 14: Add the tile to the group]
Once added you should get the success message.
[Fig 15: Add the tile to the group – Success message]
Now go back to the home screen and refresh the page once (in case the tile does not appear automatically). The newly created tile should appear in the group
[Fig 16: The new tile as it appears in the Fiori Launchpad]
Now if I click on the tile, it will launch the external application deployed on the SAP Cloud Platform
[Fig 17: Example of external application launched via custom tile in Fiori Launchpad]
Additional Learning
Just for demo purpose, I am also showing how you can launch the SAP WeIDE directly from your SAP S/4HANA Cloud system without logging into SAP Cloud Platform.
In the new custom tile, pass the URL of the SAP WebIDE. Copy the same from SAP Cloud Platform Cockpit.
Right click on the link – Go to Service and choose the option – Copy link address
[Fig 18: Copying the link address of the SAP WebIDE]
Now go to configure custom tile option and use the copied URL to create a new custom tile for launching SAP WebIDE.
[Fig 19: Copying the link address of the SAP WebIDE]
Next you can again add this to the catalog and there you go, from the SAP Fiori Launchpad of your SAP S/4HANA Cloud system, you can launch the SAP WebIDE. The new custom tile would appear in your group like below.
[Fig 20: Custom tile to launch SAP WebIDE]
Conclusion
Congratulations you have just finished – How to create a Custom Fiori Tile and launch an external applications via your SAP S/4HANA Cloud system!
I hope you will benefit from this blog. I encourage you to ask your questions on SAP S/4HANA Extensibility under the following tags –
SAP S/4HANA Cloud – Link here
ABAP Extensibility – Link here
Thanks for the nice blog post.
A minor observation: in fig 8 I think the arrow is misplaced, should be towards 'Add'. Please ignore if not correct.
Regards,
Sumit
Thanks Sumit Kumar Kundu for your observations and visiting the blog.
Cheers
Rohit
P.S. Corrected the image
Nice Blog Rohit Khan , As usual , you are very good in presenting. Thanks for sharing.
Thanks for your feedback Pawan Kalyan .
Cheers
Rohit
Nice blog, Rohit Khan.
Just an additional hint for the readers: depending on the system architecture and on the nature of the Web APP, it might be necessary to adapt the app URL after importing the SW collection in the P system.
This action can be performed directly in the P system and afterwards the custom tile will be marked as "Changed locally".
Best regards,
-Luca-
Luca Biasotto is it also possible to change parameters values in P system directly? Thanks & Br, Jan
Hi Jan Kaemmerle,
what I can tell you with no doubt is that you can ADD a new parameter to a custom tile in the P system.
Since we don't manage custom tiles with parameters, I cannot make a test and give you a definite answer about the possibility to CHANGE an existing parameter directly in the P system, but I guess this action is allowed as well.
-Luca-
Hi,
Thank you for this blog. This helped me a lot. My question is, it is possible to deploy an app to SAP APAB repository instead of deploying it in SAP Cloud Platform and putting the deployed link in the custom tile you created? I did this and from what I observed, the tile is just redirecting the page to the deployed link in SCP unlike in onpremise, the launchpad will open the app coming from the ABAP repository. Is it also possible in S/4 HANA Cloud?
Thank you!
Hi gilbert trinidad ,
Yes, you can deploy an extension app back to SAP S/4HANA Cloud ABAP repository. You can refer to SAP Fiori tools here for more details on how to deploy.
Once an app is deployed, you need to assign it to a custom catalog extension and system will generate a tile for it automatically. You will not use this option mentioned in this blog for this requirement.
Best regards
Rohit
Hi Rohit Khan,
thank you for this Blog Post.
I have a question regarding the URL parameters that you can define in the APP.
Is it possible to define dynamic values.
For example, the language set by the user in the system?
Thank you and best,
Tim
Hi Tim,
No at the moment this is not supported. When you define a parameter, it expects a value. That value is fixed and not dynamic.
Regards,
Rohit
Hi Rohit Khan,
Thank you for your help with your knowledge, can you please help me with a question? Do you know how to change a standard tile or copy an existent one like my inbox, to put some new parameter?
Thank you for your help!
Kr,
Renan
Hi Rohit Khan-
is it possible to open the application in place instead opening it new tab?