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.
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.
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.
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.
- SAP Managed Tags:
24 Comments
