Skip to Content
Technical Articles
Author's profile photo Ido Shemesh

Create a Welcome Popup for Fiori Launchpad and Freestyle Portal Sites

Moderator’s note:

Note that our public GitHub repository, providing code samples for Cloud Portal on the Neo environment, is not available anymore. If you have further questions, contact us under

Fiori and Portal developers can extend the functionality of Fiori Launchpad and Portal custom sites using Fiori Shell plugins. The concept of plugins allows portal implementers to hook into the Fiori Shell and add new elements to the User Experience – add menu items, create a custom footer, extend the header and more.

Fiori Shell plugins are SAPUI5 component apps that are loaded and initialized automatically when the site is started. This means that in addition to hooking into the Shell UX, plugins can be used to initiate and run site related actions in the background. Enabling Google Analytics (GA) tracking in your Portal site is a great example – here the shell plugin app is used to load the GA library and register for tracking events.  For more information – Google Analytics for Fiori Launchpad.

In this post I’d like to show how to easily add a Welcome Popup to your Cloud Portal Fiori Launchpad and freestyle sites using a Fiori Shell plugin.



To develop and use the Fiori Shell plugin we will be using the SAP Web IDE for Full-Stack Development.

Before you start make sure you have the following in place:

  • Register for a free SAP Cloud Platform Trial account
  • Enable the SAP Cloud Platform Portal service in your account
  • Enable the SAP Web IDE Full-Stack service in your account


Create a Fiori Shell Plugin

To create a shell plugin please follow the instructions here:

SAP Fiori Launchpad Extensibility: Creating SAP Fiori Launchpad Plugins in SAP Web IDE

When generating the Shell plugin project enter the project name – welcomepopup.


Notice that the wizard allows you to generate sample code for hooking your custom UX controls into the Fiori shell – the Header, Footer and Me Area. For our scenario, you can leave those unchecked – as we will be creating a popover dialog.

Add the custom code

Now that the project has been generated let’s add the code for launching a popup welcome window.

  1. Under the welcomepopup root folder, create a new folder
  2. Name the folder – fragment
  3. Under the new fragment folder – create a new file
  4. Name the file – fragment.xml

  5. Paste the following code into the Popup.fragment.xml file:
        <Button id="cancelBtn" text="Close"></Button>
<!-- This is the popup content, you can replace it with your own HTML and / or SAPUI5 code -->
    	<html:div style="background-color: #fff; padding: 32px 16px 0 16px; margin: 0; overflow: hidden; font-family: Arial, Calibri, Tahoma, Geneva, sans-serif; background-color: #fff; min-height: 296px;">
		    <html:h1 style="color: #007cc0; font-size: 25px; padding-bottom: 16px; border-bottom: solid #cdcdcd 4px; font-weight: normal; margin: 0;">
		        Whats New</html:h1>
		    <html:p style="color: #666; line-height: 20px; margin-bottom: 0; font-size: 16px;">
		        Lorem ipsum dolor sit amet,
		        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
		        magna aliqua.

Your code should look like this:

Now lets add the code that launches the dialog box

  1. Double click to open the Component.js file
  2. Add the following code at the end on the init() method:
