Posted on by

What is SAP® Build Suite, SAP® Build Code and Joule AI App Development in SAP® BTP?

Executive Summary:

SAP® Build Code = SAP® BAS + Joule AI Chat to build App Boiler Plate + Storyboard + Page Map + Graphical No-Code Low-Code Development Features

In the rapidly evolving landscape of enterprise application development, SAP® has introduced a game-changing combination: SAP® Business Application Studio (BAS) powered by Joule AI. This powerful integration is fundamentally transforming how developers and business users create, customize, and deploy applications on the SAP® Business Technology Platform (BTP).

The Evolution of SAP® Development

Traditional vs. AI-Powered Development

The shift from traditional development methods to AI-assisted creation represents a paradigm shift in how we approach application building:

The Old Way:

  • Required significant technical knowledge to create, extend, and debug applications
  • Relied on wizard-based navigation for boilerplate generation
  • Demanded deep understanding of SAP® architectures and coding patterns
  • Time-consuming setup and configuration processes

The New Way with Joule:

  • Minimal to no technical knowledge required for app creation and extension
  • Chat-like interface for AI-powered generation
  • Intelligent boilerplate creation with full-stack capabilities
  • Streamlined, intuitive development experience

Understanding the SAP® Build Suite Ecosystem

SAP® BAS with Joule operates within the broader SAP® Build Suite, creating a comprehensive development ecosystem on SAP® BTP:

SAP® Build Suite Components Includes

  1. SAP® Build Apps – Low-code UI development platform
  2. SAP® Build Process Automation – Workflow creation and RPA capabilities
  3. SAP® Build Work Zone – Unified launchpad experience
  4. SAP® Business Application Studio (BAS) – The core development environment enhanced with AI which is called now SAP® Build Code

How It All Works Together

The architecture creates a seamless flow:

  1. AI Generation: Joule generates full-stack boilerplate applications within BAS
  2. Backend Services: Create and manage backend services efficiently
  3. Service Consumption: Connect UI applications to backend services
  4. Deployment: Deploy applications directly to SAP® BTP
  5. Integration: Applications can be consumed through Work Zone
  6. Automation: Workflows enhanced with AI add-ons through Process Automation

Getting Started: Three Practical Steps

Step 1: Setup with Booster

The journey begins with proper environment setup using SAP® BTP Booster. This automated configuration tool prepares your SAP® BTP environment with all necessary Services, Roles, Auth and Entitlements setup, eliminating the complexity traditionally associated with platform setup.

Step 2: Create Your New Project

This is where Joule’s AI capabilities truly shine. Instead of navigating through complex wizards or writing boilerplate code from scratch, you can:

  • Describe your application requirements in natural language
  • Let Joule generate the full application structure
  • Receive intelligent suggestions for data models, UI patterns, and service integrations
  • Start with production-ready code that follows SAP® best practices

Step 3: Customization with Storyboard, Page Map and Graphical Modeller

The Storyboard, Page Map and Graphical Modeller feature allows you to:

  • Visualize your application architecture
  • Make customizations through the UI and no-code or low-code exposure
  • Extend functionality without deep technical knowledge

Storyboard (as shown in above image) will be first screen which will appear after your app is created via Joule AI, it will provide you an overview of the application. You can navigate further to Page Map which shows how different UI screens are linked. There are various graphical tools, such as the graphical schema tool and UI Annotation tool etc. to change Schema and UI respectively without Coding.

Why This Matters: The Business Impact

Low Code Development:

By reducing the technical barrier to entry, SAP® BAS with Joule enables:

  • Citizen developers to create meaningful applications
  • Business analysts to prototype solutions quickly
  • Professional developers to focus on complex business logic rather than boilerplate code
  • Organizations to accelerate their digital transformation initiatives

Accelerating Time-to-Value

The AI-powered approach dramatically reduces:

  • Initial setup time from days to hours
  • Development cycles from weeks to days
  • Learning curves for new team members
  • Maintenance overhead through standardized, well-structured code

