Skip to Content
Technical Articles
Author's profile photo Yohei Fukuhara

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.




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”.

], 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
		//Show Conversational AI
		renderRecastChatBot: function () {
			if (!document.getElementById("recast-webchat")) {
				var s = document.createElement("script");
				s.setAttribute("src", "");
				s.setAttribute("id", "recast-webchat");
				s.setAttribute("token", "<your token>");
				s.setAttribute("channelId", "<your channel id>");


When view is called, I removed CAI gadget.

], function (Controller, History) {
	"use strict";

	return Controller.extend("", {
		onInit: function () {
			//delete conversational AI
			var s = document.getElementById("recast-webchat-div");
			if (s === null) {} else {
		onNavBack: function (oEvent) {
			var oHistory = History.getInstance();
			var sPreviousHash = oHistory.getPreviousHash();

			if (sPreviousHash !== undefined) {
			} 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.

Assigned Tags

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