In the latest release of SAP Business Application Studio, you will be greeted by the Storyboard when you open a project in the ‘Full Stack Application with Productivity Tools’ dev space. This replaces the home page as the landing page.
You may be familiar with this blog post by my colleague Liat Borenshtein that was published when this tool was originally introduced to SAP Cloud Application Programming (CAP) applications.Now that the storyboard has become the landing page in the ‘Full Stack Applications with Productivity Tools’ dev space, a lot has changed in it, yet the core remains the same - it is a detailed graphical view of the components of your application and how they fit together.
But why did we make this change? The home page gave you a semantic view of your application, showing you the building blocks of the application rather than the individual code files. With the storyboard, we take this further. You can now easily understand large, complex applications and how the different components are connected with the graphical view in the storyboard. In addition, we have added many new tools that let you accomplish various tasks without the need to return to the homepage every time.
Let’s familiarize ourselves with the changes that have come in with this update:
The storyboard is loaded with lots of features. Let’s look at them briefly:
The storyboard is now the landing page when you open a project. However, you can also open it from Project Explorer.
The storyboard lets you quickly understand your project structure by looking at the different components such as data models, and services,. By default, it shows you the namespace under which your artifacts will get created.
3. The storyboard lets you create a new data model using the CDS graphical modeler. To do this, you can click on the + sign in the Data Models section or click on the namespace and use the ‘Open in Graphical Modeler’ option. Once your data model has been added, you can see it on the storyboard.
Note: for the Full Stack Application with Productivity Tools projects, the entities and service entities are generated in the default namespace. For CAP applications, however, the developer can choose the namespace in which to create the entities and service entities (this is configured in the settings).
4. You can also create or import sample data using the Sample Data Editor. Once sample data is set, you get a ‘sample data’ icon next to the entity name to indicate this.
Note: To quickly open the sample data editor, you can simply click on the ‘sample data’ icon.
5. You can configure Personal Data using the Personal Data Management editor. You can learn more about this feature in the documentation
6. The storyboard lets you create a service based on the data models. You can click on the + icon next to services to open the Service Modeler. Once the service is added, it appears under the Services tab.
7. You can define the user roles for each service by using the Authorization Editor. Once a user role has been set, you get a ‘person’ icon next to the service to indicate this.
Note: you can click on the ‘person’ icon to open the Authorization editor quickly.
8. You can trigger the wizards to create a Fiori Elements UI or a native mobile application. Once the application is added, you can see it under the UI applications tab.
9. You can switch between the Basic View and the Detailed View to see the properties of the data models, services, and UI applications. You can also use the Filters section to only see the data you are interested in. By default, moving from Basic View to Detailed View adds additional filters.
10. You can click on the + sign in the External Data Models section to add an external resource. This opens the Service Center panel. You can now add an entity from an external system to your application. Once added, the entity will show up in the External Data Models section.
Note that once an external data model has been added, you cannot see the properties of the service on the storyboard as these are best viewed via the Service Center or the CDS graphical modeler.
11. You can also add different components or access the editors using the Add and Open Editor menus on the top left of the storyboard respectively.
12. Finally, you can see how these building blocks relate to each other.
Apart from this, many features that were on the homepage are now available in their own dedicated tools. This lets you access these tools without the need to return to the homepage each time. It also gives us the flexibility to add many more features within each tool.
Here is how you can find the functionalities that were on the homepage:
• Project creation and opening a project: By default, the project explorer will open when you start a dev space. If you have no existing project, it prompts you to create one.
If you already have a project, you can create a new one by clicking the + icon on the Project Explorer tab or open an existing project using the folder icon.
• Connect to Git: You can store your project in Git and share it with your colleagues using the Simplified Git panel
• Preview your application: you can access the Run and Debug button on the top right or preview your app by using the Run Configurations panel.
• Deploy your application: you can do this via the Task Explorer or from the project explorer on the context menu of a project
Note: for now, developers who want to deploy mobile apps must create and deploy the project from the Project Homepage, before triggering the Deploy to Mobile Services from Project Explorer. (We are working at improving this flow.)
• Guide Center: You can open the Guide Center to start the guided development of an application using the Guide Center.
We are excited to see you use the storyboard and the other tools to improve your productivity.
Over the upcoming quarters, we hope to make the storyboard available to all developers of BAS and bring in support for many more requested features. So, stay tuned!
We are always happy to hear from you so please reach out to us with your feedback and ideas.