Enhancing Quality and Consistency

Joule’s AI generation ensures:

  • Adherence to SAP® best practices
  • Consistent code patterns across projects
  • Built-in security and performance optimizations
  • Reduced technical debt from the outset

The Path Forward

The integration of AI through Joule into SAP® BAS represents more than just a feature upgrade—it’s a fundamental reimagining of how enterprise applications are created. By combining the power of conversational AI with the robustness of SAP®’s development platform, organizations can:

  • Bridge the skills gap in SAP® development
  • Innovate faster with rapid prototyping and iteration
  • Scale development capacity without proportionally scaling team size
  • Maintain quality while increasing development velocity

Summary: A New Era of SAP® Development

The journey with SAP® BAS and Joule follows a clear path:

  1. Setup: Quick environment preparation with automated boosters
  2. Getting Started: Hands-on development with AI assistance
  3. Wrap Up: Production-ready applications with minimal or no development

As organizations continue to demand faster digital transformation and more agile development processes, tools like SAP® BAS with Joule aren’t just nice to have—they’re becoming essential. The combination of low-code/no-code capabilities, AI-powered generation, and professional development tools creates a platform that can serve everyone from business users to expert developers.

The future of SAP® development is here, and it’s more accessible, faster, and more intelligent than ever before.

Ready to accelerate your SAP® development? Explore SAP® Business Application Studio with Joule and experience the next generation of enterprise application creation.

Posted on by

SAP® Fiori® Elements with SAP® CAPM App

 

Learn to Create and Use SAP® CAPM Apps with SAP® BAS!

Hey there, SAP® Tech Masterminds! We’re thrilled to bring you a fun and easy two-part blog series. We’ll guide you through creating and using SAP® CAPM Services in SAP® BAS for your SAP® Fiori® Element Apps.
Whether you’re new to coding or a seasoned expert, these blogs are for you. Let’s get started!

 

Part 1: SAP® Fiori® Elements with SAP® CAPM App – Sample SAP® CAPM App

Imagine you, a cozy drink, and your laptop. Now, follow the simple steps to create your simple SAP® CAPM app. In this first blog, you’ll learn:

  • Step-by-step instructions to build your SAP® CAPM App and its oData V4 services.
  • You can perform these steps in SAP® BAS IDE.

 

Part 2: SAP® Fiori® Elements with SAP® CAPM App – SAP® Fiori® Element App

Now that you’ve built your SAP® CAPM app, it’s time to put it to work. In the second part of our series, we’ll show you how to:

  • Connect your CAPM services to SAP® Fiori® Elements apps.
  • Turn your services into awesome, user-friendly apps using SAP® Fiori® Elements.
  • Follow simple, clear instructions to make everything work smoothly.

So grab your favorite snack, get comfy, and join us on this coding adventure. Stay tuned for the first part – it’s going to be amazing!

 

 

Also, to Learn Fiori® Elements using SAP® CAPM and SAP® RAP you can enroll in the course Learn SAP® Fiori® Elements where we will learn in a Step-by-Step Fashion the development of Apps Using Fiori® Elements.

For the best offers on the course check the Offer Page.

 

 

Posted on by

SAP® Fiori® Elements with SAP® CAPM App – SAP® Fiori® Element App

In this Blog, you will see how to use the CAPM App Service created in the last section and create a SAP® Fiori® Elements App.

 

 

 

Table of Contents:

Start the Series from: SAP® Fiori® Elements with SAP® CAPM App

Go to last the Blog from: Sample SAP® CAPM App Setup

Go to the Course from: Learn SAP® Fiori® Elements from

 

1. Create Fiori® Element App

Create a Fiori® Element App from the Template in SAP® BAS using the below steps:

  • Select List Report Template Using File > New Project From Template [Screenshot below]
  • In the Data Source Screen, select Local CAP Project > Project > Catalog service [Screenshot below]
  • In the next screen select the Products Entity
  • In the next screen keep everything default and select Finish
  • The SAPUI5 App will be created inside the CAPM project app folder

 

