Custom Chatbot Widget in SAPUI5 [ using Expression Binding ]

Hi all,

This is a part of Chatbot Blog series and focuses on how to build Chat Assistant Widget in Fiori using Freestyle UI5.

The Chat Assistant in Industry is way more complex and has tons of features, I am trying to keep the focus of this blog on building basics features with minimal efforts.

To Add a Chat Assistant Widget in your existing app, a placeholder is required.

there are many options to add widgets in Fiori portal or standalone UI5 apps.

For Fiori Portal, Adding a button in ShellBar with a popover would be a great option. The Popover contains Chat Assistant widget. Since ShellBar remains constant in the fiori Launchpad, it can be accessed by all fiori application. ( I found a blog for this. check this link for more info. )

For standalone UI5 applications, there are two best ways to add Chat Widget either in the Side Panel or as a button in bottom right corner with a popover containing chat widget. This is widely adopted by all chatbot providers.

I think, sap.f.SidePanel is one of the most suitable UI5 control for adding such widgets.

Widget on Side Panel

Lets see how sap.f.SidePanel works.

Side Panel has two aggregations called mainContent and sideContent. mainContent Aggregation contains actual page containing Business Object while sideContent contains more details on selected property or object or utility/ support/ helper tools.

Copy below code and add original website content in mainContent aggregation.

<mvc:View controllerName=”your-namespace.controller.View1″
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns:core=”sap.ui.core”
xmlns:f=”sap.f”
xmlns=”sap.m”
class=”viewPadding”>

<f:SidePanel id=”id_sp” sidePanelResizable=”true”
toggle=”onToggle”
sidePanelPosition=”Right”
sidePanelWidth=”30rem”>
<f:mainContent>
… Add your main Content here…
</f:mainContent>
<f:items>

<f:SidePanelItem icon=”sap-icon://wounds-doc”
text=”ChatAssistant” class=”spi”>
<f:content>
<VBox width=”100%”>
<IllustratedMessage id=”id_illuMsg”
title=”Chat Assistant”
class=”sapUiLargeMarginTop”
description=”Ask me anything”
illustrationType=”tnt-FaceID”
illustrationSize=”Scene”>
<additionalContent>
<Button text=”Lets go” press=”onPressHide”/
</additionalContent>
</IllustratedMessage>

Digression on Expression Binding :

I have used basic expression binding using ternary operator for choosing which icon to show based on the value of property “type”.

If it is Query asked by User, then display icon would be Customer

if not, that means it is a response from the bot, then icon would be da-2 ( symbol of SAP Joule )

