Skip to Content
Technical Articles
Author's profile photo Aryan Raj Sinha

Making CAP Application Development Easier and Faster with the Help of Storyboard in SAP Business Application Studio


Exploring new tools that improve the development process is always exciting for developers. Recently, I came across something called the ‘Storyboard‘ in SAP Business Application Studio (BAS) while learning about creating Full-Stack Apps using SAP BAS’s High Productivity Tools.

The Storyboard visually represents an app’s core components—like data models, services, and UI. This makes it easier to understand how the app is structured.

Let us dive into why the Storyboard is valuable and how it can change how you develop apps, saving you a lot of time.

When you are creating apps using SAP’s Cloud Application Programming Model (CAP), there are certain steps everyone follows. You define things like entities (the various parts of your app), fields (the details in those parts), and how they connect. Then you make these parts available as services. But turning these ideas into actual code and running it can take a while.



This is where the Storyboard comes in, with its Graphic Modellers. They make the entire process much simpler. The Storyboard is like a visual center where you connect all the pieces together, without having to write a lot of code.


The Storyboard


You can also create a user-friendly interface (UI) using the ‘UI Applications’ tab. Just pick what you want, give it a name, and you are set with a page that lets users do things like adding or editing items. This UI automatically does all the basic actions you would expect. When you are testing your app on your own computer, it uses a local database. But when you are ready to show the app to the world, it links up to your HANA DB automatically (if you have an instance of it running in your BTP account).

Get Started with Storyboard

Starting with the Storyboard is as easy as doing the following things:

Open BAS and choose ‘Full-Stack App Using High Productivity Tools of SAP Business Application Studio

Create your space and start a new project as instructed.

Once your project is set up, you will see the Storyboard—a dashboard showing everything about your app.

The Landing Page, Storyboard

Features of Storyboard

This is how I went by creating a basic app (For proper guides, you can refer to this tutorial)

The Storyboard has a lot of features that help us create a basic full-stack application with UI and backend with services. We will look into the main features and what they can do for you.


When we are coding a new app from scratch, the first thing we do is define entities to create our backend. We can easily do this with the help of the graphical modeler that helps us visualize how our data models look and how they are connected to each other.


The Graphical Modeller


Click on the tune icon to change the config and add fields


With the graphical modeler, we can establish connections between entities and specify the nature of their relationships (whether they are to-one or to-many). This provides us with a comprehensive understanding of our schemas, and allows us to develop intricate relationships and entities without any need for coding.

Create relationship by clicking on relation icon


Define relationship configurations



In order to use the Data Models we created, we must expose them as services. Fortunately, Storyboard allows us to do this for each entity defined in the graphical modeler. This not only reduces the number of clicks needed, but also streamlines the entire process.


Click on the entity you want the service of


You can see the service built


Adding Sample Data

No need to stress about including sample data. The Storyboard can handle this task effortlessly, eliminating the need to tinker with CSV files or remember specific column names required for the application. The Storyboard provides a table for each entity requiring sample data, where you can input data directly, similar to an excel sheet. This simplifies the entire process and makes life much easier.

Add Sample Data


Add data in a tabular format without having to handle CSV

Make it Full-Stack: Add a User Interface

Enhance the appearance of your application with a personalized user interface. Head to the ‘UI Applications’ tab for this purpose. It generates a UI for you based on the choices you make. If you select the List Report Template, it will create a list with sample data, and clicking on any object will open the Object page. You have other options to choose from, such as Worklist. Once you choose the primary Entity for your UI, the UI will be created.

Once the UI is done creating, the Page Map will open, where you can customize configurations and column names. You may also add annotations, such as text-only for a specific field value, and also convert the field to a value help if required.

Storyboard simplifies the entire process and makes it much more straightforward. With a basic idea, you can create an app with a UI in a matter of minutes. Even if you are skilled in coding, this process will save you a considerable amount of time.

The best aspect of Storyboard is that it can create a basic app for you, and you can still add your custom code on top of it to add more complexity and scale the application.

You can tweak everything in your UI using the Page Map (Comes after installing dependencies when your UI Application is finished generating). Change List Pages and Object Pages easily.

Click on the pencil icon for List Report or Object Page to configure


Add User Roles

With User Roles, you have the ability to control the actions that each individual can take. This feature is incredibly useful as it allows you to tailor roles with varying levels of access, including ‘No Access’, ‘Read’, or ‘Full’ Access. These roles are applied once the application has been deployed and are defined using XSUAA in your code.

Surprisingly, setting up these roles is as simple as selecting the desired level of access for each user. Additionally, you can also determine which specific services each user has access to, providing basic customization options.

You can select User Roles from here


Configure User Roles here


Connecting to External Resources

The Storyboard is not just for your own application environment. You can also create extension applications with Storyboard. We can extend business processes from SAP S/4 HANA or SuccessFactors and consume their data using their APIs. The Storyboard makes this process quite easy to handle. You can learn more about this from here: Consuming External Service

You can select any of these external entities through this


Handling Run Configurations

Now you might be wondering how you might be able to access oData configurations, Authentication settings, Database Settings, etc. You can access these through Run Configurations. You can check out more about it here: The fastest and easiest way to run full-stack applications in SAP Business Application Studio

Create Run Configurations


Preview and Test Your App

When you are done building, you can see how your app works by hitting the ‘Play‘ button.

Click the Green Play button to preview the app


Deploy your App

When you are ready, you can deploy it to Cloud Foundry using the ‘Deploy‘ button on the Project Explorer Option in the Sidebar. You can do so by clicking the three dots beside the project name. Before deploying make sure you have an instance of ‘HANA Cloud’ in your BTP Account, as it needs to connect to a HANA DB instance.

Go to the Sidebar, click on the Project Explorer, and click Deploy to deploy to Cloud Foundry



In short, the Storyboard lets you create a basic full-stack app without getting into coding, thanks to its graphical tools. But if you want to add more complex features, you can always add code later. And if you are interested in the code part, you can see it all in the ‘Reveal in Explorer View.’

SAP BAS Storyboard is a fantastic way to make apps quickly and elegantly, whether you are new to this or you have been doing it for a while.


I found out more about Storyboard through these blogs:

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Uday Shankar M S
      Uday Shankar M S

      This looks like a handy feature. Can we use it for normal UI5 application where we consume Odata services only?

      Author's profile photo Aryan Raj Sinha
      Aryan Raj Sinha
      Blog Post Author

      Hi Uday,

      Yes, you can access storyboard on Business Application Studio by pressing 'ctrl+shift+P' and if your dev space supports storyboard, then you can view it. If you have an existing application or want a new app from scratch that only consumes oData services, you ca hit the Run Configuration section that you can see in the blog too, and from there, add consume that service.

      You can also access external resources and SAP API's that you might need from the external resources section.

      I hope this answered your question.


      Author's profile photo Shaun Oosthuizen
      Shaun Oosthuizen

      Hi Aryan. Do you know if there are any plans to bring this to VS Code?

      Author's profile photo Rupa Maity
      Rupa Maity

      Hi Shaun,

      We also have a VS Code extension that lets you connect to SAP Business Application Studio dev spaces.

      When you open a dev space in VS Code, all the cool features of the dev space can be accessed, including the storyboard.

      Here is a blog that explains this -


      Author's profile photo Filip Maly
      Filip Maly


      It is possible to switch off storyboard after load BAS application?

      It is annoying after each restart BAS in VS code close the tab.