A Comprehensive, Step-by-Step Guide to Creating and Deploying a Full CAP Application with SAP Fiori UI in SAP Business Application Studio
The Cloud Application Programming (CAP) model provided by SAP is a powerful, opinionated framework designed to streamline the process of building enterprise-grade services and applications that are scalable, extensible, and cloud-ready. In this extensive guide, we will delve deeply into each and every step required to build a full-fledged CAP project from scratch using SAP Business Application Studio (BAS), enhance it with a Fiori UI, and deploy the entire application stack to the SAP Business Technology Platform (SAP BTP) on Cloud Foundry. This guide is structured with elaborate explanations for beginners and intermediate developers alike.
Prerequisites and Initial Setup
Before we begin, ensure you have a valid SAP BTP trial or productive account with appropriate entitlements, particularly for SAP HANA Cloud and SAP Build Work Zone, which are essential for running managed application routers and deploying HTML5 applications. You also need access to SAP Business Application Studio (BAS), which will serve as your cloud-based IDE for this project.
== 1. Creating a Dev Space in SAP Business Application Studio ==
Open your browser and navigate to the SAP Business Application Studio.
On the landing page, click on the “Create Dev Space” button, which will prompt you to select a template.
From the available options, choose “Full-Stack Cloud Application” as it comes pre-configured with essential tools for CAP and Fiori development.
Assign a recognizable name to your dev space, for example, cap-bookshop, to easily identify it later.
Check the box labeled “SAP HANA Tools” to enable support for creating and managing HANA database artifacts.
Click on “Create Dev Space” and wait patiently for the status of the space to change to “RUNNING.”
Once the dev space is up and running, click on it to launch the integrated development environment where you will build your application.
== 2. Provisioning a SAP HANA Cloud Instance ==
Log in to the SAP BTP Cockpit using your credentials.
Navigate into your global account and select the appropriate subaccount.
Under the navigation pane, click on “Service Marketplace” to view the available services.
Search for “SAP HANA Cloud” and click on it when it appears in the search results.
Click on the “Create” button to begin provisioning a new HANA database instance.
Choose the SAP HANA Database (ensure you do not select SAP HANA Cloud Tools).
Sign-In with cloud foundry account and select your space from the dropdownEnter a unique name for the instance (e.g., hana), specify your required configurations, set an admin password.
Administrator Section:
Administrator Username: Auto-filled as DBADMIN.
Administrator Password: Enter a secure password.
Confirm Password: Retype to confirm.
Keep in mind: Passwords for DBADMIN expire every 180 days, so set a reminder to change them before expiry.
Configure SAP HANA Database Settings
In this step, you’ll define your database instance’s technical specifications.
Available Memory Range:
In the trial version, it’s fixed at 16 GB.
Note: Trial accounts come with fixed configurations for memory and storage. For more flexibility, a commercial account is required.
Network & Cloud Connector Configuration
In this step, configure the network access and optionally enable the Cloud Connector if needed.
Allow all IP addresses (Selected in this guide)
Suitable for trial and development — easiest for testing external tools.Click “Create” in final stage
The provisioning process may take a few minutes to complete. Once done, your database will be ready for binding.
(Important) Whenever trying to deploy or bind your service or application ensure HANA Cloud is Started and running
== 3. Creating a New CAP Project Using Terminal Commands ==
Inside your running BAS dev space, open a new terminal window by navigating to the menu: Terminal → New Terminal.
Change the current directory to your desired workspace, typically located at /home/user/projects/:
cd /home/user/projects/
Run the CAP project initialization command:
cds init bookshop
cd bookshop
Your project will now have a structured directory layout containing essential folders such as db for data models, for services, app for UI modules (currently empty), and package.json which manages dependencies.
== 4. Modeling Data and Defining Services ==
4.1 Define the Data Model
Create a new CDS file in the db folder, typically named data-model.cds:
namespace my.bookshop;
entity Books {
key ID : Integer;
title : String;
author: String;
stock : Integer;
}
4.2 Add Sample Data in CSV Format
Create a new CSV file inside the db/data directory named my.bookshop-Books.csv:
ID;title;author;stock
1;The Hobbit;J.R.R. Tolkien;15
2;Harry Potter;J.K. Rowling;30
3;The Alchemist;Paulo Coelho;20
4.3 Define a CAP Service
Inside the srv folder, create a service definition file named catalog-service.cds:
using my.bookshop from ‘../db/data-model’;
service CatalogService {
entity Books as projection on my.bookshop.Books;
}
== 5. Configuring for SAP HANA Deployment ==
CAP defaults to SQLite for local development, but to deploy on SAP BTP, you must configure it to use SAP HANA.
Add HANA configuration for production:
cds add hana –for production
Add hybrid setup (for both dev and prod compatibility):
cds add hana –for hybrid
Generate a Multi-Target Application (MTA) descriptor:
cds add mta
Install all necessary project dependencies:
npm install
== 6. Previewing Your CAP App Locally ==
To see how your app behaves locally, start the development server:
cds watch
The terminal will display a URL where your CAP service is accessible. Click the link to open a preview interface, which features a basic UI generated using Fiori Elements.
== 7. Adding a Managed Application Router ==
Right-click on the mta.yaml file and select Create MTA Module from Template.
Choose the Approuter Configuration template.
Follow the wizard:
Use a Managed Approuter.
Name it samplerouter or another descriptive identifier.
Indicate that a Fiori UI will be added later.
Finish the wizard to generate the approuter configuration, including a xs-security.json file.
== 8. Adding XSUAA for Authentication and Authorization ==
XSUAA is required for deploying CAP apps to Cloud Foundry with authentication support.
cds add xsuaa –for production
npm install
This updates your package.json and adds authentication requirements under the “requires” section.
== 9. Creating a SAP Fiori UI App ==
Right-click mta.yaml → Create MTA Module from Template.
Choose SAP Fiori Application and select List Report Page as the template.
In the Data Source step:
Select Local CAP Project
Pick the bookshop project
Choose the CatalogService (Node.js)
Confirm Books as the main entity.
Set module name (e.g., booksui), title, and namespace.
Enable deployment options and FLP configuration.
For deployment:
Target: Cloud Foundry
Destination: Local CAP Project API
Semantic Object: bookshop
Action: show
Title: Books
Finish the wizard to generate the UI module.
== 10. Deploying the Application to SAP BTP Cloud Foundry ==
10.1 Login to Cloud Foundry
Use the command palette:
CTRL + Shift + P → CF: Login to Cloud Foundry
Provide the API endpoint, credentials, and select the correct organization and space.
10.2 Bind the HANA HDI Container
Open the SAP HANA Projects panel in BAS.
Bind to a HDI Container
Select “+ Create a new service instance”
Click bookshop-db → Bind → Create new service instance.
Name it bookshop-db and enable auto undeploy.
10.3 Build and Deploy the MTA Archive
Run the following in your terminal:
mbt build
cf deploy mta_archives/bookshop_1.0.0.mtar
This creates and deploys your application archive.
== 11. Verifying Deployment and Launching Your Fiori App ==
In the BTP cockpit, go to Services → Instances. You should see instances for the db, approuter, CAP service, and xsuaa.
Go to HTML5 Applications (enabled via SAP Build Work Zone) and find your booksui app.
Launch the app to see the same Fiori UI you previewed locally, now hosted on the cloud.
A Comprehensive, Step-by-Step Guide to Creating and Deploying a Full CAP Application with SAP Fiori UI in SAP Business Application StudioThe Cloud Application Programming (CAP) model provided by SAP is a powerful, opinionated framework designed to streamline the process of building enterprise-grade services and applications that are scalable, extensible, and cloud-ready. In this extensive guide, we will delve deeply into each and every step required to build a full-fledged CAP project from scratch using SAP Business Application Studio (BAS), enhance it with a Fiori UI, and deploy the entire application stack to the SAP Business Technology Platform (SAP BTP) on Cloud Foundry. This guide is structured with elaborate explanations for beginners and intermediate developers alike.Prerequisites and Initial SetupBefore we begin, ensure you have a valid SAP BTP trial or productive account with appropriate entitlements, particularly for SAP HANA Cloud and SAP Build Work Zone, which are essential for running managed application routers and deploying HTML5 applications. You also need access to SAP Business Application Studio (BAS), which will serve as your cloud-based IDE for this project.== 1. Creating a Dev Space in SAP Business Application Studio ==Open your browser and navigate to the SAP Business Application Studio.On the landing page, click on the “Create Dev Space” button, which will prompt you to select a template.From the available options, choose “Full-Stack Cloud Application” as it comes pre-configured with essential tools for CAP and Fiori development.Assign a recognizable name to your dev space, for example, cap-bookshop, to easily identify it later.Check the box labeled “SAP HANA Tools” to enable support for creating and managing HANA database artifacts.Click on “Create Dev Space” and wait patiently for the status of the space to change to “RUNNING.”Once the dev space is up and running, click on it to launch the integrated development environment where you will build your application.== 2. Provisioning a SAP HANA Cloud Instance ==Log in to the SAP BTP Cockpit using your credentials.Navigate into your global account and select the appropriate subaccount.Under the navigation pane, click on “Service Marketplace” to view the available services.Search for “SAP HANA Cloud” and click on it when it appears in the search results.Click on the “Create” button to begin provisioning a new HANA database instance.Choose the SAP HANA Database (ensure you do not select SAP HANA Cloud Tools).Sign-In with cloud foundry account and select your space from the dropdownEnter a unique name for the instance (e.g., hana), specify your required configurations, set an admin password.Administrator Section:Administrator Username: Auto-filled as DBADMIN.Administrator Password: Enter a secure password.Confirm Password: Retype to confirm.Keep in mind: Passwords for DBADMIN expire every 180 days, so set a reminder to change them before expiry.Configure SAP HANA Database SettingsIn this step, you’ll define your database instance’s technical specifications. Available Memory Range:In the trial version, it’s fixed at 16 GB.Note: Trial accounts come with fixed configurations for memory and storage. For more flexibility, a commercial account is required.Network & Cloud Connector ConfigurationIn this step, configure the network access and optionally enable the Cloud Connector if needed.Allow all IP addresses (Selected in this guide)Suitable for trial and development — easiest for testing external tools.Click “Create” in final stageThe provisioning process may take a few minutes to complete. Once done, your database will be ready for binding.(Important) Whenever trying to deploy or bind your service or application ensure HANA Cloud is Started and running== 3. Creating a New CAP Project Using Terminal Commands ==Inside your running BAS dev space, open a new terminal window by navigating to the menu: Terminal → New Terminal.Change the current directory to your desired workspace, typically located at /home/user/projects/:cd /home/user/projects/Run the CAP project initialization command:cds init bookshop
cd bookshop
Your project will now have a structured directory layout containing essential folders such as db for data models, for services, app for UI modules (currently empty), and package.json which manages dependencies.== 4. Modeling Data and Defining Services ==4.1 Define the Data ModelCreate a new CDS file in the db folder, typically named data-model.cds:namespace my.bookshop;
entity Books {
key ID : Integer;
title : String;
author: String;
stock : Integer;
}4.2 Add Sample Data in CSV FormatCreate a new CSV file inside the db/data directory named my.bookshop-Books.csv:ID;title;author;stock
1;The Hobbit;J.R.R. Tolkien;15
2;Harry Potter;J.K. Rowling;30
3;The Alchemist;Paulo Coelho;204.3 Define a CAP ServiceInside the srv folder, create a service definition file named catalog-service.cds:using my.bookshop from ‘../db/data-model’;
service CatalogService {
entity Books as projection on my.bookshop.Books;
}== 5. Configuring for SAP HANA Deployment ==CAP defaults to SQLite for local development, but to deploy on SAP BTP, you must configure it to use SAP HANA.Add HANA configuration for production:cds add hana –for productionAdd hybrid setup (for both dev and prod compatibility):cds add hana –for hybridGenerate a Multi-Target Application (MTA) descriptor:cds add mtaInstall all necessary project dependencies:npm install== 6. Previewing Your CAP App Locally ==To see how your app behaves locally, start the development server:cds watchThe terminal will display a URL where your CAP service is accessible. Click the link to open a preview interface, which features a basic UI generated using Fiori Elements.== 7. Adding a Managed Application Router ==Right-click on the mta.yaml file and select Create MTA Module from Template.Choose the Approuter Configuration template.Follow the wizard:Use a Managed Approuter.Name it samplerouter or another descriptive identifier.Indicate that a Fiori UI will be added later.Finish the wizard to generate the approuter configuration, including a xs-security.json file.== 8. Adding XSUAA for Authentication and Authorization ==XSUAA is required for deploying CAP apps to Cloud Foundry with authentication support.cds add xsuaa –for production
npm installThis updates your package.json and adds authentication requirements under the “requires” section.== 9. Creating a SAP Fiori UI App ==Right-click mta.yaml → Create MTA Module from Template.Choose SAP Fiori Application and select List Report Page as the template.In the Data Source step:Select Local CAP ProjectPick the bookshop projectChoose the CatalogService (Node.js)Confirm Books as the main entity.Set module name (e.g., booksui), title, and namespace.Enable deployment options and FLP configuration.For deployment:Target: Cloud Foundry Destination: Local CAP Project APISemantic Object: bookshopAction: showTitle: BooksFinish the wizard to generate the UI module.== 10. Deploying the Application to SAP BTP Cloud Foundry ==10.1 Login to Cloud FoundryUse the command palette:CTRL + Shift + P → CF: Login to Cloud FoundryProvide the API endpoint, credentials, and select the correct organization and space.10.2 Bind the HANA HDI ContainerOpen the SAP HANA Projects panel in BAS. Bind to a HDI Container Select “+ Create a new service instance” Click bookshop-db → Bind → Create new service instance.Name it bookshop-db and enable auto undeploy.10.3 Build and Deploy the MTA Archive Run the following in your terminal:mbt build
cf deploy mta_archives/bookshop_1.0.0.mtarThis creates and deploys your application archive.== 11. Verifying Deployment and Launching Your Fiori App ==In the BTP cockpit, go to Services → Instances. You should see instances for the db, approuter, CAP service, and xsuaa.Go to HTML5 Applications (enabled via SAP Build Work Zone) and find your booksui app.Launch the app to see the same Fiori UI you previewed locally, now hosted on the cloud. Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
