Skip to Content
Technical Articles
Author's profile photo Soeren Holst
Soeren Holst
July 26, 2020 4 minute read

Developing a Shell Plugin for SAP Fiori launchpad on SAP Cloud Platform, Cloud Foundry environment with SAP Web IDE

Developers can extend the functionality of SAP Fiori launchpad using Shell Plugins. The concept of plugins allows SAP Fiori implementers to hook into the SAP Fiori Shell and add new elements like menu items, custom footers, header extensions and many more.

In this blog post I will show you how to extend your SAP Fiori launchpad on SAP Cloud Platform, Cloud Foundry environment.

As a SAP Fiori developer you might be familiar with the ‘SAP Fiori Launchpad Site Module’. Since this is not available for SAP Cloud Platform, Cloud Foundry environment, I would like to show you how to develop a simple Shell Plugin anyway with SAP Web IDE.

In this example we will add a button to the SAP Fiori launchpad header, which opens a pop-up with some basic information.

Following steps are necessary to deploy your shell plugin successfully to SAP Cloud Platform, Cloud Foundry environment.

1. Prepare SAP Web IDE for SAP Cloud Platform, Cloud Foundry environment development

Open SAP Web IDE Full-Stack via your SAP Cloud Platform, Neo environment subaccount.

Enter API Endpoint, Organization and Space for SAP Cloud Platform, Cloud Foundry environment in SAP Web IDE settings.

You can find this information in the overview of your SAP Cloud Platform, Cloud Foundry environment subaccount.

2. Develop your Shell Plugin

2.1. Create a Multi Target Application (MTA)

Workspace -> New -> Project from Template -> Multi-Target Application.

2.2 Create a HTML5 Module

Since there is no creation wizard for a Shell Plugin, we create an HTML5 Module and will change the project structure afterwards.

MyMultiTargetApplication -> New -> HTML5 Module -> SAPUI5 Application.

Open the Application Settings and change Project Type from SAP Fiori to Plugin.

My Shell Plugin -> Project -> Project Settings.

Delete the unneeded folders controller, css, model, view and file index.html in webapp directory.

For the Shell Plugin source code you can either use the code from an existing plugin, or you can create a ‘SAP Fiori Launchpad Plugin’ (for SAP Cloud Platform, Neo environment) and grab this coding.

Please make sure you activated the ‘SAP Fiori Launchpad Extensibility’ Extension in your SAP Web IDE settings.

Workspace -> New -> Project from Template -> SAP Fiori Launchpad Plugin.

Copy the methods init() and _getRenderer() from Component.js of your created ‘SAP Fiori Launchpad Plugin’ and paste them into the Component.js of your HTML5 module in the MTA.

Adapt the manifest.json of your HTML5 module:

2.3 Create a SAP Fiori Launchpad Site Module

Workspace -> New -> SAP Fiori Launchpad Site Module.

Add the HTML5 module component ID as a Catalog to the portal sites CommonDataModel.json

3. Build and deploy MTA project

3.1 Start build process

3.2 Start deploy process

The folder mta_archives is created after the build process has been successfully completed.

mta_archieves -> MyMultyTargetApplication_0.0.1.mtar -> Deploy -> Deploy to SAP Cloud Platform.

Please note that this may take a few minutes.

4. Run Launchpad Site with integrated Shell Plugin

Open SAP Cloud Platform Cockpit and navigate to the used space.

The App Router, in this case mymultitargetapplication-approuter should already be running. Select it and open the Application Routes.

You should see a SAP Fiori launchpad site with an additional button top left.

I hope this blog post provides the necessary information to develop and deploy your Shell Plugins successful to SAP Cloud Platform, Cloud Foundry environment. Please leave a comment if you have further questions.

If you prefer using SAP Business Application Studio please check this blog post.

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Manjunath GUDISI
      Manjunath GUDISI

      Hi Soeren Holst

      Im getting below errors while building the project. Can you please share the sample code of your project.

      11:44:53 AM (Executor) npm ERR! code ELIFECYCLE
11:44:53 AM (Executor) npm ERR! errno 1
11:44:53 AM (Executor) npm ERR! MyShellPlugin@0.0.1 build: `ui5 build --clean-dest --include-task=generateManifestBundle generateCachebusterInfo`
11:44:53 AM (Executor) npm ERR! Exit status 1
11:44:53 AM (Executor) npm ERR! 
11:44:53 AM (Executor) npm ERR! Failed at the MyShellPlugin@0.0.1 build script.
11:44:53 AM (Executor) npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
11:44:53 AM (Executor) 
11:44:53 AM (Executor) npm ERR! A complete log of this run can be found in:
11:44:53 AM (Executor) npm ERR!     /home/user/.npm/_logs/2020-08-13T06_14_53_550Z-debug.log
11:44:53 AM (Executor) [2020-08-13 06:14:53] ERROR could not build the "MyShellPlugin" module: could not execute the "npm run build" command: exit status 1
11:44:53 AM (Executor) make: *** [Makefile_20200813061432.mta:37: MyShellPlugin] Error 1
11:44:53 AM (Executor) Error: could not build the MTA project: could not execute the "make -f Makefile_20200813061432.mta p=cf mtar= strict=true mode=" command: exit status 2
11:44:53 AM (MTA BUILD) The "Task for mta build" process finished with code 1
11:44:53 AM (MTA BUILD) Build of "MTADemoApp" failed.
      Thanks, Manju
      Author's profile photo Theresa Schmid
      Theresa Schmid

      Hi Soeren,

      i have the same error like Sagar and I don't know how to fix. After deploying I want to see my App in the Portal to use it there.

      Can you tell me the error and how to fix it?

      I did it all your way but the build doesn't work.

      Is it maybe possible to share your code?

       

      Thank you!

       

       

       

      Author's profile photo Alex Camayo Changuendo
      Alex Camayo Changuendo

      Hi.

      I had the same error. In the console of web IDE the error was: No specification version defined for root project. So in the ui5.yaml file I inserted the next snipet:

      specVersion: '1.0'
      metadata:
      name: MyShellPlugin
      type: application

      With this, the proyect built successfully.

      Saludos.

       

      Author's profile photo Sagar Mantri
      Sagar Mantri

      Dear @soeren.holst

      Is there any way to use this plugin in site designed using site manager from portal service ?

      Author's profile photo Soeren Holst
      Soeren Holst
      Blog Post Author

      Hi Sagar,

      please also check this blog post:

      https://blogs.sap.com/2020/09/17/developing-a-shell-plugin-for-sap-fiori-launchpad-on-sap-cloud-platform-cloud-foundry-environment-with-sap-business-application-studio/

      Thanks,

      Soeren

      Author's profile photo Sagar Mantri
      Sagar Mantri

      Thank You Soeren 🙂

      Author's profile photo Mahendran Balasubramani
      Mahendran Balasubramani

      Hello Expert,

       

      Is it possible to make the FIORI plugin based on role assignment. i.e. Plugin should be available for specific group of users.

      Author's profile photo Prasenjit Bera
      Prasenjit Bera

      Hello Soeren,

      Can you share the details how to integrate plugin on SAP FIORI Launch Pad (S/4 Hana System)