SCP Portal Plugin – Display system messages in Fiori Cloud Launchpad
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.
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/09f6b121acb64611b3d2abfb453f86d0.html
There are two methods to create a Fiori Launchpad (portal) plugin – acording to the documentation.
- SAP Fiori Launchpad Extensibility Plugin provided via SAP Web IDE template ‘SAP Fiori Launchpad Plugin’
- Creating a Shell Plugin from scratch using standard template ‘SAPUI5 Application’.
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.
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/87764543e31247b5b471c06e3f6da6fc.html
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:
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:
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.
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.
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
Returns FLP configuration values set in the FLP Cockpit (only exists when called from an FLP).
Returns hardcoded values similar to getAppConfig().
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.
Wow, this was a long blog. Thanks for reading this far.
I hope you find it useful.
Hello Søren ,
Thanks for Wonderful Blog.
I Tried to follow this Step.
How do we "Navigate to the Portal service in SAP Cloud Platform.".
Can You Please guide me here?
As you may know, CF only accepts an UI5 if it has a system in the background (like a destination registered). If I want to put a welcome popup with a shell plug in, unfortunately the portal service in CF still doesn’t allow that. I thought that with this example it may work, but it has that restriction of the system.
I’ve been looking for ways to enable a chatbot (CAI) integration with the portal service in CF, but without success.
I could do it with a shell plugin app but in the portal service on the NEO environment.
Just to ask, do you know any other way possible to enable these apps in the CF environment for the portal service?
I am also looking for this shell plugins example in CF env.
If you find something please post here.
Thank You in advance.
Have you been able to create a shell plugin for the Portal service in CF? Plugins are now supported in CF.