Taking a Tour of SAP Business Application Studio

The Storyboard is where you can create, view, and edit the different components. It provides a graphical overview of your application components (data models, services, and UI front-ends), as well as the connections between them.

This functionality allows you to quickly understand your application’s structure and components, and to edit the different components by navigating to the component domain editor (for example, data modeler, UI editor).

You can move, zoom in and out, and expand and collapse single objects, or all objects at once.

The project explorer displays application components as a logical view, which simplifies browsing of the contents of your application.

On the left side of your screen, you can find the Project Explorer in the workspace.

The Project Explorer contains the following sections:

• Project (Home and Storyboard)
• Data Models and Services
• Mobile-Centric, Freestyle Application
• Template-Based, Responsive Application

You can open application components in their respective editors from the context menu of each section.

The CDS (Core Data Services) graphical modeler allows you to create, view, and edit your application data and services in an intuitive user experience.

The graphical modeler helps you to easily understand the different application data structures and services, including the entities, properties, relations, and annotations.

The service center provides a central entry point to explore SAP business services from various service providers. You can use the services as data sources in your application, and you can trigger application development from the Service Center. To explore services, choose the Service Center icon from the left side menu, or select View → OpenView and enter Service Center in the input field. The Service Center opens, and displays various service providers, including the SAP System Service Provider, the SAP Business Accelerator Hub Service Provider, and the SAP Business Hub Enterprise Service Provider. Within each one of the providers, you can explore the different services available and choose a specific service to view its specific details (entities, properties, live-data).

You can hide or display each service provider in the file explorer. Right-click Service Center and select or clear the service provider.

During your application development, you can easily test run it by choosing the Run and Debug button. This button is located on the top on the top right part of the screen. Alternatively you can use the Run Configurations panel.

Once the development is ready, you deploy your application via the Task Explorer or from the project explorer on the context menu of a project.

Let’s start with the basic IDE capabilities. SAP Business Application Studio uses the Visual Studio Code Web open source platform to develop its multi-language Cloud IDE that runs in the browser. In this part of the lesson, we will review the main tools offered by SAP Business Application Studio for professional developers that enable you to have the ultimate flexibility for choosing the right tools needed to complete your development tasks.

Opening the integrated terminal allows you to access the underlying system. You can create multiple terminals open to different locations, and easily navigate between them. The terminal is a convenient tool because you don’t need to switch windows or change the state of an existing terminal to perform a quick command-line task.

From the terminal, you can use almost every tool, including running maven or using npm. You can create new projects or modules, build applications, and deploy applications. For SAP cloud application development, you can type the CDS help command to explore some options.

The Command Palette is an interactive window that provides access to all the SAP Business Application Studio functionalities. This access includes keyboard shortcuts for the common operations.

These keyboard shortcuts enable you to:

• Open files.
• Execute editor commands.
• Connect to the Cloud Foundry environment.
• Launch the SAP Business Application Studio high productivity tools.

To open a tool such as the application home page, type > home, and choose the Open Home command. To open a file in an editor, just enter the asked file name. You can reach the command palette directly from the top menu bar.

The File Explorer is used to browse, open, and manage the files and folders in your project. You can create, delete, and rename files and folders, move files and folders with drag and drop, and use the context menu to explore all options.

SAP Business Application Studio works very well with other tools that you might use. For example, if you want to run a command-line tool in the context of the folder you currently have open in SAP Business Application Studio, right-click the folder, and choose Open in the code editor or the terminal.

You can select multiple files in the File Explorer, open those files in editors, or choose Compare With Each Other from the context menu to quickly compare (diff) two files.

SAP Business Application Studio provides extensive search and replace capabilities within your workspace using the Search view or from the find input box (Ctrl+F). We support regular expressions, matches, include and exclude terms, grouping conditions, ranges, and more. The search results are grouped into files containing the search term, with an indication of the hits in each file and its location. Expand a file to see a preview of all the hits within that file. Choose one of the hits to view it in the editor.

SAP Business Application Studio enables you to connect and interact with the Git control system, letting you connect and interact with remote Git repositories.

SAP Business Application Studio provides a graphical user interface for executing Git commands and managing your source control and versioning. You can also manually perform other Git commands from the terminal.

The Debug view in SAP Business Application Studio allows you to see your project’s variables, handle watches, view elements in the Call stack view, and manage your breakpoints. You can use the Debug toolbar to control your debugging flow, for example, Continue/Pause, Step Over, Step into or out, Restart, and Stop.

The debug status bar helps you change the active launch configuration and start debugging without the need to open the Debug view, and you can use the Debug Console panel to view the logs during a debugging session.

The Outline view displays a tree structure, with symbols, of the file that is currently active in the editor area. It shows the elements, classes, fields, and methods. It also includes an input box which finds or filters symbols as you type. The contents of the Outline view are editor-specific.

The Problems view displays a list of the problems in your project. When you double-click the icon for a problem, the editor for the associated resource automatically opens and highlights the line containing the problem. By default, the Problems view will order your problems by severity.

In SAP Business Application Studio, you will find out-of-the-box support for code completion, content assist, and code hinting for UI5, CDS, JavaScript, TypeScript, JSON, HTML, CSS, and more, depending on the dev space you created. Just type a character, and if the language service knows possible completions, a suggestion will pop up. If you continue typing characters, the list of members (variables, methods, and so on) is filtered to only include members containing your typed characters.

You can also see the quick info for each method by either choosing Space, or choosing the info icon.

SAP Business Application Studio provides two different setting scopes: user settings that apply globally to any instance you open, and workspace settings that apply when the workspace is open. Workspace settings are specific to a project and can be shared across developers.

You can search and discover settings using the search bar, customize your editor by language, specify an executable that SAP Business Application Studio will run to perform certain operations, view the default values in the settings editor, and more.

To open the User Settings, choose the chain wheel icon on the bottom left of the side panel.