How to call BIP Report from VBCS using JavaScript

In this section, we will see how to call BIP report from VBCS using JavaScript without Oracle Integration Cloud (OIC).

Let us create sample VBCS application and page to call BIP report on button click.

We will pass parameter to BIP report from Text field on VBCS page.

Follow the steps below to achieve the above requirements:

Step1: Create Sample VBCS application.

Navigate to VBCS URL and click on New.

Click on Finish.

This will be launched below page:

Now create new Web apps:

Provide any valid Web application name.

Click on Create.

Now let us remove the Page header from the main page.

Remove code for Page header.

Step2: SOAP API details for calling BIP Report.

Let us consider the BIP report as shown below:

Now we will call this report from VBCS using JavaScript by passing the report parameter from VBCS page item.

SOAP API for calling fusion BIP report is as follows:

WSDL : https://fa-XXXXXX-saasfaprod1.fa.ocs.oraclecloud.com:443/xmlpserver/services/ExternalReportWSSService?wsdl

Method: runReport

Content-Type: application/soap+xml; charset=UTF-8

Payload:

<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope" xmlns:pub="http://xmlns.oracle.com/oxp/service/PublicReportService">
   <soap:Header/>
   <soap:Body>
      <pub:runReport>
         <pub:reportRequest>
            <pub:attributeFormat>csv</pub:attributeFormat>
            <pub:parameterNameValues>
               <pub:item>
                  <pub:name>P_INVOICE_NUM</pub:name>
                  <pub:values>
                     <pub:item>1</pub:item>
                  </pub:values>
               </pub:item>
            </pub:parameterNameValues>
            <pub:reportAbsolutePath>/Custom/VBCS/XX Test AP Invoice Report.xdo</pub:reportAbsolutePath>
            <pub:sizeOfDataChunkDownload>-1</pub:sizeOfDataChunkDownload>
         </pub:reportRequest>
         <pub:appParams>?</pub:appParams>
      </pub:runReport>
   </soap:Body>
</soap:Envelope>

Sample Response:

<env:Envelope xmlns:env="http://www.w3.org/2003/05/soap-envelope">
     <env:Header/>
     <env:Body>
        <ns2:runReportResponse xmlns:ns2="http://xmlns.oracle.com/oxp/service/PublicReportService">
           <ns2:runReportReturn>
              <ns2:reportBytes>77u/SU5WT0lDRV9JRCxWRU5ET1JfSUQsSU5WT0lDRV9OVU0sSU5WT0lDRV9DVVJSRU5DWV9DT0RFLFBBWU1FTlRfQ1VSUkVOQ1lfQ09ERSxJTlZPSUNFX0FNT1VOVCxWRU5ET1JfU0lURV9JRCxTT1VSQ0UsSU5WT0lDRV9UWVBFX0xPT0tVUF9DT0RFLEFQUFJPVkFMX1NUQVRVUwozMDAwMDAwMDI5NzYwMzAsMzAwMDAwMDAyOTEwOTE2LDEsVVNELFVTRCwwLDMwMDAwMDAwMjkxNjQ3MywiTWFudWFsIEludm9pY2UgRW50cnkiLFNUQU5EQVJELENBTkNFTExFRAo=</ns2:reportBytes>
              <ns2:reportContentType>text/plain;charset=UTF-8</ns2:reportContentType>
              <ns2:reportFileID xsi:nil="true" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"/>
              <ns2:reportLocale xsi:nil="true" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"/>
              <ns2:metaDataList xsi:nil="true" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"/>
           </ns2:runReportReturn>
        </ns2:runReportResponse>
     </env:Body>
  </env:Envelope>

Step3: Create Service connection for BIP report in VBCS.

Navigate to Service connection and click on + Service connection.

Select “Define by Endpoint” as shown below:

Provide URL which we used in SOAP UI and select Action Hint as “Get One” and click on Create Backend.

https://fa-XXXXXX-saasfaprod1.fa.ocs.oraclecloud.com:443/xmlpserver/services/ExternalReportWSSService

