Developing an Application Using Joule

Objective

After completing this lesson, you will be able to use Joule, the AI co-pilot, to develop an application.

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 course 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:

Download the distperfmgmt-FollowUpCodes.csv file from the test/data folder in the Explorer.
Open the Data Editor from the storyboard and navigate to the FollowUpCodes entry.
Select the INITIAL DATA tab and choose Import.
Choose the downloaded file (distperfmgmt-FollowUpCodes.csv).
The file is imported to the db/data folder.
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:

In the top right corner, choose the green play button.
Select the default run configuration, such as "Run DistPerfMgmt".
The project Preview web page opens. The services are available but the web application is not available because you still need to create it.
To review the created services in OData format, choose the "View as code" button
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.
To see the object page, select 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

In the storyboard, choose the DistributorEvaluations service.
From the menu, select Add Logic.
In the popup window, keep the default values.
Specify in which phase and event your logic is processed.
- Phase: On
- Standard Event: Create, Update
Choose Open Code Editor and select Application Logic..

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).

Choose Accept to use the generated code in the project.
To test the logic, run the project.
Open any object from the list page and edit.
Change the Sales Performance value and choose Save.

Result

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:

Concept	Definition	Realization	Relationship
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" 

        } 

      },

Summary

Joule streamlines full-stack app development by generating data models, services, and UI elements using AI-driven prompts.
Core Data Services (CDS) models define your application's data structure and can be enhanced for validation and calculated fields.
External services, such as SAP Business One, can be integrated and associated with your own data models for richer functionality.
Sample data and initial data help you test and validate your application, with Joule assisting in data generation and refinement.
Role-based access control is implemented through user roles, scopes, and role collections, ensuring secure and modular application access.

Next lesson