Skip to Content

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.

 

Prerequisites

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:
<Dialog
	contentHeight="400px"
	contentWidth="400px"
	title="Welcome"
	xmlns="sap.m"
	xmlns:html="http://www.w3.org/1999/xhtml"
	xmlns:core="sap.ui.core">
	<buttons>
        <Button id="cancelBtn" text="Close"></Button>
    </buttons>
<!-- This is the popup content, you can replace it with your own HTML and / or SAPUI5 code -->
    <VBox>
    	<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.
		    </html:p>
		</html:div>
    </VBox>
</Dialog>

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);
	sap.ui.getCore().byId("cancelBtn").attachPress(function(){
		this.dialogFragment.close();
	}.bind(this)); 
}
			
this.dialogFragment.attachAfterClose(function() {
	this.destroy(); // view is destroyed as a video plays inside
});
this.dialogFragment.open();

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:

 

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

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

    Thanks.

    (0) 
    1. 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.

       

      (0) 
  2. 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!
    Pablo

    (0) 
      1. 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

        Thanks!
        Pablo

        (0) 

Leave a Reply