Dear SAPLearners, in this blog post we will learn how to extend standard SAP Fiori Launchpad using SAP Fiori Launchpad plugin extension.
Table of contents
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.
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.
2. Choose SAP Fiori Launchpad Plugin template and hit Next.
3. Enter project name and hit Next.
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.
5. Hit Finish to create the project.
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.
8. A new button is added to the Fiori Launchpad shell header and on click of it a message will be displayed.
Conclusion
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!
