Exercise: Adding Custom Business Logic

Business Example - Introduction

In this exercise, you will add custom code to the CAP service to implement conditional formatting of certain cells of your work list. Depending on the value of the property impact the criticality column will get a special color highlighting.

Exercise Options

You can perform this exercise in two ways:

Live Environment – using the instructions provided below, you can perform the tasks in the SAP BTP Free Tier account
Platform Simulation – follow the step-by-step instructions within the simulation

Note

We are strongly recommending first performing the tasks in the live environment.

Prerequisites

Before proceeding with this exercise, first ensure that you do the following:

Generate the SAP Fiori Elements UI
Are already familiar with JavaScript coding

ExerciseStart Exercise

Steps

Add custom code.

In the project, go to folder srv, representing the service, and select New File in the context menu.
Enter risk-service.js as a name.
Select the new file in the explorer, an editor opens.

Enter the following lines into the editor:

Note

The defined constant for the BusinessPartners will be used in a later step.

Code snippet


// Import the cds facade object (https://cap.cloud.sap/docs/node.js/cds-facade)
const cds = require('@sap/cds')

// The service implementation with all service handlers
module.exports = cds.service.impl(async function() {

    // Define constants for the Risk and BusinessPartner entities from the risk-service.cds file
    const { Risks, BusinessPartners } = this.entities;

    // This handler will be executed directly AFTER a READ operation on RISKS
    // With this we can loop through the received data set and manipulate the single risk entries
    this.after("READ", Risks, (data) => {
        // Convert to array, if it's only a single risk, so that the code won't break here
        const risks = Array.isArray(data) ? data : [data];

        // Looping through the array of risks to set the virtual field 'criticality' that you defined in the schema
        risks.forEach((risk) => {
            if( risk.impact >= 100000) {
                risk.criticality = 1;
            } else {
                risk.criticality = 2;
            }

            // set criticality for priority
            switch (risk.prio_code) {
                case 'H':
                    risk.PrioCriticality = 1;
                    break;
                case 'M':
                    risk.PrioCriticality = 2;
                    break;
                case 'L':
                    risk.PrioCriticality = 3;
                    break;
                default:
                    break;
            }

        })
    })
  });

Expand

Save the file.

Update the List Report Page.
1. Open the Page Map of the SAP Fiori Elements application (right click on the "app/risk-management" folder → "Show Page Map").
2. Navigate to the List Report Page to edit it.
3. Under columns, choose Priority and update the annotations as follows:
4. Next, update the annotations of the Impact column.
Update the annotations for Impact and Priority on the Object Page.
1. Set the Criticality annotation for the Priority field to PrioCriticality.
2. Set the Criticality annotation for the Impact field to criticality.
Preview the SAP Fiori Elements application.
1. In the browser, reload the preview of the SAP Fiori Elements application.
  It now shows our work list with the Priority and Impact columns with color and an icon, depending on the amount in impact.
  Note
  Keep your application (cds watch) running in your web browser, you will need it later.

Result