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

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

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%2034

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%2035

Picture 35

On New Project From Template Screen,

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

Picture%2036

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%2037

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%2038

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%2039

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%2040

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%2041

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%2042

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%2043

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%2044

Picture 44

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

Picture%2045

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%2046

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%2047

Picture 47

Next In Series

Part 5: Ariba Requisitions Fiori Application

Part 6: Central Fiori Launchpad Setup