Posted on

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

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

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.
Posted on

5 Steps to Deploy 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. Prepare your Application: Make sure your application is ready to be deployed and meets the requirements for deployment to SAP® BTP.
  2. Connect to SAP® BTP: Connect to the SAP® BTP environment using a Cloud Foundry CLI or a Web-based interface.Login to CF CLI Using:
    cf login -a [API-END] -o [ORG] -s [Space]

    After that, one needs to enter the prompt password in CLI.

  3. Choose a Deployment Method: Decide on a deployment method using the Cloud Foundry CLI or a web-based interface such as the SAP® BTP cockpit. Application Buildpack needs to be also checked if the runtime environment that the Application needs is present. To check available buildpacks use command:
    cf buildpack
    
    

  4. Create a Deployment Descriptor: Create a deployment descriptor, such as a manifest(YAML or YML) file, that specifies the configuration for your application.
  5. Deploy and Monitor App: Use below CLI command below to Push the Application to SAP® BTP
    cf push [App-Name]

Posted on

5 Simple Steps to Setup and Get Started with 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. Create an Account and Login:

    Start by creating SAP® BTP Account if you don’t have one already. Log in to your SAP® Cloud Account, go to the SAP® BTP Console, and choose the SAP® BTP service.

  2. Create Subaccount:

    Subaccount is 1-to-1 associated with Org and Org acts like a Container for Space.

  3. Assign Quota:

    A quota is a set of limits that define the maximum amount of resources (e.g. memory, CPU, storage) consumed by an organization (Org) or a space within an Org.

  4. Create a Space:

    One Subaccount can have many spaces, it is the place where the Applications are deployed.

  5. Create Services or Deploy Apps

    Inside spaces, you have capabilities to Create Services and Deploy Apps.