Create a Welcome Popup for Fiori Launchpad and Fre...

former_member199536 · ‎2017 Oct 12

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 sapportal@sap.com.

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.

Under the welcomepopup root folder, create a new folder

Name the folder - fragment

Under the new fragment folder – create a new file

Name the file - fragment.xml

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

Double click to open the Component.js file

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:

Launching the Portal service from your trial account

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

Once the site is created it’s admin environment (Fiori Configuration Cockpit) is opened in a new browser tab.

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

Click on the publish button in the top menu

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: