Skip to Content

Create a Welcome Popup for Fiori Launchpad and Freestyle Portal Sites

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:


You must be Logged on to comment or reply to a post.
  • 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.


    • 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.


  • 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!

  • 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?



    • 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.

      • 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!

  • 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);




  • 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.

  • 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?



    • 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?




      • 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.



  • 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?



  • 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

  • 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.


  • 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?

    • Hi,


      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.



      • Hi,


        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