Building a central Launchpad using SAP Launchpad Service – Integrating Chatbots using Shell Plugins

[Update 2021]: Note that this asset was created before our branding changes related to SAP technology were announced on January 2021. Note that SAP Cloud Platform Launchpad was renamed to SAP Launchpad service, and SAP Cloud Platform Portal was renamed to SAP Cloud Portal service

[Update 2022]: Please note that this blog was published prior to the re-branding related to SAP Build portfolio, which was announced at SAP TechEd 2022. SAP Launchpad service and SAP Work Zone come together under the SAP Build Work Zone brand, with two editions: standard edition (formerly SAP Launchpad service) and advanced edition (formerly SAP Work Zone). You can learn more in this announcement blog post: SAP Build Capabilities Explained | SAP TechEd | SAP News Center

In this blog post, I will show how you can integrate a chatbot within the central Fiori Launchpad. I am referring to another recent blog post by Soeren Holst where he has explained in detail how you can use Business Application Studio and extend the Fiori Launchpad – “Developing a Shell Plugin for SAP Fiori Launchpad on SAP Cloud Platform, Cloud Foundry environment with SAP Business Application Studio”

I have been using SAP Conversational AI to build chatbots. With the current situation, I see many organizations deploying chatbots to help their staff with instant responses to the most common questions when they get back to work. I had earlier published a blog post on this topic “Enabling the Return To Work initiative using SAP Conversational AI & Qualtrics” where I have explained how you can quickly build a FAQ based chatbot using a wizard based approach and integrate it into multiple channels like Slack, Teams etc.

Build you bots using SAP Conversational AI

You can follow some of the previous blog posts or even new tutorial to get started with building a FAQ bot.  For this demonstration, I have created a configuration for a Webchat in the “Connect” tab.

The Webchat script will provide you with important details like the channel ID, Token etc. Copy this section as it will be used in our shell plugin.

Use Business Application Studio to create a HTML5 app managed by SAP

The Shell plugins which we need to develop are simple HTML5 apps.Similar to the previous blog post, use Business Application Studio to create a new SAPUI5 based application using the templates. Make sure you select the option “Managed by SAP Cloud Platform”  for the HTML5 runtime.

You can use the below code snippet

		init: function () {
            var rendererPromise = this._getRenderer();
            this.renderRecastChatbot();
        },

        renderRecastChatbot: function() {
			if (!document.getElementById("cai-webchat")) {
				var s = document.createElement("script");
				s.setAttribute("id", "cai-webchat");
				s.setAttribute("src", "https://cdn.cai.tools.sap/webchat/webchat.js");
				document.body.appendChild(s);
			}
			s.setAttribute("channelId", "XXXXXX");
			s.setAttribute("token", "XXXXXX");
        }, 

     _getRenderer: function(){
            var that = this,
            // @ts-ignore
            oDeferred = new jQuery.Deferred(),
            oRenderer;

            // @ts-ignore
            that._oShellContainer = jQuery.sap.getObject("sap.ushell.Container");
            if (!that._oShellContainer){
                oDeferred.reject(
                    "Illegal State");
                } else {
                    oRenderer = that._oShellContainer.getRenderer();
                    if (oRenderer){
                        oDeferred.resolve(oRenderer);
                    } else {
                        that._onRendererCreated = function(oEvent){
                            oRenderer = oEvent.getParameter("renderer");
                            if (oRenderer) {
                                oDeferred.resolve(oRenderer);
                            } else {
                                oDeferred.reject("Illegal State");
                            }
                        };
                        that._oShellContainer.attachRendererCreatedEvent(that._onRendererCreated);
                        }
                    }
                    return oDeferred.promise();
                    }   

The next step is to edit the manifest.json file. We need to identify this application as a component, add the CrossNavigation section and declare it as a plugin

I have provided the source code below for you to use

        "crossNavigation": {
			"inbounds": {
				"Shell-plugin": {
					"signature": {
						"parameters": {},
						"additionalParameters": "allowed"
					},
					"hideLauncher": true,
					"semanticObject": "Shell",
					"action": "plugin"
				}
			}
	    }
	},
    "sap.flp":{
        "type": "plugin"
    },

From the command, use “Build MTA” and deploy the mtar file which get generated.

Once the app is successfully deployed, you should see a new entry in your HTML5 Applications menu.

We can now integrate this HTML5 app (Shell plugin) with the Fiori Launchpad

Configure the Launchpad Site

Navigate to the Launchpad service and fetch the updated contents for the HTML5 apps

Add the Shell Plugin to your contents

Assign the Shell Plugin to a role. For simplicity, I have assigned it to the everyone role.

We are now ready to test the chatbot within the Central Fiori Launchpad. It will appear on the bottom righ hand corner as shown below.

You can click on it and start interacting with the bot and also navigate to apps which on the the Launchpad.

If you do have any issues while configuring the bot, please post a question in the relevant forum.