Skip to Content
Technical Articles
Author's profile photo Kapil Verma

Connect the Created OpenAI API with the SAPUI5 Application

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.





Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.