Update – Feb 2023 – Content is now available in the SAP-samples github repository

Providing your end-users with the best possible User Experience at work while using SAP solutions is still one of the pillars of SAP Fiori.

In the past, we provided some options on how to create an SAP Fiori Launchpad plugin with SAP WebIDE and SAP S/4HANA versions 1511 to 1909. However, as time goes by tools and technologies change, and as a side question many people still wonder how to create an SAP Fiori Launchpad Plugin while using SAP Business Application Studio, additionally, there’s multiple discussions on the Clean-Core concept and how to use it going forward to newer versions of SAP S/4HANA.

Considering these requests (using BAS to create a plugin, and giving an example on how to use clean core concept), from the SAP S/4HANA RIG we are providing an update to our previous blog: SAP Fiori for SAP S/4HANA – Developing a Custom Fiori Launchpad Plugin through a new exercise which would guide you through the development of an SAP Fiori Launchpad Plugin and a custom HTTP Service with Embedded Steampunk in SAP S/4HANA 2022.

But before we jump into the details, let’s answer some questions that you might have:

What is the use case for creating a plug-in in for the SAP Fiori Launchpad?

Overall, there might be some user requirements which cannot be provided via an application, for example: a new button in the Launchpad header to navigate to an external/third party site, a new settings option for a custom app in the user settings menu, adding a tool area to the Launchpad Shell to display a customized menu or the use case in our exercise which is providing a customized text in the Launchpad Shell Header for the user to identify which system and client they have logged on.

Custom Shell Header Title through plugin

How can you create an SAP Fiori Launchpad Plugin?

Nowadays, the recommended tool to create any SAP Fiori object is SAP Business Application Studio, with this tool you would create your custom plugin by using the standard SAPUI5 freestyle – SAPUI5 application generators and editing the generated project to create a component instead of an application. Same procedure can be run in VS Code.

While creating your plugin keep in mind the Plugin Development Guidelines and two main points:

1. Custom code in your plugin should be as simple as possible (otherwise it will affect the total load time of the Fiori Launchpad)
2. There is no guarantee from the launchpad at which point in time a plug-in is initialized so your implementation should handle situations where required resources might not be ready yet, or certain processing has already been executed.

Creating a plugin with standard generators

Why would plugins use the clean core concept?

As mentioned above you really need your plugin to be as simple as possible, hence you might want to push all business logic to the backend. This could be achieved by traditional OData or CDS development, but it could also be a good approach to achieve this by creating backend enabled HTTP services to be consumed by the plugin.

For testing purposes and as a starting point for you to learn about clean-core development we propose the following architecture for a sample custom plugin:

Clean Core – Plugin Development Architecture

Considering this architecture what you will be doing is:

1. You will start by creating an upgrade stable object. In this case through a custom function module based only on standard function modules and BAPIs to provide the required information from the system. This custom function module would act as a wrapper for standard objects.
2. Your custom function module will then be consumed by a custom HTTP Service. This service will contain a small footprint easing the maintenance effort and will be created on top of the Embedded Steampunk “engine” meaning at this layer you will be using cloud-like ABAP code which is also upgrade stable and even gives you options at a later point to decouple the code in this layer and relocate to other solutions like SAP ABAP Cloud Environment on BTP.
3. A custom Fiori Plugin created on SAP Business Application Studio. In this object you will implement custom code to call the custom HTTP service, manipulate data from the response (if needed) and publish information in the SAP Fiori Launchpad.

What’s next?

Having answered some of the basic questions, it might be best to start getting your hands dirty and doing some development. Please find the steps-by-step instructions to create a custom plugin with SAP Business Application Studio and Embedded Steampunk in SAP S/4HANA in the following Git repository:

Create an SAP Fiori Launchpad Custom Plugin with SAP Business Application Studio and SAP S/4HANA Embedded Steampunk

Tell me more!

For more information on Embedded Steampunk and possible use cases we strongly recommend reviewing the contents in the SAP Help Documentation of the ABAP platform.

Becoming a SAP Fiori for SAP S/4HANA guru

You’ll find much more on the community topic page for SAP Fiori for SAP S/4HANA

Other helpful links in the SAP Community:

• Follow our tag SAP S/4HANA RIG for more from the SAP S/4HANA Customer Care and RIG
• See all questions and answers about SAP Fiori for SAP S/4HANA
• Follow SAP Fiori for SAP S/4HANAfor more blogs and updates
• Ask a Question about SAP Fiori for SAP S/4HANA

Brought to you by the SAP S/4HANA Customer Care and RIG.