SCP Portal Plugin - Display system messages in Fiori Cloud Launchpad

[sorenviggo]

 

Hi All.

In this blog post I will demonstrate how to create a configurable Fiori Cloud Launchpad (SCP Portal) plugin to display system messages, using the current guidelines from SAP.

 

Background

I have been struggling with SAP Support over the last 3 months to get a clear answer on how to use Portal Plugins, and want to share my findings with others, who might have the same problems as I did.

The documentation for creating Portal Plugins can be found this way:

• Log in to SAP Cloud Platform


• Go to the Service 'Portal' (enable it if needed)


• Click Useful Links->Documentation


• Choose SAP Cloud Platform Portal->Portal on the Neo Environment->SAP Fiori Launchpad Sites->Developer Guide->Extending the launchpad

The current version can be found here: https://help.sap.com/viewer/8422cb487c2146999a2a7dab9cc85cf7/Cloud/en-US/09f6b121acb64611b3d2abfb453...

 

There are two methods to create a Fiori Launchpad (portal) plugin - acording to the documentation.

1. SAP Fiori Launchpad Extensibility Plugin provided via SAP Web IDE template 'SAP Fiori Launchpad Plugin'


2. Creating a Shell Plugin from scratch using standard template 'SAPUI5 Application'.

 

IMPORTANT:

While method 1 is very easy to use, provides a very nice starting point and a very easy path forward to do your custom development, SAP Support (Development Team) has explicitly stated that this method is no longer supported.

This leaves only option 2 for supported plugins.

 

Note:

At the time of writing, it is very easy to get method 1 to work, however some issues should be noted:

• In the plugin template, the manifest.json file has property "sap.app"->" applicationVersion"->" version" set to a blank value.


• After deployment of the plugin, and performing a check of the application in the "App Ressources" of the Portal (Fiori Launchpad) Site, you will see errors. You can choose to "Download report" to view details. In here you will see the error message: 'sap.app/applicationVersion/version' is mandatory


• This can be fixed by setting the value in the manifest.json file.


• However after doing this, the app can no longer be seen in the "App Ressources" overview nor can it be selected while trying to add the plugin on a Portal Site.


• To my knowledge this bug will NOT be fixed by SAP, due to method 1 being viewed as obsolete (unsupported).

 

For the rest of this blog I will focus on method 2 and show how to create a plugin to display status messages in the Fiori Launchpad Portal in SAP Cloud Platform.

The standard documentation can be found here: https://help.sap.com/viewer/8422cb487c2146999a2a7dab9cc85cf7/Cloud/en-US/87764543e31247b5b471c06e3f6...

I am providing the code in this GitHub repository: https://github.com/sorenviggo/SCP_FLPMessagePlugin

 

HelloWorld Portal Plugin

Let's get started



Create a new project in SAP Web IDE using the template 'SAPUI5 Application'.

Provide a project name and a namespace.

Accept all defaults and finish the wizard.



Remove subfolders controller, model and view from the webapp folder.



Replace the Component.js file content with this simple HelloWorld implementation.

The HelloWorld implementation of the app can be found from this commit source code version:

https://github.com/sorenviggo/SCP_FLPMessagePlugin/tree/54c0fc57c79e9d5c98ee03061416991a5b64d8cf

 

Note:

Just to verify that this HelloWorld type application is working we will deploy it to the SAP Cloud Platform and assign it to a Fiori Launchpad Portal Site, and check that it works.

 

Select the project and choose Deploy->Deploy to SAP Cloud Platform



Deploy the app



The HTML5 app in SCP

 

Navigate to the Portal service in SAP Cloud Platform.

Add a new site or edit an existing.



In the App Ressource overview the new app (plugin) can now be viewed.

Due to a bug in the Cloud Portal (should be fixed on sept. 26th 2019), we need to register the app manually. To do so, copy the three marked values for later registration.



Due to the above mentioned bug we cannot set the correct App Type when selecting the app via the App Ressource selector, so we have to register it manually via the bottom three fields after selecting the proper App Type (if you read this after September 26th 2019 this may be possible).

Assign a proper Catalog and click Save.



In the top right corner click the Publish button



Click 'Publish and Open'



We now see the MessageBox from our plugin implementation.

Please note: There is no tile associated with this SAP UI5 app. It is configured as a 'Shell Plugin' and hence has no associated tile.

 

Real FLP Message Plugin

We now extend the implementation of the Component.js file, to implement more advanced features to display configurable messages in the Cloud FLP.

We want to enable configuration of the plugin via the Fiori Launchpad Configuration.

The code for this can be found in the master branch of the mentioned Git Repository:

https://github.com/sorenviggo/SCP_FLPMessagePlugin

 



Example use: When activated the plugin displays a bar in top of the FLP. Here a message will be shown, and a button for displaying further information.



When clicking the button, a popup appears with further information. Text is rendered as HTML, so simple HTML tags for formatting are supported.

 

Let's look at some of the code in the Component.js file.

 

Attribute 'testmode':

Since all behaviors of the plugin is controlled via Fiori Launchpad Configuration, which is not available when doing local testing in Web IDE, this attribute controls whether configuration parameters should be loaded from hard-coded values in the app. This boolean attribute must be set to false, when deployed to SCP.

 

Function _getRenderer():

This function has been copied directly from the Web IDE template 'SAP Fiori Launchpad Plugin', which gives a consistent method to derive a Renderer promise. Details of the renderer promise object can be found here: https://sapui5.hana.ondemand.com/#/api/sap.ushell.renderers.fiori2.Renderer

 

Function setupFlpMessageContent():

This is the main function, which is called from the overridden function createContent(), which is called from the FLP runtime. In here we setup the view elements via JavaScript (no XML view is present).

 

Function getAppConfig():

Returns FLP configuration values set in the FLP Cockpit (only exists when called from an FLP).

 

Function getAppConfigTest();

Returns hardcoded values similar to getAppConfig().

 

Function getMessageConfig():

Returns configuration values from getAppConfigTest() when testmode=true, and from getAppConfig() otherwise.

 

Supported configuration parameters:

isActive                Boolean to control if the plugin view elements should be shown or not.

autoPopup           Boolean to control if the popup should be displayed automatically, when loading the FLP

showAsButton     Boolean to display text as a Reject button (in red)

flpMessage          Message displayed in the FLP

longMessage       Long text displayed in the popup (supports simple HTML tags)

popupTitle            Title of the popup

closeBtnText        Text (label) on the close button of the popup

 

Configuration of the plugin



The configuration of the plugin is done in the 'Parameters' section of the App configuration in the Fiori Launchpad Cockpit.

 

Testing the plugin in Web IDE

If you want to make changes to the implementation of the plugin, perform these tasks:

• Change values to be considered in function getAppConfigTest()


• Change attribute 'testmode' (first line in Component.js) to true (remember to set it back to false before deployment).


• From the menu choose: Run->Run as SAP Fiori Launchpad Sandbox

The plugin is executed in a sandbox FLP, with no tiles.

That's it.

 

 

Wow, this was a long blog. Thanks for reading this far.

I hope you find it useful.

 

Best regards,

Søren Hansen