Varad
SAP is a vast ocean where we can learn something new every day. One day, I was chatting on the website of one organization with the BOT, which might be a short form for RoBot. I wanted to know how that bot anticipates and responds to my questions. Exploration follows curiosity, and invention follows exploration. No, no, no. Here, I’m not introducing any novel ideas. All I wanted to do was accomplish something fascinating for my company and go above and beyond my 9 to 5 work. No, it’s not related to impressing my manager or the bonus period. Time is merely an accident. All I wanted to do was include a comparable chatbot into SAPUI5 and make this capability available to our company’s clients. Ultimately, a positive consumer experience is beneficial.
This post is the culmination of all the research, trials, errors, retries, and eventually some success in creating a respectable chatbot that is integrated with the SAPUI5 app. There may be better and alternative options. However, since this is my first experience with a chatbot, I wanted to demonstrate it to our readers so they could give it a try as well.
Have you looked at the Super Maria SAPUI5 App that Saswat, one of our teammates, developed?
Here’s a peek at the chatbot we developed.
We will attempt to concentrate on the integration of SAPUI5 application with Chatbot through the use of SAP’s CAI (Conversational Artificial Intelligence).
SAP’s CAI API for creating bots
The Conversational Artificial Intelligence (CAI) API from SAP can be used to create a bot.
Next, we must build a Bot once the account has been setup. Clicking on the NEW BOT button is the first step in creating a bot.
button
.
After the bot is built, the application will use the Authorization Token, User-slug, and Callback URL that are displayed beneath the configuration (gear) icon.
The expectation
You were successful in utilizing SAP’s CAI API to create the Bot. The more exciting part—integrating it with the SAPUI5 App—is about to happen.
How to Combine a Chat Bot with SAPUI5
How to Integrate a Chatbot with SAPUI5 Step-by-Step:
Make a SAPUI5 application as the first step.
Step 2: Use SAP’s CAI API to obtain the created bot’s UUID, or Universally Unique Identifier, such as the Authorization Token, User-slug, Owner Id, etc.
In order to leverage the SAP’s CAI API Bot for future interaction with the SAPUI5 Bot Interface, redefine the SAPUI5 onAfterRendering hook method and write the following code.
Step 3: Design a fragment, such as a popover screen, for the bot user interface.
Step 4: Programming to launch the Popover page of the chatbot and receive a response from the generated bot
i. Clicking the “How can I help you” button located in the floating footer will open the Chatbot’s popover panel.
ii. Analyzing the text or value that the user supplied in the chatbot window and using the callback function to retrieve the answer from the bot based on the input from the user.
iii. Displaying the response in the chatbot window that was generated using SAP’s CAI API.
Step 5: Using style classes to add CSS (Cascading Styling Sheet) for text areas, images appearing as icons, chatbot popover sizes, etc.
The Chatbot Window can have any additional CSS attribute added to it to improve its aesthetics and usability.
I’ve included a couple style classes that I utilized in our application below for your reference.
The output is the same as what we showed at the start of the post. Although it may seem straightforward, I can’t begin to convey the stratification that results from receiving those kinds of remarks from your clients.It was worth every second to work on the research and development.
I recognize that since this is an advanced integration, you will undoubtedly have many questions. Kindly feel free to ask any questions you may have below, and I will do my best to respond to you all.
Your suggestions will be greatly valued.
Read Our blog here:-
The Complete Guide to Configuring Jenkins Server on AWS EC2 Using DevSecOps Tools
