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.

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]

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