Developing an Application in SAP Build Code

Objective

After completing this lesson, you will be able to develop a CAP multitenant application using productivity tools in SAP Build Code in a dev subaccount.

Full-Stack Application Development Overview

In this lesson, you’ll learn how to develop a full-stack application using SAP Build Code, using productivity tools and Joule to accelerate the development process.

A diagram showing the architecture of a full-stack application in a multitenant environment.

The application provider (partner) owns the global account and manages the multiple subaccounts, each designated for specific purposes:

  1. Development subaccount
    1. This subaccount is dedicated to developing and testing multitenant full-stack applications using SAP Build Code.
    2. Once the development is complete, the application is deployed to the Provider subaccount.
  2. Provider subaccount
    1. This subaccount hosts a single instance of the application designed to serve multiple customers.
    2. The application runs on the SAP BTP, Cloud Foundry runtime and other SAP BTP services.
    3. Notably, the deployed application does not contain customer-specific data.
  3. Subscriber subaccount
    1. This subaccount is provisioned for each customer, offering a dedicated environment to access the shared application after subscription. It manages customer-specific configurations, such as authentication, destinations, and data.
    2. In real-world scenarios, customers typically use their own Identity Provider (IdP), such as SAP Identity Authentication Service. Trust between the SAP Authorization and Trust Management service in the subscriber subaccount and the customer’s IdP is established using the SAML 2.0 protocol.
    3. For learning environments, the SAP Identity Authentication Service under the same global SAP BTP account is used, with trust established via the OIDC protocol.

Developing a full-stack application involves four key steps:

The four steps involved in developing an application in SAP Build Code as outlined in the following text.
  1. Subscribe to SAP Build Code in the dev subaccount.
  2. Create a dev space and project for full-stack application.
  3. Develop an application leveraging Joule.
  4. Enable multitenancy and adjust the app router.

In this lesson, we demonstrate in detail how to perform each of these steps.

Step 1: Subscribing to SAP Build Code in the Dev Subaccount

Four Steps for Developing an Application in SAP Build Code

Before you can develop an application in SAP Build Code, first you must subscribe to SAP Build Code.

Note

This video uses the Booster capability because SAP Build Code is available in the Boosters catalogue. In addition to subscribing to SAP BTP services, the Booster automatically checks and assigns the required service quota to a target subaccount and creates and assigns the required role collections to a user.

Step 2: Creating a Dev Space for a Full-Stack Application

Develop an Application in SAP Build Code. Step 2: Create a dev space and project for full-stack application.

When you have subscribed to SAP Build Code, you can start creating a dev space and a project for a full-stack application.

You have several options for creating a project, such as starting from scratch using the project wizard, cloning an existing project, or importing an existing project into your workspace. If you create a project from scratch through the SAP Build Lobby, SAP Build Code suggests the most suitable development space based on the selected project type.

Step 3: Developing an Application Using Joule

Develop an Application in SAP Build Code. Step 3: Develop an app using Joule.

When you have created a dev space and a project for your full-stack application, you can use Joule, the AI co-pilot to develop an app. To develop the app, following these steps:

  • 3.1 Create Core Data Services (CDS) models
  • 3.2 Add an external service
  • 3.3 Add sample data
  • 3.4 Create UI applications
  • 3.5 Add application logic
  • 3.6 Implement authorizations

You’ll learn how to perform each of these actions in the following videos.

Note

This learning journey uses Joule to create CDS models, add sample data, and create application logic.

Step 3.1 Creating CDS Models

The SAP Cloud Application Programming Model (CAP) is a framework designed to build enterprise-grade services and applications, offering developers a guided approach with best practices and ready-to-use solutions for common tasks. CAP projects prioritize domain focus, enabling faster development and future-proofing in a fast-evolving cloud landscape. The framework combines popular open-source and SAP technologies, featuring core data services (CDS) for modeling and service definitions, along with service SDKs and runtimes for Node.js and Java that simplify service implementation and consumption.

CAP Framework adds core data services and Service SDKs on top of open source technologies.

CDS is at the core of the CAP model. You can create CDS entities manually using languages such as CDL (Core Data Language) and CQL (Core Query Language), visually design them through the Storyboard tool, or use Joule to apply AI-driven generation. This lesson demonstrates the use of Joule.

In SAP Build Code, the Joule assistant provides two commands for project generation:

  • /cap-gen-app: Generates a foundational CAP project by creating three core files—schema.cds, services.cds, and annotations.cds. This command does not include sample data or a Fiori elements application.
  • /cap-gen-fiori: Generates a comprehensive project that includes sample data and a Fiori elements application. However, it is limited to generating a single Fiori elements application.

Note

This video uses the following AI prompt with /cap-gen-app:

Design a Distributor Performance Management application.

Define 2 data entities: DistributorEvaluations, FollowUpCodes.

DistributorEvaluations entity fields: title, evaluation description, evaluation date, sales performance, customer satisfaction, operational efficiency, evaluation score, follow-up date, follow-up description.

