Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Welcome to the Seventh Episode of the Series: Hello World OpenAI: Crafting Accurate ChatGPT-Like Custom Search for SAPUI5 Application. Till now we installed IDE, set up the environment, created a Secret Key for our OpenAI Account, tested the same using Postman, and created a NodeJs-based API Service for BTP-CF, deployed on BTP-CF & successfully tested the same, and finally created a SAPUI5 project in BAS further did & tested the changes. So, in this episode, we will consume the service in the SAPUI5 Application.

You can check all the existing & upcoming blog posts of this series via the introduction blog post available below link-

Click here


  • You already have an SAP BTP Trial Account & a DEV Space in BAS (Business Application Studio) [ Check Here if not already].

  • You have some basic SAPUI5 Knowledge.

  • You have followed the previous episodes.

Start you Service

As it is a BTP Trial account, we will have to start our Service.

Step 1: Log in to your BTP Trial Account, go to SubAccount & open your Space.

Step 2: Our App/Service may be in a Stopped state, click on the Play Button to start.

The App/Service will be started and will look like this.

So, we are all set to connect it with our UI5 Application.

Train our Service

Let's quickly train our Service.

Step 1: Open Postman and train the Service via /add  API endpoint. [As done in Episode 4]

Use the URL of the Service Noted in Episode 5. Choose POST, add URL, and set Basic Auth and Body raw->JSON like we did in Episode 4.
"entry":"IT Support"

We will get 201 Status & Success Message.

Step 2: Train 3 More scenarios the same way.

Travel, Finance, Need Help

Step 3: Let's test if things are fine.via our Display API, like we did in Episode 4.

Cool, we are all set to go ahead.

Add Logic to Our Application

Step 1: Open Business Application Studio (BAS), start your DEV Space & open the same.

Step 2: Open the file OpenAI.controller.js, it should look like this initially.

Step 3: Let's add our logic, copy & replace the controller code from below.
* @param {typeof sap.ui.core.mvc.Controller} Controller
function (Controller) {
"use strict";

return Controller.extend("openai.openai.controller.OpenAI", {
onInit: function () {

askAI: function () {
var ques = this.getView().byId("chatques").getValue();
var that = this;
var busyDialog = new sap.m.BusyDialog();
var payload = {
"ques" : ques
var sURL = "https://openaiapi.[Your API Service URL]"
var that = this;
url: sURL,
dataType: 'json',
type: 'POST',
data: JSON.stringify(payload),
contentType: 'application/json',
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*" ,
"Access-Control-Allow-Headers":"Origin, X-Requested-With, Content-Type, Accept, authorization",
"Access-Control-Allow-Methods": "GET,POST,DELETE,PUT,OPTIONS",
'Authorization': 'Basic YWRtaW46b3Vyc2VjcmV0'
crossDomain: true,
success: function (oData) {
that.getView().byId("chatans1b").setValue("Matched : " + (oData[0][1]*100).toString() + " %");
that.getView().byId("chatans2b").setValue("Matched : " + (oData[1][1]*100).toString() + " %");
that.getView().byId("chatans3b").setValue("Matched : " + (oData[2][1]*100).toString() + " %");


Save the code. Here we are making a call to our /askai API Service and show the Top 3 matches with their % of Match.

Time to Test

Step 1: Right-click on the project & select open integrated terminal.

Step 2: Run the app via npm start.

The application will start, and you will get a pop-up to open the app in a new tab, or will be opened automatically. This is how the application should look like for now.

Step 3: Let's try a case, type: and press Enter.

Cool, it's showing the top 3 matches with Match Percentage.

It supports all languages, let's try the same in German.

And it works perfectly fine.

Congratulations were all done & successfully completed our Hello World OpenAI: Crafting Accurate ChatGPT-Like Custom Search for SAPUI5 Applications Journey.


Congratulations, you have successfully gone through all 7 Episodes of our Hello World OpenAI: Crafting Accurate ChatGPT-Like Custom Search for SAPUI5 Applications Journey. We started from scratch, by setting up the environment, getting our OpenAI Key, testing it locally, Creating a NodeJs-based API service backed by OpenAI, deploying it on SAP-BTP Cloud Foundry & finally creating a SAPUI5 Application & consuming our API Service in the same. Follow me for more such technical blogs.




Labels in this area