S4Sales Assistant – A Chabot interface for the Sales Team on the move with SAP UI5

[Sanjay]

Overview:

• Leverage the growing style of conversational interfaces towards enterprise applications..


• Pick the right use case – A sales assistant on the move , trying to view the days sales statistics, and details of the day’s orders movement

Architecture : SAP HCP, SAP oData Service, SAP Ui5

Below steps needs to be follow to meet this requirement.

Note :- Create the oData service for getting the SAP sales orders, in this blog we used standard sales order service.

1)Convert the oData result set into the string format , we create a XSJS project in side SAP HCP.

2) we used DialogFlow for chat bot.

3) Build the UI by using SAP UI5



Step-1

Login into the SAP HCP account. by using below link

https://account.hanatrial.ondemand.com/#/home/welcome

Create a MDC data Base



Note: Wait few minutes for creating a data MDC database, and remember the SYSTEM user password.

Click on the database, it will navigate to the Database overview page.



For working on SAP HANA Web-Based development work bench, we have to assign the roles for the user. For that click on the “Administration tools: SAP HANA Cockpit”.



After click on the hana cockpit it will navigate to the SAP HANA database admin cockpit login page, enter user name “system” and password “SYSTEM user password”.







After click on “Continue” it will navigate to the SAP HANA Database Administration page.
Select a tile manage Roles and Users.

After click on tail, it will navigate to the SAP HANA Web-based Development Workbench: Security.

For creating a new user right click on users select new user, enter “User Name” and “Password” after that click on save button.





Assign the below roles for new user,

CONTENT_ADMIN
Developer





Now we can able to login into the SAP HANA Web-Based Development Workbench.





After click on the “Editor” it navigate to the login page editor, enter user name and password, created in SAP HANA Web-based Development Workbench: Security.



Create Package for Application

The first step to start developing a SAP HANA application with SAP HANA Web-based Development Workbench is to create a new package for the application.

Here we will create a package called SalesOrdersBot, Right-Click on the content folder on the left, and enter the package details.

Now you have a package that is waiting for your code, now we will Right-Click on the SalesOrdersBot package and choose Create Application

After click on create it will generate 3 files, the .xsapp, .xsaccess and an index.html. Delete the index.html file.

Now right click on the SalesOrdersBot package and choose New --> Package

Create a HTTP Destination 

Right-click on services node and choose New à File. Choose Destinationfile.xshttpdest as name.

Note:- Destination file extension should be with “.xshttpdest”.

In Destination file code have like this

description="SALES";

host="http://XX.XX.XX.XX";

port=5000;

pathPrefix="/sap/opu/odata/SAP/ZGW100_SALES_ORDER_SRV";

useProxy = true;

proxyHost = "proxy-trial";

proxyPort = 8080;

authType = none;

useSSL = false;

timeout = 30000;

Create XSJS Script

Use the below source code

var destination_package = "ChatBotProject.services";

var destination_name = "DEST_BOT_ODATA";



try {

       var dest = $.net.http.readDestination(destination_package, destination_name);

       var client = new $.net.http.Client();

       var req = new $.net.http.Request($.net.http.GET, "/SalesOrderCollection?$top=5&$format=json"); 

       client.request(req, dest);

       var response = client.getResponse();  

       

    $.response.contentType = "application/json";

      var result = response.body.asString();

      var  jsonResult= JSON.parse(result);

          var chatbotResponse;

     

          if (jsonResult.d.results.length > 0) 

          {

            chatbotResponse = "Sales Orders List: ";

            for (var i = 0; i < jsonResult.d.results.length; i++) 

            {

              chatbotResponse += "";

               chatbotResponse += jsonResult.d.results[i].Vbeln;

                             

            }

          } 

          else 

          {

            chatbotResponse = "No data Found";

          }

     

        $.response.status = $.net.http.OK;

        $.response.contentType = "application/json";

        $.response.setBody(JSON.stringify({

          "speech": chatbotResponse,

          "displayText": chatbotResponse

        }));

} catch (e) {

       $.response.contentType = "text/plain";

       $.response.setBody(e.message);

}

Select “getSalesOrders.xsjs” and click run button.



The result is shown as bellow.



Now this rest service work without asking user name and password, for this we have to give “public” options.

For that we have to lunch the “HANA XS Admin tools” with created new user.





Step -2

CHAT BOT Creation



For create a new Intent, select left side menu intent, after that click on create Intent button.



Enter Intent name “get_sales_orders” and also add user expressions after that save.



Webhook

Setting up a webhook allows you to pass information from a matched intent into a web service and get a result from it.





Step :- 3 

Integration with SAP UI5

Index.html

<!DOCTYPE HTML>

