Develop a Fiori app using SAP Cloud Application Programming Model (CAP) and Node.js

Introduction

You can use this guide to learn how to develop a Fiori app using the SAP Cloud Application Programming Model (CAP) and Node.js.

Step 1: Create a CAP app

Create a GitHub repository for your project. Open a command-line window and clone your repository into a new directory by entering the following command:

git clone <repository>

Open Visual Studio Code. Open the newly-created directory. Make sure you have installed the command-line client and development toolkit for CAP by entering:

npm i -g @sap/cds-dk

Now, enter the following commands:

cds init
npm install

We start by creating a new file schema.cds in the db directory. Enter the same data as depicted in Listing 1.1.

namespace riskmanagement;
using { managed } from '@sap/cds/common';

  entity Risk : managed {
    key ID : UUID  @(Core.Computed : true);
    title : String(100);
    priority : String(5);
    description : String;
    mitigation : Association to Mitigation;
    impact : Integer;
    criticality : Integer;
  }

  entity Mitigation : managed {
    key ID : UUID  @(Core.Computed : true);
    description : String;
    owner : String;
    timeline : String;
    risks : Association to many Risk on risks.mitigation = $self;
  }

Listing 1.1 schema.cds file

Create a new file risk-service.cds in the srv directory. Enter the same data as depicted in Listing 1.2.

using { riskmanagement } from '../db/schema';

@path: 'service/risk'
service RiskService {
  entity Risk as projection on riskmanagement.Risk;
    annotate Risk with @odata.draft.enabled;
  entity Mitigation as projection on riskmanagement.Mitigation;
    annotate Mitigation with @odata.draft.enabled;
}

Listing 1.2 risk-service.cds file

Create a new file risk-service-ui.cds in the srv directory. Enter the same data as depicted in Listing 1.3.

using RiskService from './risk-service';

annotate RiskService.Risk with {
    title       @title: 'Title';
    priority    @title: 'Priority';
    description @title: 'Description';
    mitigation  @title: 'Mitigation';
    impact      @title: 'Impact';
}

annotate RiskService.Mitigation with {
    ID @(
        UI.Hidden,
        Common: {
        Text: description
        }
    );
    description  @title: 'Description';
    owner        @title: 'Owner';
    timeline     @title: 'Timeline';
    risks        @title: 'Risks';
}

annotate RiskService.Risk with @(
    UI: {
        HeaderInfo: {
            TypeName: 'Risk',
            TypeNamePlural: 'Risks',
            Title          : {
                $Type : 'UI.DataField',
                Value : title
            },
            Description : {
                $Type: 'UI.DataField',
                Value: description
            }
        },
        SelectionFields: [priority],
        LineItem: [
            {Value: title},
            {Value: mitigation_ID},
            {
                Value: priority,
                Criticality: criticality
            },
            {
                Value: impact,
                Criticality: criticality
            }
        ],
        Facets: [
            {$Type: 'UI.ReferenceFacet', Label: 'Main', Target: '@UI.FieldGroup#Main'}
        ],
        FieldGroup#Main: {
            Data: [
                {Value: mitigation_ID},
                {
                    Value: priority,
                    Criticality: criticality
                },
                {
                    Value: impact,
                    Criticality: criticality
                }
            ]
        }
    }
) 
{

};

annotate RiskService.Risk with {
    mitigation @(
        Common: {
            //show text, not id for mitigation in the context of risks
            Text: mitigation.description, TextArrangement: #TextOnly,
            ValueList: {
                Label: 'Mitigations',
                CollectionPath: 'Mitigation',
                Parameters: [
                    { $Type: 'Common.ValueListParameterInOut',
                        LocalDataProperty: mitigation_ID,
                        ValueListProperty: 'ID'
                    },
                    { $Type: 'Common.ValueListParameterDisplayOnly',
                        ValueListProperty: 'description'
                    }
                ]
            }
        }
    );
}

annotate RiskService.Mitigation with @(
    UI: {
        HeaderInfo: {
            TypeName: 'Mitigation',
            TypeNamePlural: 'Mitigations',
            Title          : {
                $Type : 'UI.DataField',
                Value : description
            }
        },
        LineItem: [
            {Value: description}
        ]
    }
) 
{

};

Listing 1.3 risk-service-ui.cds file

Create a new file risk-service.js in the srv directory. Enter the same data as depicted in Listing 1.4.

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

/**
 * Implementation for Risk Management service defined in ./risk-service.cds
 */
module.exports = cds.service.impl(async function() {
    this.after('READ', 'Risk', risksData => {
        const risks = Array.isArray(risksData) ? risksData : [risksData];
        risks.forEach(risk => {
            if (risk.impact >= 100000) {
                risk.criticality = 1;
            } 
            else {
                risk.criticality = 2;
            }
        });
    });
});

Listing 1.4 risk-service.js file

Create a new file riskmanagement-Risk.csv in the db/data directory. Enter the same data as depicted in riskmanagement-Risk.csv.

Create a new file riskmanagement-Mitigation.csv in the db/data directory. Enter the same data as depicted in riskmanagement-Mitigation.csv.

In a command-line, execute the following command:

cds watch

You can access the service endpoints at http://localhost:4004.

Step 2: Create a SAP Fiori elements app

Choose View • Command Palette from the main menu. Choose Fiori: Open Application Generator.

Choose application type SAP Fiori elements and floorplan List Report Object Page (see Figure 2.1). Choose Next to confirm your entries.

Figure 2.1 Choosing the floorplan for your application

Enter the data source, the CAP project folder path and the OData service (see Figure 2.2). Choose Next to confirm your entries.

Figure 2.2 Configuring the data source and selecting a service

Enter the main entity (see Figure 2.3). Choose Next to confirm your entry.

Figure 2.3 Configuring the selected service

Enter the module name and the application title (see Figure 2.4). Choose Finish to generate the application.

Figure 2.4 Configuring the main project attributes

In a command-line, execute the following command:

cds watch

You can now access the app running locally at http://localhost:4004.

Summary

In this tutorial, you learned about developing a Fiori app using the SAP Cloud Application Programming Model (CAP) and Node.js.