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:

https://cap.cloud.sap/docs/get-started/

https://github.com/youssefnotes/invoice_browser