title, evaluation description and follow-up description are string type, and evaluation date and follow-up date are date type.

sales performance, customer satisfaction, operational efficiency, evaluation score are integer type.

FollowUpCodes entity fields: name, criticality

name is string type and criticality is integer type.

DistributorEvaluations entities are associated to one FollowUpCodes entity without backlink.

Step 3.2: Adding an External Service

In this video, you’ll learn how to add an external service, such as SAP Business One Service Layer, manually within the storyboard using the Service Center.

The video uses the following edited xml file:

Code Snippet
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
<?xml version="1.0" encoding="UTF-8"?> 

<edmx:Edmx Version="4.0" 

    xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"> 

    <edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Core.V1.xml"> 

        <edmx:Include Alias="Core" Namespace="Org.OData.Core.V1"/> 

    </edmx:Reference> 

    <edmx:DataServices> 

        <Schema Namespace="SAPB1" 

            xmlns="http://docs.oasis-open.org/odata/ns/edm"> 

            <EntityType Name="BusinessPartner" OpenType="true"> 

                <Key> 

                    <PropertyRef Name="CardCode"/> 

                </Key> 

                <Property Name="CardCode" Nullable="false" Type="Edm.String"/> 

                <Property Name="CardName" Type="Edm.String"/> 

                <Property Name="CurrentAccountBalance" Type="Edm.Double"/> 

                <Property Name="Currency" Type="Edm.String"/> 

            </EntityType> 

            <EntityContainer Name="ServiceLayer"> 

                <EntitySet EntityType="SAPB1.BusinessPartner" Name="BusinessPartners"> 

                    <Annotation Term="Org.OData.Core.V1.OptimisticConcurrency"> 

                        <Collection> 

                            <PropertyPath>DataVersion</PropertyPath> 

                        </Collection> 

                    </Annotation> 

                </EntitySet> 

            </EntityContainer> 

        </Schema> 

    </edmx:DataServices> 

</edmx:Edmx>

Step 3.3 Adding Sample Data

In a CAP project, sample data is used to populate entities with predefined data sets for development and testing. It allows developers to quickly verify application functionality, simulate realistic scenarios, and validate service behavior. Sample data can be added through Joule, file imports, or automatic generation. Using Joule's AI capabilities, you can generate sample data close to the data model’s context and further refine it with extra prompts to better suit your needs.

Note

This video uses the following prompts:

Prompt 1: Generate sample data

evaulationScores must have over 90, 70-90, and below 70. don’t fill out followupDate, followupDescription, followupCode.

FollowUpCodes:

followUpName,criticality

10% incentive,3

Marketing Support,2

Operational Support,2

Market Review,1

Prompt 2: Enhance DistributorEvaluations

Change salesPerformance less than 100. Fill up businessPartners from BusinessPartners sample data.

One step in the video requires you to input Business Partners sample data by uploading a csv file. Before watching the video, create a csv file for Business Partner data using the following data:

Code Snippet
1234
CardCode,CardName,CurrentAccountBalance,Currency
C20000,Customer 20,20000,GBP
C30000,Customer 30,30000,GBP
C40000,Customer 40,40000,GBP

Add the Initial Data for the FollowUpCodes:

  1. Download the distperfmgmt-FollowUpCodes.csv file from the test/data folder in the Explorer.
  2. Open the Data Editor from the storyboard and navigate to the FollowUpCodes entry.
  3. Select the INITIAL DATA tab and choose Import.
  4. Choose the downloaded file (distperfmgmt-FollowUpCodes.csv).
  5. The file is imported to the db/data folder.
  6. To avoid duplicate in the local testing, delete the distperfmgmt-FollowUpCodes.csv file from the test/data folder.

Note that unlike the sample data the initial data will be deployed as part of the application.

dd the Initial Data by importing the downloaded sample data.

So far, you have developed CAP services with sample data. Let’s review them by running the project. To do this, carry out the following steps:

  1. In the top right corner, choose the green play button.
  2. Select the default run configuration, such as "Run DistPerfMgmt".
  3. The project Preview web page opens. The services are available but the web application is not available because you still need to create it. The services are available in the project Preview web page
  4. To review the created services in OData format, choose the "View as code" button
  5. To review the created service in SAP Fiori UI based on the annotations.cds that Joule generated, choose the "View as table" button. For example, when you choose this button for DistributorEvaluations, you’ll see the list page. The list page is displayed when choosing the “View as table”.
  6. To see the object page, select a line. The object page is displayed when selecting a line.

You can play around with this application to get an idea of how you want to enhance these UIs.

Step 3.4: Creating UI Applications

Joule generated the annotations.cds file alongside the data model (schema.cds) and service definitions (service.cds). This file contains UI annotations that define user interface elements and behaviors. When you create a UI application, these annotations are used to automatically configure the UI, streamlining development and ensuring consistency.

Step 3.5: Adding Application Logic

You can add application logic for each service or across all services. The following steps show you how to use Joule to add the application logic for Distributor Evaluation service to calculate the evaluation score based on input values.

