Introduction
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.
Entities
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
Relationships
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
Services
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
Conclusion
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.
References
I found out more about Storyboard through these blogs:
- SAP Managed Tags:
5 Comments