if (!this.dialogFragment) {
	this.dialogFragment = sap.ui.xmlfragment("welcomepopup.fragment.Popup", this);
this.dialogFragment.attachAfterClose(function() {
	this.destroy(); // view is destroyed as a video plays inside

your code should look like this:


Preview the Shell plugin

To preview the plugin in Web IDE follow the instructions here: Running SAP Fiori Launchpad Plugins in the Sandbox.

The Fiori Launchpad sandbox is opened in the preview tab, notice the popup welcome dialog is opened when the site as initially loaded.


Deploy the Plugin to SAP Cloud Platform

After developing and testing the plugin, deploy it to your SAP Cloud Platform account to make it available for Portal Admins to use in their portal sites. Follow the instructions here: Deploying SAP Fiori Launchpad Plugins to SAP Cloud Platform


Configure the Shell Plugin in your Fiori Launchpad Portal Site

If you already have a Fiori Launchpad portal site, you can add the welcome popup plugin to it. Otherwise, create a new Fiori Launchpad site by:

  1. Launching the Portal service from your trial account
  2. Once the Portal admin space is opened
    • Navigate to the Site Directory
    • Click on the + icon to open the Create Site wizard
    • Select the SAP Fiori Launchpad template
    • Enter the site name and click Create
  3. Once the site is created it’s admin environment (Fiori Configuration Cockpit) is opened in a new browser tab.
  4. To add the shell plugin
    • Click on Apps to configure new and existing apps in your Launchpad site
    • Click on + to add a new app
    • In the App Resource list select the welcomepopup application you just developed and deployed
    • Under App Type select Shell Plugin
    • Click on Catalogs and add the Sample Catalog or Everyone catalog or any other catalog you defined that contains the business roles you wish to assign the popup to.
    • Click Save to apply your changes

Publish and View the Fiori Launchpad Site

To make the latest changes available for your end users

  1. Click on the publish button in the top menu
  2. Confirm and click on Publish and Open

The Fiori Launchpad site is opened in a new browser tab. Notice the Welcome popup is opened once the site is loaded.

You can repeat those steps and add the popup window shell plugin to any freestyle portal site as well:


Assigned Tags

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

      Hi Ido,

      Thank You for  valuable blog its help me to creating the notifications in Fiori Launchpad,

      But in webide its working fine  for me . And deployed the applications in SAPUI5 ABAP REPOSITORY . when we are configuring in portal plugins we are getting an backend system not available  . attached the error image . please guide us how to resolve the issue.


      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Hi Sangamesh,

      I believe you were able to follow the instructions to create a popup on your Fiori Launchpad. I am not clear as to why you are selecting "Backend System". Are you trying to deploy the application from WebIDE to your ABAP Frontend server (which hosts the Fiori Launchpad) ?  The "Backend Systems" button will try to fetch all the systems defined in the SCP destinations with a particular property. I have documented its usage here. If you still have questions related to this, please raise a new question in the forum.


      Author's profile photo PABLO REIGRODRIGUEZ

      Hi Ido,

      Thanks for this blog! 

      Let's say I want to deploy this plugin project to a Enteprise Portal where a Fiori Launchpad is already in place. Would it be possible to use this Web IDE plugin project in with EP? Note that by exporting/importing project from Web IDE Full stack to usual Web IDE I was able to deploy to our Enterprise Portal system)

      We know it is possible to extend a Launchpad on EP (as stated here) but procedure seems to be quite different

      Thanks again!

      Author's profile photo Ido Shemesh
      Ido Shemesh
      Blog Post Author

      HI Pablo,

      You can follow the steps to register a shell plugin on EP as described in this blog:

      How to make use of the Fiori Framework Page Extensions


      Regards, Ido


      Author's profile photo PABLO REIGRODRIGUEZ

      Thanks for your answer Ido,

      Exactly, that's the blog we were following to make custom changes on EP, but as you can see it is just a plain js file instead of this fancy new brand Fiori template that you talk in this blog.
      Then I assume answer is no, we can't integrate this Fiori Launchpad Plugin template on EP


      Author's profile photo Raju Rajan
      Raju Rajan

      Hi Ido,

      Thanks for such a great blog.

      I have a requirment in sap Fiori launch onpremise to develop broadcast message tool. In your Case it is hardcoded message. How can we make one admin and  user screen. User screen is in your example covered. Admin should have one app in that he can update message for certain time period.

      We have achieved samething in enterprice portal.How can we do the same in case of Fiori?

      Please suggest if you have any ide?



      Author's profile photo Ido Shemesh
      Ido Shemesh
      Blog Post Author

      Hi Ram,

      You can have the admin create the message in an HTML format (with whatever tool youre using) and save in a location that would be accessible to the plugin to request as an HTML markup response.

      Im not familiar with the Fiori Configuration environment on premise but perhaps the message HTML file location can be configure as a Fiori property.

      In Cloud Portal you could implement this by reading the html file from the Portal's Asset Repository. The portal provides an API for the plugin to use for getting the file markup. Each time the admin will want to change the displayed message he will upload a new version of the file to the Portal's Asset repository.

      Author's profile photo Venkata Kandula
      Venkata Kandula

      Hi Ram,

      I have a similar requirement have you achieved this if so please share the details.

      Kind Regards


      Author's profile photo Raju Rajan
      Raju Rajan

      Hi Venkata,

      You should have two things ready in case of on premise.

      1. Admin UI - Only Admin can access this for creating these messages. It is saved in the backend table.
      2. Use welcome pop up plugin and read the updated message and show on the welcome message.

      That is how , you have to achieve this requirement.

      Thank you!

      Author's profile photo Surekha Chawale
      Surekha Chawale

      Hi Ido,

      I have  added ICON in Header of fiori launchpad .When first time launchpad get display i am able to view it and can perform required functionality. But when i open any App and return back to Home Page of Launchpad .The icon is getting invisible on launchpad .

      Below is my code

      rendererPromise.then(function (oRenderer) {
      icon: “sap-icon://customer”,
      tooltip: “Select Customer”,
      press: function () {
      if (!this.dialogFragment) {
      this.dialogFragment = sap.ui.xmlfragment(“com.mycompany.flp.flpplugiacc.fragment.Popup”, this);
      var oModel = this.getModel();

      }, true, true);




      Author's profile photo Ido Shemesh
      Ido Shemesh
      Blog Post Author

      Hi Surekha,


      Take a look at the documentation here:


      Notice that if you mark bCurrentState=false and dont provide any aStates 


      Regards, Ido

      Author's profile photo Surekha Chawale
      Surekha Chawale

      Thanks Ido ,


      It's worked .

      Author's profile photo berns yu
      berns yu

      hi Ido,

      Is there a way to disable the plugin when i don't have anything to broadcast? i just want the pop-up to be seen when there's a system broadcast.

      Author's profile photo Ido Shemesh
      Ido Shemesh
      Blog Post Author

      Not sure what a System broadcast is – but you can change the code to display the popup conditionally (if there is some REST API that you call to check the condition).

      You can also add a property to the portal’s site settings (in the admin environment) to indicate if the popup should be displayed or not – and add that condition to the popup code.The advantage here, is that an admin can control the popup appearance from the portal admin screens.

      You can user the SIteService JavaScript API for that:


      Regards, Ido

      Author's profile photo Ranjith Vallabhaneni
      Ranjith Vallabhaneni

      Hi Ido ,

      Nice blog 🙂


      Ranjit V

      Author's profile photo Benjamin Kreuscher
      Benjamin Kreuscher

      Hey all,


      excellent blog!

      I have a on-premise Launchpad running.


      I tried the steps provided by you in the SCP Web IDE.

      I do not know how to proceed with the steps Deployment, Launchpad Cofiguration of the "tile" and Publishing.


      Is there some one who set up a welcome page for on-premise Launchpad or knows a blog which discusses the configuration?



      Author's profile photo Ido Shemesh
      Ido Shemesh
      Blog Post Author

      Hi Benjamin,


      For an on-premise launchpad deployment take a look at this blog to learn how to add a shell-plugin:


      Regards, Ido

      Author's profile photo Benjamin Kreuscher
      Benjamin Kreuscher

      Hey Ido,


      thank you very much!
      This blog looks very good, i try to get this thing running and will give you a note once that worked.


      Regards, Benjamin

      Author's profile photo Karan Bahl
      Karan Bahl

      Hi Ido,


      I tried this, but I am getting an invalid xml error for the fragment. What could be the issue?




      Author's profile photo Mary Murphy
      Mary Murphy

      I also get an xml error after creating the popup fragment file and after adding the code.  Does it have anything to with defining the fragment like regular SAPui5 apps?  Were you able to resolve this?




      Author's profile photo Karan Bahl
      Karan Bahl

      Hi Mary,

      Can you try and run it; it runs properly even if it shows an error? I am also getting the error but on running the app it is running fine.



      Author's profile photo Mauricio Lauffer
      Mauricio Lauffer

      WebIDE's complaining because it cannot find the namespace definition. You can either add the namespace or just ignore the message.

      Author's profile photo Alexandre SABATIER
      Alexandre SABATIER

      Cool, thank you very much! Would you have any template to add a "Do not display again" feature?

      Author's profile photo Sujoy Das
      Sujoy Das

      Hello Ido,

      How do we handle this in Production?

      Is it like every new message has to be written in Development System Launchpad(webide) and then Transport to Production Launchpad?

      How to control these messages in Production?



      Author's profile photo Satish Dhanalakoti
      Satish Dhanalakoti

      We recently upgraded our portal to 7.5 and we want to have a Pop-up for displaying a warning message and it should have OK button and once clicked OK, it should take to the Portal.

      We are trying to do this in AFP in Standards mode using UI Theme Designer.
      I found UR Control Previews "PopupWindow" but when we build and save, it doesn't show up after login.

      I am a BASIS guy with very little knowledge on portal development.

      Any form of guidance is really helpful.

      Thanks and Regards,
      Satish Dhanalakoti

      Author's profile photo Saurabh Hambardikar
      Saurabh Hambardikar

      Thanks for the nice blog.

      I have one question. Can someone please suggest on how to block the popup once appeared. I have deployed the function on onpremise 1709 and when i access any legecy app tile it will appear again.


      Author's profile photo Maveric Ramos
      Maveric Ramos

      Good blog.


      How can i use the destinations in this way? im trying to use it like always from the neoapp.json and it works in the WebIDE but when i deploy in the portal is like it doesnt recognize the neoapp.json file, is there another way to achieve this?

      Author's profile photo Karsten Voigt
      Karsten Voigt



      could you solve that issue? I have the same problem. Destinations are not resolved in the launchpad. Testing the plugin in WebIDE (same subaccount) everything works fine.


      Any hint is welcome.



      Author's profile photo Maveric Ramos
      Maveric Ramos



      Yes, i dont have the source right now, so i dont know if im right.

      But in the controller of your app, you have to call the destination this way:

      /sap / fiori / "name of your app" / "path you define in neo-app"



      Author's profile photo DHIVYA CHELLAPANDIAN

      Hi Shemesh,


      Thanks for wonderful blog on Plugins. I have developed similar plugins in FLP, but loading of plugins takes time during initial loading of FLP. Only after FLP loaded completely, plugins are loaded. Is there a way to load plugins first and then load launch page of FLP.

      Author's profile photo Wesley Karayigit
      Wesley Karayigit


      I appreciate all the information on your blog. I've tried and worked perfectly.

      As a new guy on Fiori/UI5 development I am trying to add language options for button, text or title to that plugin.

      Somehow I've  tried to set i18n.Model the dialog fragment but I couldn't get success on that. Dynamic field such as {i18n>title} seems empty or when I set to the dialog fragment it shows only title text not the value.

      Could anyone help me how can I update on that plugin?



      Author's profile photo Rohit Darwade
      Rohit Darwade

      Hello Ido,

      Thanks for the blog.

      Question - Can we add this plugin to development gateway system?

      In-order to access this feature in production launchpad, I think firstly we need to add this plugin in development gateway.

      Please provide your input.