- SAP Managed Tags:
Hi All,
I am writing this blog to describe how to show SAP Conversational AI(f.k.a. Recast.AI ) on SAPUI5 screen.
If you want to know more about Routing on SAPUI5, see another article “Basic Routing(Navigation) of SAPUI5”.
Official Tutorial comes! (2019/3/7 Added)
Conversational AI gadget is on the button of SAPUI5 view.
You can chat here.
When going to next view, chat gadget disappears.
From RECAST.AI screen, Create Webchat.
From Connect tab on Bot screen.
Just create Webchat.
You can get "channelID" and "token", which are necessary in SAPUI5.
No special coding for views. Just see my GitHub repository. cai.vew.xml is main view and next.view.xml is next one.
After rendering, I've added CAI script. please replace "token" and "channelId".
When view is called, I removed CAI gadget.
I don't implement the function to add CAI gadget after going back from "next.view.xml" to "cai.view.xml". Just because I don't have time to check how to do it.
I am writing this blog to describe how to show SAP Conversational AI(f.k.a. Recast.AI ) on SAPUI5 screen.
If you want to know more about Routing on SAPUI5, see another article “Basic Routing(Navigation) of SAPUI5”.
Official Tutorial comes! (2019/3/7 Added)
How it works
Conversational AI gadget is on the button of SAPUI5 view.
You can chat here.
When going to next view, chat gadget disappears.
Create Webchat on SAP Conversational AI
From RECAST.AI screen, Create Webchat.
From Connect tab on Bot screen.
Just create Webchat.
You can get "channelID" and "token", which are necessary in SAPUI5.
SAPUI5
Views
No special coding for views. Just see my GitHub repository. cai.vew.xml is main view and next.view.xml is next one.
Controller
cai.controoler.js
After rendering, I've added CAI script. please replace "token" and "channelId".
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("test.cai_integration.controller.cai", {
onPress: function (oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("TargetNext", {} );
},
onAfterRendering: function () {
//called at first time. not called when navigated from other views
this.renderRecastChatBot();
},
//Show Conversational AI
renderRecastChatBot: function () {
if (!document.getElementById("recast-webchat")) {
var s = document.createElement("script");
s.setAttribute("src", "https://cdn.recast.ai/webchat/webchat.js");
s.setAttribute("id", "recast-webchat");
s.setAttribute("token", "<your token>");
s.setAttribute("channelId", "<your channel id>");
document.body.appendChild(s);
}
}
});
});next.controller.js
When view is called, I removed CAI gadget.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History"
], function (Controller, History) {
"use strict";
return Controller.extend("test.cai_integration.controller.next", {
onInit: function () {
//delete conversational AI
var s = document.getElementById("recast-webchat-div");
console.log("recast-webchat-div:",s);
if (s === null) {} else {
document.body.removeChild(s);
}
},
onNavBack: function (oEvent) {
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("Targetcai", true);
}
}
});
});What I don't implement
I don't implement the function to add CAI gadget after going back from "next.view.xml" to "cai.view.xml". Just because I don't have time to check how to do it.