<List id=”id_List” items=”{path:’chatbot>/list’}”
noDataText=”No Chat history..”>
<items>
<FeedListItem text=”{chatbot>text}”
icon=”{= ${chatbot>type} === ‘query’ ?
‘sap-icon://customer’ : ‘sap-icon://da-2’ }”>
</FeedListItem>
</items>
</List>

Some UI Finally.

Initially, display only Illustration and hide other content of the sidePanel.

on click of “lets go” button, hide the Illustration and display both the ScollContainer and Input conrols.

Create and set an empty JSON Model to the view. Add below code in the onInit method.

that.jsonModel = new JSONModel();
this.getView().setModel(that.jsonModel, “chatbot”);

Same Model is bound to the items property of the List control in the View.

Since there is no value in JSON Model initially, List Control would display “No Chat History..” as it is set in NoData property of the List.

When you type something in the Input box, it calls external API and gets response from the assistant.

Add below code in your controller file to make an API Call.

onSubmitQuery: function (oEvent) {
var oInput = oEvent.getSource();
var sQuery = oInput.getValue();
oInput.setValue(“”);

// Add User query to the model
that.aList = that.jsonModel.getProperty(“/list”);
if (!that.aList) {
that.aList = [];
}

var oJsonObj = {
text: sQuery,
type: “query”,
};
that.aList.push(oJsonObj);
that.oJsonModel.setProperty(“/list”, that.aList);

// Add Bot Response to the model
// fetch existing model
that.aList = that.oJsonModel.getProperty(“/list”);
var sUrl;

sUrl = “<your-api-endpoint>/query”;

Note : postAPI is just another custom function to make API call.

Final Result, This is how it would look like.

Conclusion :

This is how you can add a chat assistant widget in a page of your existing UI5 application.

What’s next ?

There is still room for UI improvement.

Check below blog on How to display Query on right hand side and Response from the assistant on left hand side.

Next Blog : Dynamic Query Response Handling with Factory Function

Upcoming Blogs : [ Adaptive Cards, Action Items and many more … ]

Update : AI tools and Chatbot as copilot for develoepers

Stay tuned for more blogs on this series.

Hi all, This is a part of Chatbot Blog series and focuses on how to build Chat Assistant Widget in Fiori using Freestyle UI5.The Chat Assistant in Industry is way more complex and has tons of features, I am trying to keep the focus of this blog on building basics features with minimal efforts. To Add a Chat Assistant Widget in your existing app, a placeholder is required.there are many options to add widgets in Fiori portal or standalone UI5 apps.For Fiori Portal, Adding a button in ShellBar with a popover would be a great option. The Popover contains Chat Assistant widget. Since ShellBar remains constant in the fiori Launchpad, it can be accessed by all fiori application. ( I found a blog for this. check this link for more info. )For standalone UI5 applications, there are two best ways to add Chat Widget either in the Side Panel or as a button in bottom right corner with a popover containing chat widget. This is widely adopted by all chatbot providers. I think, sap.f.SidePanel is one of the most suitable UI5 control for adding such widgets.Widget on Side PanelLets see how sap.f.SidePanel works.Side Panel has two aggregations called mainContent and sideContent. mainContent Aggregation contains actual page containing Business Object while sideContent contains more details on selected property or object or utility/ support/ helper tools. Copy below code and add original website content in mainContent aggregation. <mvc:View controllerName=”your-namespace.controller.View1″
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns:core=”sap.ui.core”
xmlns:f=”sap.f”
xmlns=”sap.m”
class=”viewPadding”>

<ScrollContainer id=”id_SC” visible=”false”
width=”100%”
height=”500px”
vertical=”true”>
<List id=”id_List” items=”{path:’chatbot>/list’}”
noDataText=”No Chat history..”>
<items>
<FeedListItem text=”{chatbot>text}”
icon=”{= ${chatbot>type} === ‘query’ ?
‘sap-icon://customer’ : ‘sap-icon://da-2’ }”>
</FeedListItem>
</items>
</List>
</ScrollContainer>
<VBox id=”id_box” visible=”false” width=”100%”>
<Input width=”100%”
placeholder=”Type your query here..”
submit=”onSubmitQuery”/>
</VBox>
</VBox>
</f:content>
</f:SidePanelItem>
</f:items>
</f:SidePanel>
</content>
</Page>
</mvc:View> Digression on Expression Binding : I have used basic expression binding using ternary operator for choosing which icon to show based on the value of property “type”.If it is Query asked by User, then display icon would be Customerif not, that means it is a response from the bot, then icon would be da-2 ( symbol of SAP Joule ) <List id=”id_List” items=”{path:’chatbot>/list’}”
noDataText=”No Chat history..”>
<items>
<FeedListItem text=”{chatbot>text}”
icon=”{= ${chatbot>type} === ‘query’ ?
‘sap-icon://customer’ : ‘sap-icon://da-2’ }”>
</FeedListItem>
</items>
</List> Some UI Finally.Initially, display only Illustration and hide other content of the sidePanel.on click of “lets go” button, hide the Illustration and display both the ScollContainer and Input conrols. Create and set an empty JSON Model to the view. Add below code in the onInit method. that.jsonModel = new JSONModel();
this.getView().setModel(that.jsonModel, “chatbot”); Same Model is bound to the items property of the List control in the View. Since there is no value in JSON Model initially, List Control would display “No Chat History..” as it is set in NoData property of the List.When you type something in the Input box, it calls external API and gets response from the assistant.Add below code in your controller file to make an API Call. onSubmitQuery: function (oEvent) {
var oInput = oEvent.getSource();
var sQuery = oInput.getValue();
oInput.setValue(“”);

// Add User query to the model
that.aList = that.jsonModel.getProperty(“/list”);
if (!that.aList) {
that.aList = [];
}

var oJsonObj = {
text: sQuery,
type: “query”,
};
that.aList.push(oJsonObj);
that.oJsonModel.setProperty(“/list”, that.aList);

// Add Bot Response to the model
// fetch existing model
that.aList = that.oJsonModel.getProperty(“/list”);
var sUrl;

sUrl = “<your-api-endpoint>/query”;

this.postAPI(sUrl, sQuery)
.done(function (result) {
var aList = Array.isArray(result) ? result : [result];
that.oJsonModel.setProperty(“/list”, $.merge(that.aList, aList));
})
.fail(function (result) {
var aList = [];
var oJsonObj = {
text: “Failed to connect to backend!”,
type: “response”,
};
that.aList.push(oJsonObj);
that.oJsonModel.setProperty(“/list”, that.aList);
})
.always(() => {
});
} Note : postAPI is just another custom function to make API call. Final Result, This is how it would look like. Conclusion : This is how you can add a chat assistant widget in a page of your existing UI5 application. What’s next ?There is still room for UI improvement.Check below blog on How to display Query on right hand side and Response from the assistant on left hand side.Next Blog : Dynamic Query Response Handling with Factory Function Upcoming Blogs : [ Adaptive Cards, Action Items and many more … ]Update : AI tools and Chatbot as copilot for develoepers Stay tuned for more blogs on this series. Read More Technology Blogs by Members articles