SAP Fiori Launchpad Plugin Extension


Dear SAPLearners, in this blog post we will learn how to extend standard SAP Fiori Launchpad using SAP Fiori Launchpad plugin extension.

SAP Fiori Launchpad Plugin

An SAP Fiori launchpad plugin allows you to extend or customize the shell of the SAP Fiori launchpad. These are implemented as SAPUI5 components.

You can easily create SAP Fiori Launchpad plugin using SAP Web IDE project templates, test, and deploy to an ABAP system (or) SAP Cloud Platform.

Now you know quite a bit about the SAP Fiori Launchpad plugin, let’s create an SAP Fiori launchpad plugin in SAP Web IDE.

Before start developing the launchpad plugin, you must enable the project template in SAP Web IDE.

Also Read: How to troubleshoot SAP Fiori Launchpad errors.

Enable SAP Fiori Launchpad Plugin extension

Launch SAP Web IDE in SAP Cloud Platform.

Navigate to Preference and then Extensions, search for “fiori launchpad plugin” and enable the extension.

SAP Fiori Launchpad Extensibility

After enabling the SAP Fiori Launchpad Extensibility extension in SAP Web IDE, you have to SAVE and refresh the browser.

Now that we have everything set up in SAP Web IDE, let’s build the launchpad plugin.

Video Tutorial

If you want to view a video tutorial, click on the link below.

Step-by-step Procedure

1. Launch SAP Web IDE. Create a new UI5 project based on the template.

SAP Fiori Launchpad Plugin Step1

2. Choose SAP Fiori Launchpad Plugin template and hit Next.

SAP Fiori Launchpad Plugin Step2

3. Enter project name and hit Next.

SAP Fiori Launchpad Plugin Step3

4. Provide PluginID, Title details. Under Sample Code you have three options to choose from, each one will generate sample code accordingly and the description of the options is quite understandable.

SAP Fiori Launchpad Plugin Step3

5. Hit Finish to create the project.

SAP Fiori Launchpad Plugin Step4

6. Finally, SAP Fiori Launchpad plugin project is successfully created.

Let’s understand the project structure and its contents

The most important file in the SAP Fiori Launchpad plugin project is “Component.js” file, all the code we write will go into this file.

Based on the option you selected in step 4, the sample code is already generated by the template.

In this example, we will add a button to the Fiori Launchpad Shell header, and on the button click to display a message.

7. Now that our code is ready, let’s test the launchpad plugin using SAP Fiori launchpad in a sandbox environment that is available directly from SAP Web IDE.

SAP Fiori Launchpad Plugin Step5

8. A new button is added to the Fiori Launchpad shell header and on click of it a message will be displayed.

SAP Fiori Launchpad Plugin Step6


Hurray! 🤩 you have successfully learned how to extend SAP Fiori Launchpad using Fiori Launchpad plugin.

Please feel free to comment and let us know your feedback. Subscribe for more updates

If you liked it, please share it! Thanks!