Skip to Content

UPDATE 25-Aug-2018 : Though the chatbot works on its own, there appears to be a problem with accessing the Fiori tiles on the launchpad. I am looking for a solution and will update the post when I find one.

Conversational User Interfaces(CUI) are the new UIs. We are all aware of the rise of the intelligent assistants in the market and they are becoming part of our day to day conversations. We as consumers are beginning to use the same to also interact with enterprise software too – lookup for clothing trends and place an order in your favourite retail store. Analysts are predicting this to be the next biggest paradigm shift in information technology.

Most of you would be aware that SAP acquired a bot building platform called Recast.AI early this year. This has been integrated with SAP portfolio and is now generally available as SAP Conversational AI.

Some of the biggest strengths of SAP Conversational AI are its Natural Language Processing (NLP) capabilities, Off-the-shelf bot which are pre-trained for each industry, Integration with multiple channels like Slack, Skype, Messenger etc.

I have been working with my colleague Joni Liu (Chatbot expert) on how to integrate the chatbot with an application on SAP Cloud Platform. Since the Fiori Launchpad is the central point of accessing business information, we thought we would try and integrate the chatbot with the Launchpad. Below are the steps we followed and you can try this too using the trial account.

In order to enhance the Fiori Launchpad on SAP Cloud Platform, you would need to build Shell plugins. If you would like to know more about Shell plugin and how to create your own Fiori Launchpad, I would highly recommend you to go through this openSAP course where this has been covered in detail.

Before we start with configuring things in the Cloud Platform, you would need to obviously create your chatbot. You can register for a free trial account in Recast.AI website. There are plenty of tutorials which can help you get started.

In the below screen, I have created a chatbot for Supplier interaction and added few intents to support the interaction with suppliers.

In the “Connect” tab, you can configure the chatbot to be embedded within other channels like Skype, Twitter etc.  For this demo, I am selecting Webchat as this needs to embedded within a web page.

Create a new Webchat configuration and select the color scheme, Header logo and title which you like to show within the Fiori Launchpad.

You also have the option to customize the bot/user picture along with welcome message

At the bottom, you can provide further customizations and give a name to the webchat channel.

When you click on “Create” button, this would provide you a webchat script. Copy this for use within the Shell plugin which would be created later. In particular, you would need the Channel ID and Token details.

Now its time to switch to your Cloud Platform Trial account. Launch “SAP WebIDE Full-Stack” service. We no longer use the old “Web IDE” service based on the announcement here.

 

Enable the Feature “ SAP Fiori Launchpad Extensibility” and restart the IDE.

Create a new project based on a template

Select “SAP Fiori Launchpad Plugin”

Provide a project name

In the Template customization, provide the plugin ID and a Title. Since we don’t need sample code for header/footer, leave the checkboxes uncheked.

In the component.js file, add a line within the function init() to invoke the function renderRecastChatbot(). Below is the definition of renderRecastChatbot(). Note that the ChannelID and Token values are the ones copied earlier from Recast.AI.

renderRecastChatbot: function() {
			if (!document.getElementById("recast-webchat")) {
				var s = document.createElement("script");
				s.setAttribute("id", "recast-webchat");
				s.setAttribute("src", "https://cdn.recast.ai/webchat/webchat.js");
				document.body.appendChild(s);
			}
			s.setAttribute("channelId", "49b174d8-1246-4721-ae8c-c84104a28fbf");
			s.setAttribute("token", "358a49c73ddfbba38ebbb36c78e5253b");
},

This is how the component.js file would looks like after making the changes.

You don’t need to change any other file. You can deploy the application to your SAP Cloud Platform account after saving the changes.

The next step, is to prepare a Fiori Launchpad site. In the Fiori Configuration Cockpit, add a new app based on app type “Shell Plugin”. Below are the value which I provided based on my application.

Property Value
App Type Shell Plugin
Shell Plugin Type Custom
Component URL /
SAPUI5 Component com.sap.myushellplugin
HTML5 App name myshellplugin

Below is the configuration of my Shell plugin app

Publish your site and test the Launchpad. You should be able to see the chatbot on the bottom right hand corner with the onboarding message.

You can click on it and start interacting with it. In this case, since this is a supplier portal which I have setup, the chatbot can be used to assist the supplier with queries around the status of orders.

 

 

To report this post you need to login first.

17 Comments

