Skip to Content
Technical Articles

Building a central Launchpad using SAP Cloud Platform Launchpad service – Integrating Chatbots using Shell Plugins

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

 

Building a central Launchpad using SAP Cloud Platform Launchpad

Part 1 – Getting Started

Part 2 – Understanding the options around developing HTML5 apps in Cloud Foundry

Part 3 – Developing HTML5 apps

Part 4 – Integrating HTML5 apps with the Central Fiori Launchpad

Part 5 – Integrating 3rd Party apps with the Central Fiori Launchpad

Part 6 – Integrating chatbots with the Central Fiori Launchpad

 

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.

Be the first to leave a comment
You must be Logged on to comment or reply to a post.