Steps

  1. In the storyboard, choose the DistributorEvaluations service.

  2. From the menu, select Add Logic.

    Screenshot of the storyboard showing the two steps outlined previously.

  3. In the popup window, keep the default values.

    Screenshot of the Add Application Logic popup window outlining the default values.

  4. Specify in which phase and event your logic is processed.

    • Phase: On
    • Standard Event: Create, Update

  5. Choose Open Code Editor and select Application Logic..

    Screenshot the dropdown list when you choose Open Code Editor.

  6. Copy and send the following prompt :

    Screenshot of Joule with the following prompt.
    Code Snippet
    123
    /cap-app-logic #srv/code/distributorevaluations-logic.js When Sales Performance, Customer Satisfaction, or Operational Efficiency are entered or updated, calculate and round the Evaluation Score using: (SalesPerformance * 0.5) + (CustomerSatisfaction * 0.3) + (OperationalEfficiency * 0.2).

  7. Choose Accept to use the generated code in the project.

  8. To test the logic, run the project.

  9. Open any object from the list page and edit.

  10. Change the Sales Performance value and choose Save.

Result

The Evaluation Score value is updated according to the calculation logic.

The Evaluation Score value is updated according to the calculation logic.

Step 3.6 Implementing Authorizations

To protect the application against unauthorized access, implement role-based access control within your CAP application. The following are the key concepts that you will use:

ConceptDefinitionRealizationRelationship
User Role

A set of permissions specifying what actions a user can do within an application, for example, read or write.

Defined in the services.cds file using annotations such as @restrict to control access at the service level.

Transformed into scopes and role templates in the xs-security.json file.

Scope

A permission unit in SAP Authorization and Trust Management service that controls access to specific resources or actions in the application.

Automatically generated in the xs-security.json file when running the "Enable MultiTenancy" in the project explorer.

Referenced by Role-templates, serving as the link between CAP-defined user roles and managed permissions in SAP Authorization and Trust Management service.

Role-template

A grouping of one or more scopes into a named role for simplified permission management.

Automatically generated in xs-security.json when running the "Deploy Project".

Represents a logical grouping of Scopes and is referenced by Role-collections.

Role-collection

A collection of role templates assigned to users or user groups in the SAP BTP subaccount, providing specific access rights.

Automatically generated in the mta.yaml when running the "Deploy Project".

Include a role template and is assigned to users, bridging application roles with users in SAP BTP.

This approach ensures precise role-based access control, promoting modularity and reusability.

The defined scopes, role templates, and role collections will be created in the provider subaccount during app deployment and replicated in the subscriber subaccount upon app subscription.

The next video demonstrates how to create the following:

User Role Definitions

The following roles define the specific access levels for each service:

  • DistributorEvaluationsEditor and DistributorEvaluationsViewer for DistributorEvaluations service
  • FollowUpCodesEditor and FollowUpCodesViewer for FollowUpCodes service

The video uses the following code to define users and their roles for local testing.

Code Snippet
123456789101112131415161718192021222324252627282930313233343536373839404142434445
 "auth": { 

        "[development]": { 

          "kind": "mocked", 

          "users": { 

            "manager": { 

              "password": "1234", 

              "roles": [ 

                "DistributorEvaluationsEditor", 

                "FollowUpCodesViewer" 

              ] 

            }, 

            "admin": { 

              "password": "1234", 

              "roles": [ 

                "FollowUpCodesEditor" 

              ] 

            } 

          } 

        }, 

        "[production]": { 

          "kind": "xsuaa" 

        } 

      },

Step 4: Enabling Multitenancy and Adjusting App Router

Develop an Application in SAP Build Code. Step 4: Enable multitenancy and adjust the app router.

To prepare for deploying a multitenant SAP CAP application with an integrated SAP Fiori Elements app, follow these steps:

  1. Enable Multitenancy
  2. Enable External Services in a Multitenant Application
  3. Adjust the app router

1. Enable Multitenancy: Deploying a CAP application as a SaaS (Software as a Service) solution enables multitenant accessibility within a shared infrastructure. This model ensures data isolation, customization, security, and scalability for each tenant while optimizing resource utilization. It is widely used in cloud-based enterprise applications, enabling multiple customers or organizations to share the same application instance while maintaining separate data and configurations.

2. Enable External Services in a Multitenant Application: By default, multitenant applications don't expose destination or other services to subscribers. To enable subscribers to access external services via destination services, add the destination services to the SAP BTP SaaS Provisioning Service dependencies. You can reference Enabling Multitenancy | SAP Help Portal for more information on how to do this.

3. Adjust the app router: Upon enabling multitenancy, a standalone app router is enabled too.

The standalone app router is a Node.js-based, independently deployed component that centralizes routing, authentication, and tenant-specific configurations. It is designed for scalability and flexibility, making it ideal for complex multitenant applications.

Ensure that the app router settings are configured correctly.

This video shows you how to carry out each of these steps.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn