SAP Home Learn Build Integrate Model Operate Extend with AI ConnectTutorial navigator Knowledge Graph API Devtoberfest Developer Advocates App Space

Manage my Account SAP Devs YouTube ↗ Learnings ↗ Community ↗ Provide Feedback ↗
Logout
⤢ Open full site

Add Custom Logic

This tutorial shows you how to add custom logic to the source code of the SAP Fiori elements application you have already created.

Overview

🎓 beginner 10 min. SAP Cloud Application Programming ModelBeginnerNode JsJavaSAP Business Technology PlatformSAP Fiori

You will learn

  • How to add custom code that changes the value of the urgency property.
  • How CAP automatically treats the JavaScript/Java file that you add as a handler.

Prerequisites

Prerequisites

You’ve implemented the user interface of your application. Follow the steps in the Add SAP Fiori Elements UIs tutorial that is part of the Develop a Full-Stack CAP Application Following SAP BTP Developer’s Guide tutorial group.

OUT OF MAINTENANCE

This tutorial is no longer maintained. For an up-to-date version and support with any issues, refer to the Develop a Full-Stack CAP Application Following the SAP BTP Developer’s Guide mission in the SAP Discovery Center.

Steps

Step 1 Add custom code

You can create a CAP project in either Node.js or Java. You have to choose one way or the other and follow through. The tabs Node.js and Java provide detailed steps for each alternative way.

In this tutorial, you add some custom code to the CAP application. Depending on the contents of the title property, the custom code changes the value of the urgency property.

  1. In SAP Business Application Studio, go to your IncidentManagement dev space.

    Make sure the IncidentManagement dev space is in status RUNNING.

  2. Create a new services.js file in the srv folder of the INCIDENT-MANAGEMENT application.

  3. Add the following code (the actual business logic) to the services.js file:

    JavaScript
    const cds = require('@sap/cds')
    
    class ProcessorService extends cds.ApplicationService {
      /** Registering custom event handlers */
      init() {
        this.before("UPDATE", "Incidents", (req) => this.onUpdate(req));
        this.before("CREATE", "Incidents", (req) => this.changeUrgencyDueToSubject(req.data));
    
        return super.init();
      }
    
      changeUrgencyDueToSubject(data) {
        let urgent = data.title?.match(/urgent/i)
        if (urgent) data.urgency_code = 'H'
      }
    
      /** Custom Validation */
      async onUpdate (req) {
        let closed = await SELECT.one(1) .from (req.subject) .where `status.code = 'C'`
        if (closed) req.reject `Can't modify a closed incident!`
      }
    }
    module.exports = { ProcessorService }
  4. Make sure that the SAP Fiori application is running. If you closed it, choose the Preview Application option in the Application Info - incidents tab and select the watch-incidents npm script.

    To open the Application Info - incidents tab:

    1. Invoke the Command Palette - ViewCommand Palette or Command + Shift + P for macOS / Ctrl + Shift + P for Windows.
    2. Choose Fiori: Open Application Info.
  5. Create a new incident with the word urgent in its title and with the urgency set to Medium.

    Create new incident
    Create new incident

    You see that the value in the Urgency field is automatically set to high.

    Fiori Elements Work List
    Fiori Elements Work List

Step 2 Understand the custom code
+

Resources

Discussion

Share feedback on this tutorial or join the conversation in SAP Community.

Submit detailed feedback Discuss in Community
Steps
Step 1 of 2
1. Add custom code 2. Understand the custom code

Learn more →