How to Create Simple Search Page using REST API in VBCS

How to Create Simple Search Page using REST API in VBCS

In this section, we will create Simple search page to display payment terms from fusion.

Step1: Create Backend and Service Connection with Fusion.

Navigate to VBCS—> Backend.

A screenshot of a computer

AI-generated content may be incorrect.

A screenshot of a computer

AI-generated content may be incorrect.

As we need to call fusion REST API, select “Oracle Cloud Applications Instance”.

Provide fusion instance details with URL and authentication details.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Create.

A screenshot of a computer

AI-generated content may be incorrect.

Backend is created now.

Let us create service connections based on this backend.

Navigate to VBCS —>Service Connections.

A screenshot of a computer

AI-generated content may be incorrect.

For fusion REST API, select “select from Catalog” as shown below:

A screenshot of a computer

AI-generated content may be incorrect.

Select “Enterprise Resource Planning and Supply Chain” as shown below:

A screenshot of a computer

AI-generated content may be incorrect.

It will start loading all REST endpoints from fusion.

A screenshot of a computer

AI-generated content may be incorrect.

A screenshot of a computer

AI-generated content may be incorrect.

Provide valid service connection name and Search for required REST endpoint for Payment Terms.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Create.

This will create a new service connection with the below REST endpoint.

A screenshot of a computer

AI-generated content may be incorrect.

Step2: Create a Page to display Payment Terms.

Create Web applications.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Create.

A screenshot of a computer

AI-generated content may be incorrect.

Create Input Text field and Button to search Payment Term in form Layout region.

A screenshot of a computer

AI-generated content may be incorrect.

Change Max Columns =2 and Label Edge =Start.

Drag and drop Input Text field on this form Layout.

A screenshot of a computer

AI-generated content may be incorrect.

Add Button now to add search functionality.

A screenshot of a computer

AI-generated content may be incorrect.

Add table components to display results.

A screenshot of a computer

AI-generated content may be incorrect.

Step3: Create Item type and ADP variable to store REST API response.

Navigate to VBCS–>main-start page —>Types.

A screenshot of a computer

AI-generated content may be incorrect.

Select “From Endpoint” from LOV.

Select service connection and endpoint which are created in the earlier step.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Next.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Finish.

New type is created now.

A screenshot of a computer

AI-generated content may be incorrect.

Create an ADP variable based on this type.

A screenshot of a computer

AI-generated content may be incorrect.

A screenshot of a computer

AI-generated content may be incorrect.

Now assign this variable to Table region.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Expression Editor to select the ADP variable.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Save.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Edit Table Columns.

A screenshot of a computer

AI-generated content may be incorrect.

Run the application.

A screenshot of a computer

AI-generated content may be incorrect.

Step4: Create Page Load Event to display table data on Page load.

vbEnter event listener is used to trigger action before page load in VBCS.

Let us create a new action under the vbEnter event listener.

A screenshot of a computer

AI-generated content may be incorrect.

A screenshot of a computer

AI-generated content may be incorrect.

Select vbEnter from the list of values and click on Next.

A screenshot of a computer

AI-generated content may be incorrect.

Select “Create Page Action Chain” and click on Finish.

A screenshot of a computer

AI-generated content may be incorrect.

Click on “Go to Action Chain” under vbEnterListener.

Now we will call the REST API for payment Terms, and we will assign the REST API response to the ADP variable.

A screenshot of a computer

AI-generated content may be incorrect.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Select.

A screenshot of a computer

AI-generated content may be incorrect.

A screenshot of a computer

AI-generated content may be incorrect.

A screenshot of a computer

AI-generated content may be incorrect.

Click on the Expression Editor.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Save.

A screenshot of a computer

AI-generated content may be incorrect.

Run the application.

A screenshot of a computer

AI-generated content may be incorrect.

Here we can see, on page load, data is getting displayed on page.

Step5: Add Search Logic on Button.

Assign value selected in Payment Term field to variable.

A screenshot of a computer

AI-generated content may be incorrect.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Create.

A screenshot of a computer

AI-generated content may be incorrect.

Let us event listener and action chain on button click.

A screenshot of a computer

AI-generated content may be incorrect.

This will create a new action chain. We will call the REST API for payment terms in action.

A screenshot of a computer

AI-generated content may be incorrect.

Click on q parameter.

A screenshot of a computer

AI-generated content may be incorrect.

Click on Save.

Expression:

“Name='”+ $variables.Var_PaymentTerm + “‘”

Let us assign result of this REST API response to ADP variable.

A screenshot of a computer

AI-generated content may be incorrect.

Run the application.

Provide Payment Term Name as “Net 30” and click on Search.

A screenshot of a computer

AI-generated content may be incorrect.

We can also add below like expression in query parameter also:

“Name LIKE ‘%”+$variables.Var_PaymentTerm +”%'”

Result:

A screenshot of a computer

AI-generated content may be incorrect.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top