Skip to Content
Technical Articles
Author's profile photo Wouter Lemaire

Fiori Plugin Showcase – Add your plugin

Like Tom Van Doorslaer  explained in his blog post: , we have created a Fiori plugin showcase. Now in this blog post, I want to show how to share your own Fiori plugin to this showcase in more detail.


You only need to do the following 6 steps manually, the last 2 will happen automatically:

  1. Create your plugin, you can do this by using the template in the SAP Web IDE or the template provided by Tom: 
  2. Put it on GIT, this can be GitHub, GitLab or any other online git repository to share your code
  3. Publish your Fiori plugin to NPM. (In case you used the SAP Web IDE, you need to clone the repository for this step)
  4. Fork our repository that contains the list of Fiori plugins:
  5. Add the name of the NPM package from step 3 to the file “Plugins.txt” on a new line. (Make sure their is an empty line at the end of the file)
  6. Create a pull request and if the build is successful, we will make the merge for you!


Automatically Travis CI will make sure that your plugin will be added to the Showcase! As soon as the npm cache is updated, you’ll see your plugin in the Fiori Showcase:


All steps in detail with my “WhatsNewPlugin” as example:

1. Develop your plugin; I have developed this plugin in the SAP Web IDE but you could also start by using the template from Tom:

2. Put it on GIT.  I used GitHub for the What’s New plugin which you can find here:

You can also use any other online GIT tool like GitLab, BitBucket or anything else you like that supports GIT

3. Publish to NPM. In case you used SAP Web IDE, you won’t be able to publish it to NPM from their. Therefor, you need to clone the repository to your local computer:

Go into the folder of your plugin by using Command line:

Run the command “npm login” in this folder:


Remove private property and make sure the name has no uppercase in the package.json of your plugin:

Finally, publish your plugin to NPM by using the command: “npm publish”

4. Fork our repository :

Do this by going to the repository and click on “Fork”

You will have now your own version of the repository with the ability to make changes:

5. Add your NPM package: Go to your forked repo, open the file “Plugins.txt” and click on edit:

Add your npm package and make sure there is an empty line at the end.


6. Make a pull request: Click on “New pull request” in your forked repo


In the next screen click on “Create pull request”

Fill in a small comment so we know what’s been added and click on “Create pull request”

This will trigger the build process and add your plugin to the Fiori Showcase. We will accept the merge when the build is successful!

When the build is successfully done and the npm cache is updated, you will see your plugin in the Fiori Showcase:


Develop and add your plugin to the Fiori Plugin Showcase!!! 🙂

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Kiran J
      Kiran J

      Hi Wouter

      Its excellent to see how these plugins are being developed and shared. Thank you.

      One question regarding one of the plugin - the language switch/change is not working in Fiori 3.

      Any idea?

      my code snippet (few changes from your plugin):

      	var rendererPromise = this._getRenderer();			
      			rendererPromise.then(function (oRenderer) {
      				//fiori language
      				resources.i18nModel = resources.getTranslationModel(sLangu.toLowerCase());
      				resources.i18n = resources.i18nModel.getResourceBundle();
      				oRenderer.shellCtrl.getView().setModel(resources.i18nModel, "i18n");

      Please help.


      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      From s/4hana 2020 you can change the language in settings. No need anymore for this plugin