Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Fukuhara
Advisor
Advisor
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)

 

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.