How to create CAP application using SAP Business Application Studio

0
1999

SAP Business Application Studio (BAS) is the next-generation IDE for building business applications.

It is a modular development environment, built on ‘Eclipse Theia’, an open-source IDE that embraces the VS Code experience. To know about BAS, click here.

In this blog post, we will create a CAP application using SAP Business Application Studio.

Lets go-over the development steps of CAP application.

🛠 Environment Setup

BAS introduces the concept of dev spaces. A dev space is a preconfigured environment with the required tools and extensions tailored for a specific business scenario. In our case, we’ll need to create a dev space of type “SAP Cloud Business Application”.

On the BAS home page, click on Create Dev Space to create CAP dev space.

SAP Cloud Business Application Dev Space

Also Read | Everything about Dev Space in SAP Business Application Studio

Create a CAP application

You can create a new application using New project from template wizard. SAP Business Application Studio different templates to create applications, these templates are based on Yeoman generators.

Follow below step wizard to create Cloud Application Model.

Create a CAP Project.

On Welcome page, click on “Start From template” alternatively you can navigate File → New Project from Template.Create a CAP Project in SAP Business Application Studio Step1

Select Template and Target Location

First, choose the target folder path and then select “CAP Project” template. Click Start.Create a CAP Project in SAP Business Application Studio Step2

CAP Project Details

Provide project name and select runtime as “Node.js“. You can add additional features to the CAP project such as CI/CD Pipeline, MTA based SCP Deployment, and also sample content to your project. Click Finish.Create a CAP Project in SAP Business Application Studio Step3

Project Structure

You can see the project structure is created with the following folders for 
srv/ – Service definitions with implementation
db/ – Domain models and database-related content
“app/” – UI content
package.json” – Project descriptor
mta.yaml” – Cloud Foundry Deployment file Create a CAP Project in SAP Business Application Studio Step4

Service definitions

In srv/ folder a sample file is created as in step-4 we select to add sample content to the project.Create a CAP Project in SAP Business Application Studio Step5

Data models

Similarly, in db/ folder, a sample data model file is also created.Create a CAP Project in SAP Business Application Studio Step6

Develop the application

Now that we have CDS data models and service definitions ready, let’s create UI for our application using the Fiori Elements template.

1. Open CAP Project Explorer, choose the service and then right-click. Select Create UI.

Create a UI for CAP Project in SAP Business Application Studio Step1

2. Select SAP Fiori elements application generator. Click Start.

Create a UI for CAP Project in SAP Business Application Studio Step2

3. Data source and Service selection fields are filled automatically.

Create a UI for CAP Project in SAP Business Application Studio Step3

4. Choose the entity from the drop-down.

Create a UI for CAP Project in SAP Business Application Studio Step4

5. Finally provide the Project attributes.

Create a UI for CAP Project in SAP Business Application Studio Step5

Add UI Annotations

6. Navigate to the “app/” folder and add UI annotations in the annotations.cds” file like below.

Create a UI for CAP Project in SAP Business Application Studio Step6

Test and Run CAP application

7. Navigate to package.json file and change the sqlite version and then run the following command.

npm install
Test and Run CAP Project in SAP Business Application Studio Step1

8. Finally run the CAP application using the below command in the terminal.

cds serve
Test and Run CAP Project in SAP Business Application Studio Step2

9. The application is running at port – 4040

Test and Run CAP Project in SAP Business Application Studio Step3

10. Select index.html file to open the CAP UI application.

Test and Run CAP Project in SAP Business Application Studio Step4

Conclusion

Congrats!! you have successfully learnt the steps to create CAP application using SAP Business Application Studio.