Provide backend details as below:

Click on Next.

Provide Service Connection details as below:

Click on Request—>Headers and Provide content type

Content-Type: application/soap+xml; charset=UTF-8

Click on Test-to-verify Service Connection.

Click on Send Request.

Once response is verified. Click on Create.

Step4: Create VBCS page with Input Text field and Table region.

Create label field as shown below:

Now Create Input Text field:

Now go to Data and create variable to hold value for input Invoice Number.

Click on Create.

Now Create Table region.

Go to Data and create ADP variable to hold table data.

Click on Create.

Now let us define Type for this variable.

Add fields as per BIP report output manually as shown above.

Assign the above type to ADP variable.

Now add ADP fields on page.

Create Button on this page to call BIP report.

Run this application to verify changes.

Now we will add code on Submit button to call BIP report and display output in table.

Step5: Create Action Chain and JavaScript Code.

Go to Submit button properties —>Events and click on new Event Listener.

Now add below logic step by step to call BIP report from action chain.

1. Assign Variable to store Request Payload.
   

Click on Create.

Click on Expression editor to assign static value to this variable.

`<soap:Envelope xmlns:soap=”http://www.w3.org/2003/05/soap-envelope” xmlns:pub=”http://xmlns.oracle.com/oxp/service/PublicReportService”>
   <soap:Header/>
   <soap:Body>
      <pub:runReport>
         <pub:reportRequest>
            <pub:attributeFormat>csv</pub:attributeFormat>
            <pub:parameterNameValues>
               <pub:item>
                  <pub:name>P_INVOICE_NUM</pub:name>
                  <pub:values>
                     <pub:item>${$variables.Var_InvoiceNum_IN}</pub:item>
                  </pub:values>
               </pub:item>
            </pub:parameterNameValues>
            <pub:reportAbsolutePath>/Custom/VBCS/XX Test AP Invoice Report.xdo</pub:reportAbsolutePath>
            <pub:sizeOfDataChunkDownload>-1</pub:sizeOfDataChunkDownload>
         </pub:reportRequest>
      </pub:runReport>
   </soap:Body>
</soap:Envelope>`

Click on Save.

1. Call BIP SOAP API using service connection:
   

Click on Select.

Click on Body and Map to variable created in step A.

Click on Save.

1. Create JavaScript Function parse XML response and decode base 64.
   

Navigate to JavaScript section and add the code below.

JavaScript Code:

define([“ojs/ojarraydataprovider”], function(ArrayDataProvider) {
  ‘use strict’;
  class PageModule {
   getReportBytes(bipxmlResponse) {
 
  const parser = new DOMParser();
const xmlDoc = parser.parseFromString(bipxmlResponse, “application/xml”);
// Use localName or fully-qualified name with namespace handling
const reportBytes = xmlDoc.getElementsByTagNameNS(
  “http://xmlns.oracle.com/oxp/service/PublicReportService”,
  “reportBytes”
)[0]?.textContent;
const decodedString = atob(reportBytes);
const lines = decodedString.trim().split(“\n”);
  const headers = lines[0].split(“,”);
  const jsonArray = lines.slice(1).map(line => {
    const values = line.split(“,”);
    const obj = {};
    headers.forEach((header, index) => {
      obj[header.trim()] = values[index]?.trim();
    });
    return obj;
  });
  return new ArrayDataProvider(
    jsonArray, { keyAttributes:  “INVOICE_ID” });
}
 
  }
 
  return PageModule;
});

Now call this function from action chain.

Now pass output of step B as parameter to this function (bipxmlResponse).

Click on Save.

Note: Due to VBCS bug, it automatically adds single quotes around parameter value. We can remove that by editing code.

1. Assign function response to ADP variable to display data.
   

Open expression editor for this assigned variable to assign reportBytes result.

Click on Save.

Now run the application.

Here we can see data is getting populated when we provide invoice numbers and click on Submit button.