Selection of List Report Template

 

Service Selection SAP® CAPM

 

2. Start Script

After that you will find the script to run the project from the root with the command:

npm run [start-or-watch]

 

 

3. Add Line Item

Now add LineItem annotations in the Service:

annotate CatalogService.Products with @(

   UI: {
      LineItem: [
{ Value: productName },
{ Value: category },
{ Value: price }
      ] 
    ]
   }
);

This will show 3 columns productName, category and price.

 

Add Line Item Annotations to the Service

Output of LineItems Annotations

Similarly, now we can add more Annotations using the codes below.

4. HeaderInfo:

Now in the same service file, we can change the default Label of what Kind of Items is shown from Product or Products in the Header columns.

HeaderInfo: {

            TypeName: 'Item',

            TypeNamePlural: 'Items',

        }

5. Header Details

Now to add navigation, we can show the image, title and description for the below code:

    HeaderInfo: {

            TypeName: 'Item',

            TypeNamePlural: 'Items',

      TypeImageUrl: image,

            Title: {

                $Type: 'UI.DataField',

                Value: productName,

                Label: 'Product'
            },

            Description: {

                $Type: 'UI.DataField',

                Value: price

            }

          }

6. FieldGroup

We can also Group together different fields using FieldGroup and show them together:

FieldGroup #Overview: {

          $Type : 'UI.FieldGroupType',

          Label: 'Overview',

          Data: [

            {

            $Type: 'UI.DataField',

            Value: productName

            },

            {

            $Type: 'UI.DataField',

            Value: price

            }

          ]

        }

7. Facets Using FieldGroup

Also, we can add many FieldGroup using Facets to the Screen with different tabs with the below codes:

Facets: [
                     {

                          $Type : 'UI.ReferenceFacet',

                          Label:'Overview',

                         Target: '@UI.FieldGroup#Overview'

                        },

                        {

                          $Type : 'UI.ReferenceFacet',

                          Label:'Tech Details',

                         Target: '@UI.FieldGroup#TechDetail'

                        }

         ]

Tabs will be created and different Groups will have information on the Fields associated with the Group.

8. Nesting of Facets

 

Now we can also use Collection Facets to Nest multiple Facets Together.

 

Here you will see that the collection doesn’t create tabs but groups them together.

 

Note: It is mandatory to define an ID for collection facets but optional for reference facets.

           Facets: [
                        {

                          $Type : 'UI.CollectionFacet',

                          ID    : 'FacetIdentifier1',

                          Label:'Read Overview',

                              Facets  : [

                                {

                                  $Type : 'UI.ReferenceFacet',

                                  Label:'Overview',

                                  Target: '@UI.FieldGroup#Overview'

                                },

                                {

                                $Type : 'UI.ReferenceFacet',

                                Label:'Tech Details',

                                Target: '@UI.FieldGroup#TechDetail'

                              }

                          ]

                        }

              ]

Also, you can make two collection Facets and have details within each other

Facets: [
                     {

                          $Type : 'UI.CollectionFacet',

                          ID    : 'FacetIdentifier1',

                          Label:'Read Overview',

                              Facets  : [

                                {

                                  $Type : 'UI.ReferenceFacet',

                                  Label:'Overview',

                                  Target: '@UI.FieldGroup#Overview'

                                }

                          ]

                        },

                        {

                          $Type : 'UI.CollectionFacet',

                          ID    : 'FacetIdentifier2',

                          Label:'Read Overview',

                              Facets  : [

                                {

                                $Type : 'UI.ReferenceFacet',

                                Label:'Tech Details',

                                Target: '@UI.FieldGroup#TechDetail'

                              }

                          ]

                        }

              ]

The final result will look similar to the screenshot below in the Navigation Details Screen. Based on the Nesting of Navigation the Final Result will differ.

Fiori® Elements Navigation Screen

 

Good practice is:

