Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Product and Topic Expert
Product and Topic Expert
Welcome to the SAP Developer Community Challenge for the month of September. We will cover full-stack development with SAP Cloud Application Programming Model and SAP Fiori elements: a set of four weekly challenges encompassing front-end/client-facing and server-side/back-end development. 

This month’s challenge is to build a full-stack application based on the domain of tests/exams like in a school set-up. This holistic approach encompasses both backend and frontend development, leveraging the robust capabilities of SAP Cloud Application Programming Model (CAP) on the server-side and SAP Fiori elements with annotations on the client-side. 

Being the final developer challenge for this year, it will require extra effort and time compared to the previous developer challenges. This challenge will require putting into practice some concepts gained from the previous challenges and researching a little more to complete the weekly tasks. It will cover essential facets of full-stack development ranging from database modeling, API development and consumption, user interface implementation and error/exception handling. 

What is full-stack development? 

Full-stack development refers to the practice of building and maintaining both the front-end and back-end components of a software application. Below is a breakdown of the various facets that it entails:  

Front-end Development – creation of user interface (UI) and user experience (UX) components. Technologies such as HTML/XML, CSS/SASS, JavaScript are used. 

Back-end development – implementation of server-side logic, databases and additional components that support the application’s functionality. Technologies such as server-side programming languages, databases and APIs are used.  

What is SAP Fiori Elements? 

“SAP Fiori elements is a framework that comprises the most used floorplan templates and is designed to:  

  1. Speed up development by reducing the amount of frontend code needed to build SAP Fiori apps. 

  2. Drive UX consistency and compliance with the latest SAP Fiori design guidelines. “ - SAP Fiori Elements 


What is SAP Cloud Application Programming Model? 

“SAP CAP is an opinionated, yet open framework of tools, languages, and libraries to efficiently build enterprise-grade services and applications. It guides developers along a golden path of proven best practices, while minimizing boilerplate so they can focus on their domain problems at hand. The framework features a mix of broadly adopted open source and SAP tools and technologies. 

SAP CAP is available in two flavors: Node.js and Java. This makes it very easy to get started with as the setup and skills required are nothing specific to SAP CAP – a lot of developers already know these languages and can start building enterprise grade services and applications right away.” - SAP Developer Challenge SAP CAP 

We will be using Node.js flavor of SAP CAP for this challenge. Feel free to use the Java flavor if you prefer. Here is the documentation on how to get started with CAP Java. 

The Schedule 

Below is a breakdown of the tasks we will cover in four weeks (click on each task to view details): 

Week 1: Project Set-up and Database Modeling 

Week 2:  Back-end Development - API Exposure

Week 3: Front-end Development with SAP Fiori Elements

Week 4: Integration of Back-end and Front-end


How to participate 

Set up your development environment for SAP CAP.  

We recommend using SAP Business Application Studio – setup SAP Business Application Studio for Development  

Other development environments can be used too. For example, VS Code – How to Set Up visual Studio Code for CAP Development. 

After setting up the SAP Business Application Studio for Development, create a “Full Stack Cloud Application” dev space.  

Create Dev Space

Access the dev space by clicking it when the state changes to running. 

Access Dev Space

On the Get Started page, click on New Project from Template

Create new project from template

On the Template Wizard page, select CAP Project generator and click the Start button. 

Select CAP Project from template wizard

Enter the project name (fullstackDevChallenge), select Node.js runtime, check the Basic Sample Files box and click the Finish button. 

Set project details

An application with an initial directory structure is generated. We want to modify the autogenerated file contents to match the application we will be working on progressively over this month. The application namespace, entities, service name and data files are some of the changes we will make. We will perform the following actions to achieve that: 

  1. Replace the code in db/data-model.cds file with the following lines of code: 

using { cuid, managed } from '@sap/cds/common'; 

namespace fullstack_dev_challenge;

entity Tests {

entity Questions {

aspect Answers {

     2. Replace the code in srv/cat-services.cds file with the following lines of code:  
using fullstack_dev_challenge from '../db/data-model';  

service DevChallengeService @(path: '/dev-challenge') {
@odata.draft.enabled: true
entity Tests as projection on fullstack_dev_challenge.Tests;

// TODO: Expose other entities here

The line @odata.draft.enabled: true in the above code is an annotation used to indicate that the Tests entity is enabled for the draft functionality that allows clients to work with draft versions of data before committing changes. This is useful in scenarios where processes such as creation, editing and reviewing of content before it becomes official, need to be supported. Because our application will need data input by end users, it is recommended to use the draft functionality. 

    3. Delete the csv file under db/data directory. 


Open a new terminal (Menu > Terminal > New Terminal) and run the application through the command: cds watch. The results on the terminal should display error messages as in the screenshot below which will be resolved after we complete our first task for this week. 

Terminal output

The development environment set up is done and we can now head over to our first task - Project Set-up and Database Modeling (Week 1). 

Prizes / Badges 

Anyone who successfully does any of the challenges will earn a challenge badge in their SAP profile. 

Happy Coding!