Challenge Submission: Build a TODO chatbot – bot

Hello all,

So here is my submission for the tutorial challenge.So if you like what you read, please like my blog.

In short it’s going to be a tutorial on how to use SAP Conversational AI (CAI) and SAP Intelligent RPA together. The use case is using the openui5 sample that runs a todo list and then use the CAI to tell the bot to add a task.

Let’s get started.

Prerequisites:

So I assume you already installed the SAP Intelligent RPA desktop studio and agent.

You also need NodeJS and have a registered account for the trial on SAP Intelligent RPA and CAI

To make things easier it will help you to have GIT command line installed, but that is not mandatory.

Clone repository

Go to the link

and click the clone button, copy paste the url and go to your command prompt/ terminal and write the following command

git clone https://github.com/SAP-samples/openui5-sample-app.git

If you don’t want to use GIt, then simply download the zip file and extract it.

Install npm packages

We need to install the required packages for the openui5 sample app to run. So go to the folder of the app and simply run

npm install

You will also need the UI5 tooling to be installed globally

npm install --global @ui5/cli

Test the app

Now we are ready to test the app. Run command

ui5 serve -o index.html

You should now have your preferred internet browser opening up the index.html file of the project and you should see something like below

Create Bot Project

Now open up the desktop studio and create a new project. Fill in the required details

Add the SAPUI5 scripting library

First thing we need to do is to add the SAPUI5 scripting library that SAP has created to make it simpler to work with these apps. So click the scripts tab and right click in the white area and select

the “include library script”  option

Find the SAP UI5 and make sure it’s ticked.

Capture the todo app

Now go back to the applications and click the add application

Capture your browser window with the WEB connector

And also capture the page

Now we want to add a new task to our list, so click the “What needs to be done” input field and add a criteria, let’s make this a part criteria, so we are sure the bot will find the input field even though UI5 does have part dynamic IDs. Make sure the input field is selected.

Also click page “pOpenUI5TodoApp” in the explorer to add the title criteria, so the bot knows which tab to use. Do the same for the application OpenUI5TodoApp

Add the workflow

Go to the workflow tab and right click on our OpenUI5TodoApp and select the add new workflow. Name it AddTodo.

Add our captured page and connect it to the start event.

Now double-click the page and right-click on our input field and select the “set … in the item” option.

Afterward save and build the project.

Adjust the script

Now we need to alter the script as we have now “ADD” button in the UI. So we need to trigger a change event on the input field to add to our list.

So in the “pOpenUI5TodoApp_manag” step, add the following code underneath the set command

OpenUI5TodoApp.pOpenUI5TodoApp.oContainerTodoApp.trigger('change');

Also for us to test and run this app, we need to alter the start.on function and remove the “if (ctx.options.isDebug)” condition.

And lastly add the if (ctx.options.isDebug) to the scenario and add some testdata.

if (ctx.options.isDebug) {
		rootData.OpenUI5TodoAppData.pOpenUI5TodoAppData.oContainerTodoApp = "Hello World"
	}

Now let’s build the project again and run it. After clicking the AddTodo menu item. You should see the Hello World task added to the list.

Add input and output parameters

Now go back to the workflow and select the AddTodo flowchart.

Add the input and output parameters like above. This will be used for our chatbot to pass the task to the RPA bot.

Export the package

Now export the package to deploy later to the cloud

Create Chatbot

So far so good, let’s look at adding the chatbot. Go to the https://cai.tools.sap/ and register if you haven’t done so already.

Click the “New Bot” in the top right corner and add the details

Optionally you can add predefined skills such as greetings, small talk, and weather to make your bot a bit more personal.

Create intent

The chatbot works with intents to make sense of a conversation, as soon as an intent has been identified, that can trigger certain actions. So let’s start by creating an intent

Then add an expression to our intent “Add task to my todo list” and press enter

Then click the task word and add the entity task to it.

You can also add some more variations to make it easier for the bot to identify the intent.

Let’s add

Remember to do my shopping

Remind me to do my groceries

Create skill

A skill is where you teach the chatbot what to do with that intent. So click the build tab and create skill

Click the new skill and add the trigger criteria that if our intent is present then run the skill

