SAP Fiori Application To Display SAP Ariba Requisition Data – Part 4

[former_member680688]

This is part 4 of the 6 series blog. Please start with Part 1: Introduction to understand the Use case, Solution Architecture, High-Level functionality, and context of this blog series.

 

This blog series is divided into 6 parts:

Part 1: Introduction

Part 2: SAP Ariba – API Setup

Part 3: SAP Integration Suite – Integration Flows Build

Part 4: Ariba Requisitions Service Application

Part 5: Ariba Requisitions Fiori Application

Part 6: Central Fiori Launchpad Setup

 

Part 4: SAP Ariba Requisitions Service CAP Application

Note: The CAP application built in this blog is ArbaReqs-srv. It is the same as Ariba Requisitions Service Application depicted in the architecture diagram.

Develop Ariba Requisitions Service CAP Application (ArbaReqs-srv) using SAP Business Technology Platform

On SAP Business Technology Platform,

1. Click on the View menu


2. Select Find Command… to bring up the command finder.

Picture 34

 

On the Command finder, type SAP Business Application Studio: New Project from Template and Click on enter to display New Project From Template screen.

Picture 35

 

On New Project From Template Screen,

1. Select CAP Project


2. Click on Start to go to CAP Project Details screen

Picture 36

 

On the CAP Project Details wizard, provide the following values. Leave the rest of the fields with their default values.

Step	Field	Value
1	Enter your project name	ArbaReqs
2	Select your runtime	Node.js
3	MTA based SAP Business Technology Platform Deploy	Check
4	Basic Sample Files	UnCheck
5	Finish	Click on Finish

A new project named ArbaReqs will be added to the Explorer pane as shown.

Picture 37

 

On the Explorer pane,

1. Click on ArbaReqs to open the project structure.


2. Click on the package.json file to open the file contents in the right pane.


3. Add the code snippet with the below details (Code Snippet Snippet-1: package.json shows the full package.json sanitized file) :
   
   
   
   1. url: Provide the URL of Get Requisitions EndPoint that you noted down in Get URL and Authentication Details of Integration Flow section.
      
      
      
      1. URL is provided until ‘/http’ as shown in the screenshot. ‘GetRequisitions’ is truncated.
      
      
      
      
   
   
   2. username: Provide the clientid that you noted down in Get URL and Authentication Details of Integration Flow section
   
   
   3. password: Provide the clientsecret that you noted down in Get URL and Authentication Details of Integration Flow section
   
   
   
   

Picture 38

{

  "name": "ArbaReqs",

  "version": "1.0.0",

  "description": "A simple CAP project.",

  "repository": "<Add your repository here>",

  "license": "UNLICENSED",

  "private": true,

  "dependencies": {

    "@sap/cds": "^5",

    "@sap/cds-odata-v2-adapter-proxy": "^1.8.19",

    "express": "^4"

  },

  "devDependencies": {

    "sqlite3": "^5.0.2"

  },

  "scripts": {

    "start": "cds run"

  },

  "eslintConfig": {

    "extends": "eslint:recommended",

    "env": {

      "es2020": true,

      "node": true,

      "jest": true,

      "mocha": true

    },

    "globals": {

      "SELECT": true,

      "INSERT": true,

      "UPDATE": true,

      "DELETE": true,

      "CREATE": true,

      "DROP": true,

      "CDL": true,

      "CQL": true,

      "CXL": true,

      "cds": true

    },

    "rules": {

      "no-console": "off",

      "require-atomic-updates": "off"

    }

  },

  "cds": {

    "requires": {

      "aribareq": {

        "kind": "rest",

        "credentials": {

          "url": "https://<removed intentionally>.it-cpitrial05-rt.cfapps.us10-001.hana.ondemand.com/http",

          "username": "<removed intentionally>",

          "password": "<removed intentionally>",

          "requestTimeout": 30000

        }

      }

    }

  }

}

Snippet: package.json

 

On the Explorer pane, select ArbaReqs project and then select srv.

Create 3 files under srv as shown and copy the contents from the corresponding code snippets provided below. (Snippet: cat-service.cds, Snippet: cat-service.js, Snippet: server.js)

Picture 39

 

