Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Murali_Shanmu
Active Contributor
[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 w...

 









Building a central Launchpad using SAP Launchpad service on SAP BTP


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

Part 7 - Integrating with remote content providers

Part 8 - Enabling Notifications

Part 9 - Transporting Launchpad sites using SAP Cloud Transport Management service

 

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.
7 Comments
Labels in this area