SAP BTP CAPM Application Development and Deployment – Part 5

In this article, we’ll develop a CAP application using the low code & no code visual tool available in BAS.
So, let’s start…

DEVELOPING CAP APPLICATION USING VISUAL TOOLS

Step 1: Open SAP Business Application Studio in the Trial Account

Login to your SAP Free Trial account and open the SAP Business Application Studio

It took me to the SAP Build screen, because I have subscribed to the SAP Build Code in my subaccount.

If you haven’t subscribed to the SAP Build Code, you will find the below screen to continue in BAS.

Before we proceed with our tutorial, we would like to give you an opportunity to join our ZAPYard’s learning community where we have more than 35 groups and more than 1850 real SAP Consultants interacting with each other daily. Only SAP topics and not BS. Else, they will be banned from the community without warning. 👇👇👇👇

If you want to be part of ZAPYard’s Discussion Community, please feel free to check the below Link. We Ask, Answer, Help and Learn Together. There are more than 35 groups from different topics like Generative AI, SAP Joule, CAPM, BTP, RAP, BPT, Fiori, iRPA, CAI, CPI, PI/PO, ABAP on HANA, SAPUI5, SAP Build, SAP Adobe Forms, ChatBots, SAC etc. Join any group of your interest and interact with our Community.

Join ZAPYard’s WhatsApp Community – Ask, Answer, Propose & Defend SAP Topics

Now from the SAP Build App page, we can navigate to the BAS Dev Space section by click on the Product Switch icon.

Now we have to create a dev space.

Enter the space name, select Full-stack Application Using Productivity Tools, and click on Create.

Once you have created the Dev Space it will take a few seconds to start, you will find the below screen when your Dev Space is in Running state.

Click to go inside the Dev Space.

Step 2: Create a new Full-stack Project

Click on the Create Project

Note: If you want to change the theme to different color, you can click on the Settings button.

Select your favorite theme.

So, let’s continue to create the project.

Under the Project from Template, select the Full-stack Project.

Click on Start.

Fill the Project Details like below. Click on Finish.

It will take a few seconds to generate the project.
And it will look like below:

Step 3: Create a Data Model

Click on “Data models” and choose + icon and click on “create“.

Click on “entity” and click on “show details“.

Change entity name to “School“.

Change fields of this entity as below:

Again, follow the above steps to create entity for Student.

Now we have to create a relationship between the School & Student entities.
Let’s drag the relationship arrow from the School to the Student, you will find a Pop-up opens, pass below values.

Select the target entity as Student. Click on Create.

If you want to check what got created in folder. You can click on “Explorer” and open file schema.cds in db folder.

Step 4: Create a Service

Go to “storyboard” and click on “service” and “add service entity“

Below screen appears.

Select capm.studentdetails.School from the dropdown.

Click on Save Icon.

Repeat the steps to create service entity for Student.
The storyboard will look like this:

Check service.cds file

Step 5: Create an UI

Go to the Storyboard and click on + icon on UI applications.

Pass the display name, application name and description as “School“, Click Next

Choose “Template based” UI application type. Choose “List Report” page.

Choose main entity as “School” and navigation entity as “students“. Click Finish.

Finally, your storyboard will be as below:

Click on School UI and click on “Open in page map“.

Click on “Configure page” of the List Report.

Add field for filter

Add a new filter: school_id

Go back to “Page map” & Click “configure page” for the object page.
Click on Add Section.
Then click on Add Table Selection.

Expand the Student Section, go to the Toolbar.
Now click on Add Columns.
Select Add Basics Column

Click on Add.
Go back to storyboard

Step 6: Test the application

Click on “Debug & Run” button.

You can find the UI application.

Now, let’s add some sample data.
Go to the Storyboard, and add sample data in the School data model

Now run the app to display the data.

In the next article we will generate the same application using SAP Build Code, Joule. We’ll compare the effort required to develop a CAP application using the visual tool available in BAS versus building the same application using Joule. It promises to be an interesting exploration of Joule’s effectiveness in code reduction.” 🚀
Happy learning!

If you found this article helpful, we’d love to hear from you! Share your thoughts, questions, or experiences in the comments below—your feedback is always welcome and helps us craft even more valuable content. Stay tuned for the next part in the series, where we’ll continue exploring essential tools and techniques to level up your SAP development skills.

Please note: This CAPM Series is the learning material from our ZAPcademy.com Instructor Led Live Online Training on the topic SAP BTP CAPM – Basic to Advanced. You may avail the recordings, notes and assignments of this training from here.

Please follow our LinkedIn Page, LinkedIn Group , Facebook Page, Facebook Group, Twitter & Instagram.

Do not forget to SUBSCRIBE to our YouTube Channel for Free Courses and Unconventional Interesting Videos.

Do join ZAPYard’s Learning Community.

• SAP BTP CAPM Application Development and Deployment – Part 1
• SAP BTP CAPM Application Development and Deployment – Part 2
• SAP BTP CAPM Application Development and Deployment – Part 3
• SAP BTP CAPM Application Development and Deployment – Part 4