<html>



	<head>

		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

		<meta charset="UTF-8">

		<title>SAP Chatbot</title>

		<script src="https://cdn.rawgit.com/dialogflow/dialogflow-javascript-client/50e82e62/target/ApiAi.min.js"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/fonts/roboto/Roboto-Regular.woff2"></script>

		<script id="sap-ui-bootstrap"

			src="https://sapui5.hana.ondemand.com/1.40.8/resources/sap-ui-core.js"

			data-sap-ui-libs="sap.m,sap.ui.core,sap.viz,sap.ui.commons,sap.ui.table"

			data-sap-ui-xx-bindingSyntax="complex"

			data-sap-ui-theme="sap_belize"

			data-sap-ui-compatVersion="edge"

			data-sap-ui-resourceroots='{"send_message": ""}'>

		</script>

		<link rel="stylesheet" type="text/css" href="css/style.css">

		<script>

			sap.ui.getCore().attachInit(function() {

				new sap.m.Shell({

					app: new sap.ui.core.ComponentContainer({

						height : "100%",

						name : "send_message"

					})

				}).placeAt("content");

			});

		</script>

	</head>



	<body class="sapUiBody" id="content">

	</body>



</html>

View

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:viz="sap.viz" controllerName="send_message.controller.messages"

	xmlns:html="http://www.w3.org/1999/xhtml">

	<App>

		<pages>

			<Page showHeader="false" class ="msgPage_Id">

		

				<content>

	

		<List id="listid1"  items="{/}" >

		<CustomListItem press="funloctnnavback" type="Active">	

			<FlexBox

					alignItems="Start"

					justifyContent="SpaceBetween">

					<items>

					<HBox class="vboxftnloctnclass sapUiSmallMarginBegin sapUiSmallMarginTopBottom">

					<Label  text="{name}"/> 

						<Text text="  "/>

						<VBox  class="vboxftnloctnclass sapUiSmallMarginBegin sapUiSmallMarginTopBottom"  >

						<Text class ="inpttext" text="{text}"/>

						<Label text="{status}"/>

						<Text text="{date}"/>

						

				</VBox>

					</HBox>	

					</items>

				</FlexBox>



		</CustomListItem>

	</List>

				</content>

				<footer>

				   

			<Bar  class="footer">

			    <contentMiddle>

			        

			        <Input value=""  id="inputid" submit ="queryInputKeyDown" placeholder="Enter Message" width="15rem"/>

			        <Button text="Send" type="Accept" press="queryInputKeyDown"/>

			    </contentMiddle>

			</Bar>

		</footer>	

			</Page>

		</pages>

	</App>

</mvc:View>

Controller

sap.ui.define([

"send_message/controller/BaseController",

'sap/ui/core/format/DateFormat',

], function(BaseController,DateFormat) {

		

	var ENTER_KEY_CODE = 13;

	  var queryInput, resultDiv, accessTokenInput, client;

	  accessTokenInput = "c44a207ed1e440e593ab501fe3fe13fb";

		 client = new ApiAi.ApiAiClient({accessToken: accessTokenInput});

	  //window.onload = init;

	return BaseController.extend("send_message.controller.messages", {



		onInit:function(){

			

		},



		queryInputKeyDown : function (event) {

					    var value = event.mParameters.value;

					    	event.mParameters.value = "";

					    	msgController.setinpt_Response(value);

					    	msgController.sendText(value)

							  .then(function(response) {

							    var result;

							    try {

							    	result = response.result.fulfillment.speech

							    } catch(error) {

							    	result = "";

							        }

							       

							        msgController.setResponseJSON(result);

							        

							      })

							      .catch(function(err) {

							    	  debugger;

							    	  var result = err;

							    	  msgController.setResponseJSON(result);

							    	  

							      });

		  			},

		  

		sendText:function (text) {

			  return client.textRequest(text);

					

				},

			

		setResponseJSON:function(result){

			

					var array=[];

					var name = "Robot";

					var text_msg=result;

					var oFormat = DateFormat.getDateTimeInstance({style: "medium"});

					var oDate = new Date();

					var sDate = oFormat.format(oDate);

					

					 var modellist=this.getView().byId("listid1").getModel();

					 obj.text=text_msg;

						obj.date=sDate;

						obj.name = name;

						obj.status="";

						array.push(obj);

				         var model=new sap.ui.model.json.JSONModel();

				          	 model.setData(array);

				         this.getView().byId("listid1").setModel(model);

					this.getView().byId("inputid").setValue("");

			

				},

		setinpt_Response:function(value){

					var array=[];

					var name = "Tarento";

					var text_msg=value;

					var oFormat = DateFormat.getDateTimeInstance({style: "medium"});

					var oDate = new Date();

					var sDate = oFormat.format(oDate);

					var modellist=this.getView().byId("listid1").getModel();

					 var obj={};

						obj.text=text_msg;

						obj.date=sDate;

						obj.name = name;

						obj.status="";

			            array.push(obj);

			             var model=new sap.ui.model.json.JSONModel();

			             	 model.setData(array);

			              this.getView().byId("listid1").setModel(model); 

			              this.getView().byId("inputid").setValue("");

			

		},

	});



});

the final result is as shown below.