Technical Articles
From R/3 ABAP to CAP/Fiori Elements on SAP Cloud
ABAPers prefer to focus on business logic. After all, this is what matters. well, this has been my view for 14 years, time to change…learn UI5, javascript, one or two frameworks and we are good to go… hmm not fast. These frameworks have different looks and feel, it takes a lot of time to customize their look to a standard business application.
Shouldn’t there be a much-standardized way? CAP and Fiori Elements are here to the rescue which takes care of a lot of boilerplate code and let you declare how the UI looks based on standard annotations. like good old ABAP selection-screen statements.
Here I will list my notes and some code samples I used to create a simple CAP application and cover the below points.
- CDS Model
- CDS Service
- Fiori Elements
In future posts, I shall cover the deployment and launchpad steps.
Housekeeping
Setting up our development environment, thanks to my colleague @Gunter for pointing me to use VSCode.
The following packages are required for CAP development.
- Install nodejs, I use NVM
https://github.com/nvm-sh/nvm
allows switching between multiple node versions - Install SQLite
- The command-line client and development toolkit for the SAP Cloud Application Programming Model (CAP)
npm i -g @sap/cds-dk
npm i -g mbt --unsafe-perm=true --allow-root
npm i -g mta --unsafe-perm=true --allow-root
- on VSCode extensions, search for
SAP
, install the following extensions
- SAP HANA Developer Command Line Interface
npm i -g hana-cli
- The Cloud MTA Build Tool
npm install -g mbt
- For windows user you need to have make installed, follow the steps here https://sap.github.io/cloud-mta-build-tool/makefile/ -Install MTA CF plugin
Project Setup && Layout
- Let’s initialize our project using
cds init invoice_sample
This will create a default project structure
- Run
npm install
Pull all the required libraries, for example sqlite
The CDS model
Folder db we will contain the domain model.
- Create a
schema.cds
file to contain the definitions
Let’s start with a simple model of Invoice Header
- AccountingDocumentHeader
entity AccountingDocumentHeader {
CompanyCode : String(4);
AccDocNo : String;
Year : Date;
Vendor : String(50);
DocHeaderText : String;
Plant : String;
}
- Now let’s deploy locally with
cds deploy --to sqlite
and examine our table
The Service
- Under the srv directory create an invoice-service.cds
- add the following service definition to expose the entity
using {com.cap.accountingDoc as accountingDoc} from '../db/schema'; service AccountingDocumentService @(path : '/api') { entity DocumentHeaderService as projection on accountingDoc.AccountingDocumentHeader; }
annotate com.cap.accountingDoc.AccountingDocumentHeader with @fiori.draft.enabled; annotate AccountingDocumentService.DocumentHeaderService with @odata.draft.enabled;
- Notice the last two annotations to enable out-of-the-box draft functionality
The UI/Fiori Elements
- In VSCode, open the application generator.
- Select SAP Fiori Elements, List Report Objects
- Data Source is a local cap project
- Select the service & main entity
- The UI generated directory will look similar to this
- Fiori elements code can be placed in the annotation.cds file
annotate AccountingDocumentService.DocumentHeaderService with @(
UI.HeaderInfo : {
TypeName : 'Accounting Documente',
TypeNamePlural : 'Accounting Documents',
Title : {
$Type : 'UI.DataField',
Value : companyCode
}
},
UI.LineItem : [
{
$Type : 'UI.DataField',
Value : companyCode
},
{
$Type : 'UI.DataField',
Value : accDocNo
},
{
$Type : 'UI.DataField',
Value : year
},
{
$Type : 'UI.DataField',
Value : docHeaderText
},
{
$Type : 'UI.DataField',
Value : plant
},
{
Value : sensitivity,
Criticality : criticality
}
],
UI.SelectionFields : [
companyCode,
accDocNo,
year,
plant,
sensitivity
],
UI.HeaderFacets : [{
$Type : 'UI.ReferenceFacet',
Target : '@UI.FieldGroup#IndustryDetail',
Label : '{i18n>Ind.HeaderFacetIndDetails}'
}],
UI.Facets : [{
$Type : 'UI.CollectionFacet',
Label : '{i18n>Ind.FacetIndustryInfo}',
Facets : [{
$Type : 'UI.ReferenceFacet',
Target : '@UI.FieldGroup#IndustryInfo',
Label : '{i18n>Ind.FacetRegionDescription}'
}, ]
}],
UI.FieldGroup #IndustryDetail : {Data : [
{
$Type : 'UI.DataField',
Value : companyCode
},
{
$Type : 'UI.DataField',
Value : accDocNo
},
{
$Type : 'UI.DataField',
Value : year
}
]},
UI.FieldGroup #IndustryInfo : {Data : [
{
$Type : 'UI.DataField',
Value : bp
},
{
$Type : 'UI.DataField',
Value : docHeaderText
},
{
$Type : 'UI.DataField',
Value : plant
},
{
Value : sensitivity,
Criticality : criticality
}
]}
);
- now run
cds watch
in the project directory and fire your localhost:4040
- Navigate to the application, the selection screen have been created with a standard look and feel
- Click on the create button to start creating new records
Hope you find it a useful start to your CAP/Fiori Elements journey
Cheers,
References: