Skip to Content
Technical Articles

SAP Conversational AI(CAI) on SAPUI5

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.

Be the first to leave a comment
You must be Logged on to comment or reply to a post.