In the last few years, the Conversational AI Bot (Chat Bot) has been use for to different verticals, such as Natural resources, monitoring Health , Environment sector, banking and Finance, smart spaces robotic explorations, to name a few.
Running a Large-scale industry which runs on SAP ERP tool they have been also modifying themselves to make for user friendly. There are numerous up-gradation has happened. Now ERP tool has come to mobile devices which is like similar to APP based operation for ERP ex: FIORI.
But there is a lag between New generation technology with SAP Fiori. To overcome this the communication or Natural language processing-based system is required which can ease the day to day life of SAP user. The Fiori Chat Bot can bring the tremendous amount of ease with respect to user workload. It also does not require training cost. The NLP based system detect the intent of communication and perform the task accordingly.
Integration of Chat Bot with SAP Fiori opens a broader aspects of business process.
here We are going to see the integration of Chatbot with Sap Fiori
i have covered the use case for l Getting the PO Approval document pending count as well as what are the documents.
We can even do it for multiple cases.It is based on our interest to explore more.
Our conversational AI has been developed on these platform.
My Approach …
We have used Dialog Flow API ref key in our application to identify the intent of communication.
Let’s start with Dialogflow there are various posts/ documents available to create Dialogflow chatbot
Here i would try to cover some of the points.
which can help you to get started
Create a Dialogflow account and give a name as of your bot and define Intent
To know more Intent entities and to start with Dialogflow can refer below link
Overview | Dialogflow
Just to get the brief idea of Intent .. In general
For communication we always try to find intent of the communication to give the right response.
NLP is based on that.
We have set the intent like GET_PO_LIST
I have set the response of the GET_PO_LIST as 1
So that while righting Ui5 bot code when the response is found 1 it will be able to call respective OData services which will have the details of these queries.
We can add multiple scenario in to handle the user query with the he help of calling the respective OData services.
We can format the response to show the data in conversational bot.
This can show the that
I have added small talks eg. How are you?… About Agents,Courtesy etc.
small talk to make it more interesting
To move towards with coding let’s have a look on below diagram
Get the api key
The most important part is where you should find your access token to call this bot internally.
Now Use the access token key in the code and
Once the Dialogflow is ready We can move to SAP UI5 Application
This is how the SAPUI5 application structure looks
index code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>chatbot</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"chatbot": ""}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "chatbot"
})
}).placeAt("content");
});
sap.ui.getCore().recognition = new webkitSpeechRecognition();
sap.ui.getCore().accessToken = "use your access token";
sap.ui.getCore().baseUrl = "https://api.api.ai/v1/";
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Master controller code :
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("chatbot.controller.Master", {
onInit : function()
{
jQuery.sap.require("chatbot/model/chatapi");
//this.responsestring = [];
sap.ui.getCore().responsestring = [];
},
onDialogPress : function () {
var oView = this.getView();
var oDialog = oView.byId("chatDialog");
// create dialog lazily
if (!oDialog) {
// create dialog via fragment factory
oDialog = sap.ui.xmlfragment(oView.getId(), "chatbot.view.chatDialog", this);
// connect dialog to view (models, lifecycle)
oView.addDependent(oDialog);
}
oDialog.open();
},
onReq : function(Event){
if (event.which === 13) {
event.preventDefault();
this.send();
}
this.getView().byId("input").setValue("");
},
onPress : function(event){
this.getView().byId("response").setValue("");
this.getView().byId("input").setValue("");
if('webkitSpeechRecognition' in window){
var recognition = new webkitSpeechRecognition();
recognition.lang = "en-US";
recognition.continuous = true;
recognition.interimResults = true;
recognition.start();
//setTimeout(recognition.stop(),10000);
//sap.ui.getCore().
recognition.onresult = function(event) {
var text = "";
for (var i = event.resultIndex; i < event.results.length; ++i) {
text += event.results[0].transcript;
}
sap.ui.getCore().byId("__xmlview0").getController().setInput(text);
//this.stopRecognition();
recognition.stop();
};
}
},
startRecognition: function () {
//sap.ui.getCore().
recognition.start();
jQuery.sap.delayedCall(10000, this, function () { // this has to be implemented so as the control comes back after 5 seconds
recognition.stop();
});
//sap.ui.getCore().
recognition.onresult = function(event) {
var text = "";
for (var i = event.resultIndex; i < event.results.length; ++i) {
text += event.results[0].transcript;
}
this.setInput(text);
this.stopRecognition();
};
//sap.ui.getCore().
// recognition.onend = function() {
// this.stopRecognition();
//};
//sap.ui.getCore().
recognition.lang = "en-US";
//sap.ui.getCore().
//recognition.start();
},
stopRecognition:function () {
//sap.ui.getCore().
if (recognition) {
//sap.ui.getCore().
recognition.stop();
//sap.ui.getCore().
recognition = null;
}
this.updateRec(recognition);
},
switchRecognition: function () {
if (recognition) { //sap.ui.getCore().
recognition.stop();
} else {
recognition.startRecognition();
}
},
setInput:function (text) {
// $("#input").val(text);
this.getView().byId("input").setValue(text);
this.send();
},
updateRec:function (recognition) {
//$("#rec").text(sap.ui.getCore().recognition ? "Stop" : "Speak");
//this.getView().byId("rec").setText(recognition ? "Stop" : "Speak");
},
send:function () {
//var text = $("#input").val();
var text = "YOUR CHAT/ME: "+ this.getView().byId("input").getValue()+"\n";
//this.responsestring.push(text);
sap.ui.getCore().responsestring.push(text);
//alert(this.getView());
// $.ajax({
jQuery.ajax({
type: "POST",
url: sap.ui.getCore().baseUrl + "query?v=20150910",
contentType: "application/json; charset=utf-8",
dataType: "json",
headers: {
"Authorization": "Bearer " + sap.ui.getCore().accessToken
},
data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }),
success: function(data) {
if(JSON.stringify(data.result.fulfillment.speech, undefined, 2) === "1"){
this.setResponse("NAME YOUR BOT
o something \n ");
}
else{
//this.setResponse(JSON.stringify(data.result.fulfillment.speech, undefined, 2));
sap.ui.getCore().byId("__xmlview0").getController().setResponse(JSON.stringify(data.result.fulfillment.speech, undefined, 2));
}
},
error: function() {
this.setResponse("NAME YOUR BOT:Internal Server Error /\n/" );
}
});
this.setResponse("Loading...");
},
setResponse:function(val) {
// $("#response").text(val);
****** Please add your link ****
var serviceurl = "https://xyz.xxxxx Your task processing xml link /";
val = val.replace(/"/g,"");
// var oModel = new sap.ui.model.odata.v2.ODataModel("Your Https Servie Link ");
var count;
var view = this.getView().byId("response");
var sUrl = "https://xyz.xxxxx Your task processing xml link ";
var filter = new sap.ui.model.Filter({
path : "ScenarioID",
operator : sap.ui.model.FilterOperator.EQ,
value1 : "PO_RELEASE"
});
var scenarioFilter = new Array();
scenarioFilter.push(filter);
var oDataModel = new sap.ui.model.odata.v2.ODataModel(sUrl, {
json: true,
loadMetadataAsync: true
});
if(val == 1)
{
//var oDataModel = new sap.ui.model.odata.v2.ODataModel(sUrl);
oDataModel.setUseBatch(false);
//var oModel = new sap.ui.model.json.JSONModel();
//oDataModel.attachMetadataLoaded(null, function(){
oDataModel.read("/TaskCollection/$count", {
filters: scenarioFilter,
success: function(oData, response) {
//var oResults = oData.results;
count = oData;
console.log(oData);
var val1 = "Total " +count+" PO(s) are pending for approval";
//view.setValue("NAME YOUR BOT: Total " +count+" PO(s) are pending for approval/\n/" );
//this.responsestring.push("NAME YOUR BOT: " + val1 + '\r\n');
sap.ui.getCore().responsestring.push("NAME YOUR BOT: " + val1 + '\r\n');
view.setValue( sap.ui.getCore().responsestring.join(""));
}
}
);
//End of Code
}
else if(val == 2)
{
oDataModel.setUseBatch(false);
var docList = "";
oDataModel.read("/TaskCollection", {
filters: scenarioFilter,
success: function(oData, response) {
//var oResults = oData.results;
//console.log(oData.results.length);
console.log(oData.results[0].TaskTitle);
for(var i=0;i<oData.results.length;i++)
{
docList = docList +"\r\n"+ oData.results.TaskTitle;
}
var val1 = "Please find Purchase order list below \r\n" + docList;
//view.setValue("NAME YOUR BOT: Total " +count+" PO(s) are pending for approval/\n/" );
//this.responsestring.push("NAME YOUR BOT: " + val1 + '\r\n');
sap.ui.getCore().responsestring.push("NAME YOUR BOT: " + val1 + '\r\n');
view.setValue( sap.ui.getCore().responsestring.join(""));
}
})
}
else
{
// this.responsestring.push("NAME YOUR BOT: " + val + '\r\n');
if(val == "Loading...")
{
var tempval= view.getValue();
view.setValue(tempval + val);
}
else
{
sap.ui.getCore().responsestring.push("NAME YOUR BOT: " + val + '\r\n');
//view.setValue( this.responsestring);
view.setValue( sap.ui.getCore().responsestring.join(""));
// view.setValue(val);
}
}
}
});
});
Please note the conversational SAP AI can be structured.The output of bot was similar to below.
A huge shout out to Zalak and Amit for giving me the idea and motivation to write about this
I will be happy to receive readers feedback/comments.Since this is my first post I hope i can improve in myself in my upcoming article. Your feedback and comments definitely groom me.
Happy reading
Okumaya devam et...
Running a Large-scale industry which runs on SAP ERP tool they have been also modifying themselves to make for user friendly. There are numerous up-gradation has happened. Now ERP tool has come to mobile devices which is like similar to APP based operation for ERP ex: FIORI.
But there is a lag between New generation technology with SAP Fiori. To overcome this the communication or Natural language processing-based system is required which can ease the day to day life of SAP user. The Fiori Chat Bot can bring the tremendous amount of ease with respect to user workload. It also does not require training cost. The NLP based system detect the intent of communication and perform the task accordingly.
Integration of Chat Bot with SAP Fiori opens a broader aspects of business process.
here We are going to see the integration of Chatbot with Sap Fiori
i have covered the use case for l Getting the PO Approval document pending count as well as what are the documents.
We can even do it for multiple cases.It is based on our interest to explore more.
Our conversational AI has been developed on these platform.
- Backend SAP Hana System
- Ui5 which can be deployed in FIORI System
- Sap Fiori Gateway
- Dialogflow
My Approach …
We have used Dialog Flow API ref key in our application to identify the intent of communication.
Let’s start with Dialogflow there are various posts/ documents available to create Dialogflow chatbot
Here i would try to cover some of the points.
which can help you to get started
Create a Dialogflow account and give a name as of your bot and define Intent
To know more Intent entities and to start with Dialogflow can refer below link
Overview | Dialogflow
Just to get the brief idea of Intent .. In general
For communication we always try to find intent of the communication to give the right response.
NLP is based on that.
We have set the intent like GET_PO_LIST
I have set the response of the GET_PO_LIST as 1
So that while righting Ui5 bot code when the response is found 1 it will be able to call respective OData services which will have the details of these queries.
We can add multiple scenario in to handle the user query with the he help of calling the respective OData services.
We can format the response to show the data in conversational bot.
This can show the that
I have added small talks eg. How are you?… About Agents,Courtesy etc.
small talk to make it more interesting
To move towards with coding let’s have a look on below diagram
Get the api key
The most important part is where you should find your access token to call this bot internally.
Now Use the access token key in the code and
Once the Dialogflow is ready We can move to SAP UI5 Application
This is how the SAPUI5 application structure looks
index code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>chatbot</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"chatbot": ""}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "chatbot"
})
}).placeAt("content");
});
sap.ui.getCore().recognition = new webkitSpeechRecognition();
sap.ui.getCore().accessToken = "use your access token";
sap.ui.getCore().baseUrl = "https://api.api.ai/v1/";
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Master controller code :
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("chatbot.controller.Master", {
onInit : function()
{
jQuery.sap.require("chatbot/model/chatapi");
//this.responsestring = [];
sap.ui.getCore().responsestring = [];
},
onDialogPress : function () {
var oView = this.getView();
var oDialog = oView.byId("chatDialog");
// create dialog lazily
if (!oDialog) {
// create dialog via fragment factory
oDialog = sap.ui.xmlfragment(oView.getId(), "chatbot.view.chatDialog", this);
// connect dialog to view (models, lifecycle)
oView.addDependent(oDialog);
}
oDialog.open();
},
onReq : function(Event){
if (event.which === 13) {
event.preventDefault();
this.send();
}
this.getView().byId("input").setValue("");
},
onPress : function(event){
this.getView().byId("response").setValue("");
this.getView().byId("input").setValue("");
if('webkitSpeechRecognition' in window){
var recognition = new webkitSpeechRecognition();
recognition.lang = "en-US";
recognition.continuous = true;
recognition.interimResults = true;
recognition.start();
//setTimeout(recognition.stop(),10000);
//sap.ui.getCore().
recognition.onresult = function(event) {
var text = "";
for (var i = event.resultIndex; i < event.results.length; ++i) {
text += event.results[0].transcript;
}
sap.ui.getCore().byId("__xmlview0").getController().setInput(text);
//this.stopRecognition();
recognition.stop();
};
}
},
startRecognition: function () {
//sap.ui.getCore().
recognition.start();
jQuery.sap.delayedCall(10000, this, function () { // this has to be implemented so as the control comes back after 5 seconds
recognition.stop();
});
//sap.ui.getCore().
recognition.onresult = function(event) {
var text = "";
for (var i = event.resultIndex; i < event.results.length; ++i) {
text += event.results[0].transcript;
}
this.setInput(text);
this.stopRecognition();
};
//sap.ui.getCore().
// recognition.onend = function() {
// this.stopRecognition();
//};
//sap.ui.getCore().
recognition.lang = "en-US";
//sap.ui.getCore().
//recognition.start();
},
stopRecognition:function () {
//sap.ui.getCore().
if (recognition) {
//sap.ui.getCore().
recognition.stop();
//sap.ui.getCore().
recognition = null;
}
this.updateRec(recognition);
},
switchRecognition: function () {
if (recognition) { //sap.ui.getCore().
recognition.stop();
} else {
recognition.startRecognition();
}
},
setInput:function (text) {
// $("#input").val(text);
this.getView().byId("input").setValue(text);
this.send();
},
updateRec:function (recognition) {
//$("#rec").text(sap.ui.getCore().recognition ? "Stop" : "Speak");
//this.getView().byId("rec").setText(recognition ? "Stop" : "Speak");
},
send:function () {
//var text = $("#input").val();
var text = "YOUR CHAT/ME: "+ this.getView().byId("input").getValue()+"\n";
//this.responsestring.push(text);
sap.ui.getCore().responsestring.push(text);
//alert(this.getView());
// $.ajax({
jQuery.ajax({
type: "POST",
url: sap.ui.getCore().baseUrl + "query?v=20150910",
contentType: "application/json; charset=utf-8",
dataType: "json",
headers: {
"Authorization": "Bearer " + sap.ui.getCore().accessToken
},
data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }),
success: function(data) {
if(JSON.stringify(data.result.fulfillment.speech, undefined, 2) === "1"){
this.setResponse("NAME YOUR BOT
o something \n ");}
else{
//this.setResponse(JSON.stringify(data.result.fulfillment.speech, undefined, 2));
sap.ui.getCore().byId("__xmlview0").getController().setResponse(JSON.stringify(data.result.fulfillment.speech, undefined, 2));
}
},
error: function() {
this.setResponse("NAME YOUR BOT:Internal Server Error /\n/" );
}
});
this.setResponse("Loading...");
},
setResponse:function(val) {
// $("#response").text(val);
****** Please add your link ****
var serviceurl = "https://xyz.xxxxx Your task processing xml link /";
val = val.replace(/"/g,"");
// var oModel = new sap.ui.model.odata.v2.ODataModel("Your Https Servie Link ");
var count;
var view = this.getView().byId("response");
var sUrl = "https://xyz.xxxxx Your task processing xml link ";
var filter = new sap.ui.model.Filter({
path : "ScenarioID",
operator : sap.ui.model.FilterOperator.EQ,
value1 : "PO_RELEASE"
});
var scenarioFilter = new Array();
scenarioFilter.push(filter);
var oDataModel = new sap.ui.model.odata.v2.ODataModel(sUrl, {
json: true,
loadMetadataAsync: true
});
if(val == 1)
{
//var oDataModel = new sap.ui.model.odata.v2.ODataModel(sUrl);
oDataModel.setUseBatch(false);
//var oModel = new sap.ui.model.json.JSONModel();
//oDataModel.attachMetadataLoaded(null, function(){
oDataModel.read("/TaskCollection/$count", {
filters: scenarioFilter,
success: function(oData, response) {
//var oResults = oData.results;
count = oData;
console.log(oData);
var val1 = "Total " +count+" PO(s) are pending for approval";
//view.setValue("NAME YOUR BOT: Total " +count+" PO(s) are pending for approval/\n/" );
//this.responsestring.push("NAME YOUR BOT: " + val1 + '\r\n');
sap.ui.getCore().responsestring.push("NAME YOUR BOT: " + val1 + '\r\n');
view.setValue( sap.ui.getCore().responsestring.join(""));
}
}
);
//End of Code
}
else if(val == 2)
{
oDataModel.setUseBatch(false);
var docList = "";
oDataModel.read("/TaskCollection", {
filters: scenarioFilter,
success: function(oData, response) {
//var oResults = oData.results;
//console.log(oData.results.length);
console.log(oData.results[0].TaskTitle);
for(var i=0;i<oData.results.length;i++)
{
docList = docList +"\r\n"+ oData.results.TaskTitle;
}
var val1 = "Please find Purchase order list below \r\n" + docList;
//view.setValue("NAME YOUR BOT: Total " +count+" PO(s) are pending for approval/\n/" );
//this.responsestring.push("NAME YOUR BOT: " + val1 + '\r\n');
sap.ui.getCore().responsestring.push("NAME YOUR BOT: " + val1 + '\r\n');
view.setValue( sap.ui.getCore().responsestring.join(""));
}
})
}
else
{
// this.responsestring.push("NAME YOUR BOT: " + val + '\r\n');
if(val == "Loading...")
{
var tempval= view.getValue();
view.setValue(tempval + val);
}
else
{
sap.ui.getCore().responsestring.push("NAME YOUR BOT: " + val + '\r\n');
//view.setValue( this.responsestring);
view.setValue( sap.ui.getCore().responsestring.join(""));
// view.setValue(val);
}
}
}
});
});
Please note the conversational SAP AI can be structured.The output of bot was similar to below.
A huge shout out to Zalak and Amit for giving me the idea and motivation to write about this
I will be happy to receive readers feedback/comments.Since this is my first post I hope i can improve in myself in my upcoming article. Your feedback and comments definitely groom me.
Happy reading
Okumaya devam et...