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 SAP Fiori Launchpad plugin, lets create a 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.

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 setup in SAP Web IDE, lets build the launchpad plugin.

Step-by-step Procedure

1. Launch SAP Web IDE. Create a new UI5 project based on 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, each one will generate sample code accordingly and description of the options 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.

Lets understand the project structure and its contents

The most important file in 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, sample code is already generated by the template.

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

7. Now that our code is ready, lets 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 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!

mail is now on Telegram. Click here to join our channel and stay updated with the latest tutorials and updates.

Like us on Facebook and follow us on Twitter.