In the requirements section, you can add follow up questions if the Task entity hasn’t been identified. I won’t to into that details in this tutorial, as the main focus is on the Intelligent RPA.

Click the actions and add a message group and afterward a message

Now we are ready to test the bot

Test chatbot

Click the “Chat with your bot” button in the lower right corner and add the following text “create remember to do shopping to my todo list” Now the reply should be the message you just created above, which shows us that our intent and skill is working.

Create BOT project

Now let’s import our newly exported project, so go to your RPA tenant and click the projects tab and then the New Project button. Just add “chatbot” to the package name and description.

Now import your desktop project to your project and after that you should be able to see the Input Output parameters in the context. If not, please doublecheck if you added those parameters in your workflow.

Also select the”Make this scenario usable as a skill” option

When you are happy with it, click the home button and the generate package.

Close down the tab and return to your tenant, you should now have a chatbot package.

Next click the deploy button and deploy the package in your hierarcy

Test the deployment

Click the Deployments tab and create a scheduled trigger. Click the Input Parameter and add a message to our parameter

Save it and click the run now option on the trigger.

Start your agent and after a while you should see the bot being executed and update our todo app

If you’ve achieved the outcome, then delete the trigger again as we will be working with an API trigger.

Integrate Intelligent RPA and CAI

Go to your deployments tab in the RPA tenant and add an API trigger.

Copy and paste the details into notepad for safekeeping for now

Now go to your chatbot and click the settings icon and click the token option. Copy and paste your developer token to your notepad file as well.

Create notifiers

For our chatbot to be updated about the progress of our RPA bot, let’s add a few notifiers. In the RPA tentant click API trigger and the add notifier button

Select the CAI option and select the Start option for the notify on.

The conversation ID should be ${invocation_context.conversationId} and the token is the token you copied from your CAI.

Now add a message of your liking and press the create button

Repeat the step but now add a success notifier

We are now done with our RPA stuff.

Let’s continue with our bot

Add API trigger action

Log on to your SAP Cloud Platform Account. For the two tools to talk together, you need to create a service key

This is quite well documented, so I won’t go into further details here

Go back to CAI and go back to our skill. Remove the message and click the Connect External Service instead

Click the API service option

Add the url copied from your trigger and then select the OATH2 token authentication

Now add the url ammended with /oath/token in the end, clientId and the client secret from your service key attributes.

Sorry for all the red in the screenshot, just focus on the yellow highlighted stuff 😉

Next click the headers tab and add a new field irpa-trigger-token, in this you add the token copied from your API trigger.

Now click the body tab and add the following:

{
	"invocationContext":{
		"conversationId":"{{conversation_id}}"
	},
	"input": {
        	"oContainerTodoApp": "{{memory.task.value}}"
   	}
}

So we will access the memory off the chatbot and use the task object and the value to add to our todo list.

After the API call add a message to give a quick feedback, that the call has been actioned

Alright, we’ve connected the dots, let’s test it out.

Go to the openui5 folder where you host the todo list. Create a new file and name it chatbot.html

Add the following content to begin with

<html>
<head>

<meta name="viewport" content="width=device-width">
</head>
<body>

</body>

</html>

Now in CAI click the connect tab and select the webchat option. Click the create and copy the webchat script

Paste this into your html file in the body tag, it should look like below

Now in your command prompt, kill the ui5 process by pressing CTRL + C. Now run the command

ui5 serve -o index.html

Open a new tab and add the url

http://localhost:8080/chatbot.html

Now it will be a blank page, but you should see a little “chat with me” in the lower right

So let’s try to see if it works.

PAss the message “Add task to my to do list”. Fingers crossed, you should get an immediate response from your chatbot, then another message when your bot is started and one on completion.

Be aware that the trigger of your bot can take several minutes, I assume this is to do with me running this on a trial and potentially also my corporate setup on my machine.

That’s the end of this tutorial

Conclusion

Thanks for sticking with me, Hopefully you now have a better understanding of how to integrate Conversational AI with SAP Intelligent RPA and the potential to use the two together.

Remember if you liked what you’ve just read, please like this blog so I might be in the running for winning a t-shirt. Quick scroll to the top or just press CTRL + Home to go there.

Thanks for reading.