Technical Articles
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
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,
- Click on the View menu
- 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,
- Select CAP Project
- 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,
- Click on ArbaReqs to open the project structure.
- Click on the package.json file to open the file contents in the right pane.
- Add the code snippet with the below details (Code Snippet Snippet-1: package.json shows the full package.json sanitized file) :
- url: Provide the URL of Get Requisitions EndPoint that you noted down in Get URL and Authentication Details of Integration Flow section.
- URL is provided until ‘/http’ as shown in the screenshot. ‘GetRequisitions’ is truncated.
- username: Provide the clientid that you noted down in Get URL and Authentication Details of Integration Flow section
- password: Provide the clientsecret that you noted down in Get URL and Authentication Details of Integration Flow section
- url: Provide the URL of Get Requisitions EndPoint 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.
- Right click on mta.yaml file.
- Select Build MTA Project to start the build process. The build process creates a .mtar file that packages the project for deployment.
- Wait for the build process to complete and show a message saying MTA archive generated.
- 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.
- Right click on ArbaReqs_1.0.0.mtar file.
- Select Deploy MTA Archive to start the deployment process.
- 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.
- Shows the list of all applications deployed to your SubbAccount –> Space
- Click on the ArbaReqs-srv to show ArbaReqs-srv – Overview screen
Picture 42
On ArbaReqs-srv – Overview screen,
- Make sure the application is in Started status. (If not, use the Start button to start the application)
- 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.
- Click on the Connectivity dropdown.
- Select the Destinations link.
- 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
Nice series.
I believe to be noted that the code is just for demo purpose and url/client id/secret are to be replaced by ideally a destination and some security gate also required with xsuaa in a production environment.
In real world, Integration Suite layer is not quite neccessary if there is CAP, but really nice to see it together here leveraging the prebuilt template.
Thanks for putting all the things together.
Thanks Kevin for taking time and providing your feedback!
You are right! Integration Suite is not mandatory but included here primarily for its prebuilt content as you observed. Depending on use case, the components mentioned here can be added, removed or modified.
Please consider the series as a "Hello World" kind of framework. Production environment requires additional hardening content as you pointed out.