service CatalogService {

    @readonly entity ARecords {Records: many {Name: String; UniqueName: String;}};

    @readonly entity Requisition {Name: String; UniqueName: String;};

}

Snippet: cat-service.cds

 

const cds = require('@sap/cds');



module.exports = cds.service.impl(async function() {



    const { ARecords, Requisition } = this.entities;

    

    const service = await cds.connect.to('aribareq');

    this.on('READ', ARecords, request => {

        //console.log("Variable in ARecords ==> 1");

        const var1 = service.tx(request).get('/GetRequisitions');

        //console.log("Variable in ARecords ==> " + var1)

        return var1;

    });

    this.on('READ', Requisition, async request => {

        //console.log("Variable in AReqs ==> 1");

        const { Records } = await this.read(ARecords);

        //console.log("Variable in AReqs ==> 3 " + Records);



        return request.reply(Records);

    });



});

Snippet:cat-service.js

 

"use strict";



const cds = require('@sap/cds')

const proxy = require('@sap/cds-odata-v2-adapter-proxy')



cds.on('bootstrap', app => app.use(proxy()))



module.exports = cds.server

Snippet: server.js

 

Build And Deploy Ariba Requisitions Service CAP Application (ArbaReqs-srv)

On the Explorer --> Projects pane, Select the ArbaReqs project to show the complete structure.

1. Right click on mta.yaml file.


2. Select Build MTA Project to start the build process. The build process creates a .mtar file that packages the project for deployment.


3. Wait for the build process to complete and show a message saying MTA archive generated.


4. ArbaReqs_1.0.0.mtar file is created and saved in ArbaReqs/mta_archives

Picture 40

 

On the Explorer --> Projects pane, Select ArbaReqs project to show the complete project structure.

1. Right click on ArbaReqs_1.0.0.mtar file.


2. Select Deploy MTA Archive to start the deployment process.


3. Wait for the ‘Application ArbaReqs-srv started’ message to appear in the Task: Deploy MTA Archive panel

At this point, the SAP Ariba Requisitions Service CAP application is deployed as an application in your BTP SubAccount --> Space with name ArbaReqs-srv.

Picture 41

 

Testing Ariba Requisitions Service (ArbaReqs-srv)

Go to the SubAccount and then to the Space where you deployed ArbaReqs-srv application.

1. Shows the list of all applications deployed to your SubbAccount --> Space


2. Click on the ArbaReqs-srv to show ArbaReqs-srv – Overview screen

Picture 42

 

On ArbaReqs-srv – Overview screen,

1. Make sure the application is in Started status. (If not, use the Start button to start the application)


2. Click on the Application Route link to open the application in a new browser window.
   
   
   
   • Save this URL for later use.
   
   
   
   

Picture 43

 

You should see a new browser window with contents as below. Click on each of the links to make sure you are receiving Ariba Requisitions data as a response.

ARecords: Response is JSON data with Ariba Requisitions data wrapped inside the Records array.

Requisition: Response is JSON data with Ariba Requisitions data without the Records array. This will be used by the Fiori app that’s going to be built in upcoming sections.

Picture 44

 

A screenshot showing the difference between the responses is shown below.

Picture 45

 

BTP Destination For Ariba Requisitions Service

On BTP Home, Go into the SubAccount where you deployed the ArbaReqs-srv application and perform the following steps.

1. Click on the Connectivity dropdown.


2. Select the Destinations link.


3. Click on the New Destination link to display the Destination Configuration screen.

Picture 46

 

On the Destination Configuration screen, provide values as specified in the below tables and Click on Save.

Field Name	Value
Name	CAPArbaReqsDest
Type	HTTP
Description	CAPArbaReqsDest
URL	URL saved in Testings ArbaReqs section
Proxy Type	Internet
Authentication	NoAuthentication

 

Additional Properties Table

Field Name	Value
HTML5.DynamicDestination	true
sap-client	100
WebIDEEnabled	true
WebIDESystem	Gateway
WebIDEUsage	odata_abap,dev_abap
Use default JDK truststore	Leave it checked

 

Picture 47

 

Next In Series

Part 5: Ariba Requisitions Fiori Application

Part 6: Central Fiori Launchpad Setup