1. Not do the nesting more than 3 levels.

2. Not referencing more than 1 Reference Facets per collection or you will face rendering issues.

 

 

 

Posted on by

SAP® Fiori® Elements with SAP® CAPM App – Sample SAP® CAPM App Setup

In this blog, you will see how to set up the setup SAP® CAPM App in SAP® BAS:

 

Table of Contents:

Start the Series from: SAP® Fiori® Elements with SAP® CAPM App

Go to the next Blog from: SAP® Fiori® Elements with SAP® CAPM App – Fiori® Element App

Go to the Course from: Learn SAP® Fiori® Elements from

 

 

1. Create a SAP® CAPM Project to generate sample files and structure. In the BAS CLI you can write:

cds init sample-project

Some of the files created in the project like the data CSV file and the app folder will be added in the coming steps:

SAP® CAPM Project creation

 

2. Go to the db folder and create a file data-models.cds to add the schema:

namespace sampleProject;

entity Products {
  key ID: UUID;
  productName: String;
  category : String;
  price : Decimal;
  description : String; // New field for product description
  image : String; // New field for image URL
}

3. Add sample data values inside the data folder in a CSV file and name it project-Products.csv:

ID;productName;category;price;description;image
"e3b0c442-98fc-1c14-9fb0-c4e9b3c77c63";"Laptop";"Electronics";999.99;"High-performance laptop for professionals";"https://i.ibb.co/WWfNSgp/openui5.png"
"fe3a9ec0-93d6-2f3b-ad7c-c8f330b7606c";"Smartphone";"Electronics";599.99;"Latest model with advanced features";"https://i.ibb.co/WWfNSgp/openui5.png"
"b4e9b3c7-7c63-4e3b-0c44-29fc1c149fb0";"Coffee Maker";"Home Appliances";49.99;"Brews perfect coffee every time";"https://i.ibb.co/WWfNSgp/openui5.png"

SAP® CAPM Data Model

 

 

4. Create a basic service inside the srv folder in the file catalog-service.cds :

using sampleProject from '../db/data-model';
service CatalogService {
entity Products as projection on sampleProject.Products;
}

 

5. We have created a SAP® CAPM App to explore which can be used in a Fiori® Element Template, so let’s start making that.
Note, that this SAP® CAPM App will be used in the Fiori® Element Template, so we need to keep the App running and create a new Project From Template which we will do next.

To run the App we can use the Start Script of the App from the package.json file:

npm run start

or

npm run [watch-project-name]

Running SAP® CAPM App

Posted on by

5 Steps to Bind Service to Application in SAP® BTP

SAP® BTP Blogs Series Covers:

  1. 5 Simple Steps to Setup and Get Started with SAP® BTP
  2. 5 Steps to Deploy Application in SAP® BTP
  3. 5 Steps to Bind Service to Application in SAP® BTP

This blog is a part of the End-to-End SAP® BTP and Cloud Bundle

 

  1. Choose a Service:Choose a service from the SAP® BTP marketplace that you want to bind to your application.For example a Database(DB) service like PostgreSQL.

  2. Create a Service Instance:Create a service instance of the chosen service in your SAP® BTP space. With CF CLI we can use the command 
    cf create-service [service-name] trial [name-given-to-instance]

  3. Bind the Service:Bind the service Instance to your Application, by using the Cloud Foundry CLI or the SAP® BTP cockpit to bind the service instance manually. Also, service-binding can be done by passing service information with the Manifest.YML file.

  4. VCAP Variable:VCAP is an environment variable in a JSON data format that is provided to an Application when it is hosted in Cloud Foundry (SAP® BTP), this variable act as a way to share the information that the application needs to connect to the service instance.

  5. Use the ServiceOnce the Service is Bound you will get the required credentials to connect to the service via VCAP environment variable. After the connection to the service, you can use the service instance. Based on the service if it is a Database, server, messaging queue, etc. the operation related to connecting and usage will be different, which needs to be handled accordingly in the application.