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 Sixth 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. So, in this episode, we will create our 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.

Create a Project in BAS

Let's start with creating a Blank Application Project in BAS.

Step 1: Click and Choose File & New Project from the Template.

Step 2: Choose Fiori and click on Start.

Step 3: Choose SAP Fiori as the template type, select basic & click Next.

Step 4: Choose None & click Next.

Step 5: Add View name, I am Choosing OpenAI, which can be anything & click Next.

Step 6: Add Module name, App Title, namespace, and click on Finish.

You should finally land here & project structure should look like this.

Test the Template Created App

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

Step 2: Let's do the npm install.

Step 3: And, do the npm update.

Step 4: And finally test run whatever was built by template 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.

Let's Build the UI

We will create a Simple UI that allows input & shows the top 3 Matches with percentages.

Step 1: Open OpenAI.view.xml, it should look like this.

Step 2: Replace it with the below Code Snippet.
<mvc:View controllerName="openai.openai.controller.OpenAI"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
<Page id="page" title="{i18n>title}">
<f:GridListItem id="glt1" class="round">
<grid:ResponsiveColumnItemLayoutData id="grid1" columns="20" rows="5" />
<VBox id="vb1" width="100%" class="sapUiSmallMargin" wrap="Wrap">
<Title id="txt1" text="{i18n>query}" />
<VBox id="vb2" width="100%">
<Label id="lb1" ></Label>
<TextArea id="chatques" width="90%" ></TextArea>
<Label id="lb2" ></Label>
<Button id="b1" text="{i18n>submit}" class="invtbutton" press="askAI" />
<Label id="l1"/>
<Label id="l2"/>
<f:GridListItem id="glt2" class="round">
<grid:ResponsiveColumnItemLayoutData id="grid2" columns="100" rows="5" />
<VBox id="vb3" width="100%" class="sapUiSmallMargin">
<Title id="t1" text="{i18n>ans}" />
<VBox id="vb4" width="100%">
<HBox id="hb1" width="100%">
<TextArea id="chatans1a" width="100%" ></TextArea>
<TextArea id="chatans1b" width="100%" ></TextArea>
<HBox id="hb2" width="100%">
<TextArea id="chatans2a" width="100%" ></TextArea>
<TextArea id="chatans2b" width="100%" ></TextArea>
<HBox id="hb3" width="100%">
<TextArea id="chatans3a" width="100%" ></TextArea>
<TextArea id="chatans3b" width="100%" ></TextArea>

Step 3: Open the i18n file & code at the end from the below Code Snippet.
query=Please Enter Text

Step 4: Save everything, open the terminal, do npm start to run & check the changes (Just Refresh the App page if the App is already running). The App should look like this :

Congrats We are done with the UI part and will add logic  & connect our service in the Next episode.

Let’s Summarize

We created a project from  Template in BAS's DEVSpace & tinkered/created a basic UI for our requirement. Further, we tested the same in BAS. That’s all for this episode, will meet you guys in Episode 7.

Next Episode : Epidosde 7





Labels in this area