You must be Logged on to comment or reply to a post.

  1. Emanuele Ricci

    Murali, could you suggest me how did you connect to the trial services in order to implement the chatbot? Or those messages was just faked?

    (0) 
  2. Momen Allouh

    I tried it with SAPUI5 app in local laptop or any host and it worked. The  Recast AI < script > tag can be inserted to any Web App without the need for SAP Cloud Platform.

    The “Call Webhook” in Action Tab can be used to connect to any web services (like sap gateway) to get results that can be displayed as reply message.

    (0) 
  3. Harshit Joshi

    Hello Murali,

    Great blog, really helpful. Following this, I was able to add the web chat to my application. But I am facing an issue. Once the bot is added to the application, I can’t access other elements of my web app. Nothing happens when I click on any element, only the web chat is accessible.

    Are you aware of any such issue.

    Your help would be really appreciated. Thanks in advance.

    Kind Regards,

    Harshit

    (3) 
  4. Alexandre Lara

    Hello Murali, I was able to add the chatbot. Otherwise, when I try to navigate through the apps, I got an error like “Could not open app. Please try again later.”. Could you help me, please ?

    (1) 
    1. Aravindhan KN

      Yes, I too get the same error “Could not open app. Please try again later.” while trying to launch other tiles in the launchpad. The chatbot worked though. Were you able to find a solution?

      (0) 
  5. Aravindhan KN

    Hi Murali Shanmugham

    Thanks for your blog.

    I followed your steps and could successfully interact with the chatbot from my Fiori launchpad. But the existing application tiles in the launchpad wouldn’t launch after the chatbot is rendered. We get the following error

    TypeError - Cannot read property 'id' of null Application Navigation Sample
    “Could not open app. Please try again later”.

    The browser console logs the following error while the chatbot was initially rendered. Can you check please?

    ResizeHandler-dbg.js:106 
    Uncaught TypeError: Cannot read property 'id' of undefined
        at constructor.R.attachListener (ResizeHandler-dbg.js:106)
        at Function.R.register (ResizeHandler-dbg.js:228)
        at constructor.onAfterRendering (ScrollEnablement-dbg.js:624)
        at b (Element-dbg.js:151)
        at f.a._handleEvent (Element-dbg.js:164)
        at w (RenderManager-dbg.js:517)
        at x (RenderManager-dbg.js:562)
        at Object.R.render (RenderManager-dbg.js:678)
        at Object.V.renderViewPortPart (ViewPortContainerRenderer.js?eval:4)
        at f.V.addLeftViewPort (ViewPortContainer.js?eval:4)

    Regards,

    Aravindhan.

    (1) 
  6. Alessandra Souza

    Hello, Murali. Is there any way to integrate the webchat in an SAPUI5 app directly? Am trying to use the script for an application, but it seems the the existing controls override the chat. Tia!

    (0) 
  7. Vinod Patil

    Hello Murali,

    Thanks for blog.

    With this approach, chatbot runs fine but Fiori launchpad itself fails to work. I cannot open any tile, me area does not respond.

    Can you please double check at your end? I am even trying other approaches using oRenderer but so far no success. Any help is appreciated.

     

    I see below error in console:

    2018-08-22 15:55:06.845300 The issue is most likely caused by application sap.ushell.components.shell.MeArea. Please create a support incident and assign it to the support component of the respective application. – Failed to load UI5 component with properties: ‘{
    “asyncHints”: {},
    “name”: “sap.ushell.components.shell.MeArea”,
    “url”: “../../../../../resources/sap/ushell/components/shell/MeArea”,
    “componentData”: {
    “startupParameters”: {},
    “config”: {
    “enabled”: true
    }
    },
    “async”: true
    }’. Error likely caused by:
    TypeError: Cannot read property ‘id’ of undefined
    at constructor.R.attachListener (https://webidetesting9804555-**trial.dispatcher.hanatrial.ondemand.com/resources/sap-ui-core.js:1192:225)
    at Function.R.register (https://webidetesting9804555-**trial.dispatcher.hanatrial.ondemand.com/resources/sap-ui-core.js:1195:89)
    at constructor.onAfterRendering (https://webidetesting9804555-**trial.dispatcher.hanatrial.ondemand.com/resources/sap/ui/core/library-preload.js?eval:963:4316)
    at b (https://webidetesting9804555-**trial.dispatcher.hanatrial.ondemand.com/resources/sap-ui-core.js:1015:230)
    at f.a._handleEvent (https://webidetesting9804555-**trial.dispatcher.hanatrial.ondemand.com/resources/sap-ui-core.js:1015:378)
    at w (https://webidetesting9804555-**trial.dispatcher.hanatrial.ondemand.com/resources/sap-ui-core.js:1150:3578)
    at x (https://webidetesting9804555-**trial.dispatcher.hanatrial.ondemand.com/resources/sap-ui-core.js:1150:4086)

    Regards,

    Vinod Patil

    (1) 
  8. Saujanya GN

    hi Murali

     

    Thanks for sharing . I tried adding the chatbot to the app ,but I cannot see the chatbot . Any help would be highly appreciated.

     

    Thanks

    Saujanya

    (0) 

Leave a Reply