Familiarizing with the Studio UI

SAP Cloud Applications Studio is an Integrated Development Environment (IDE) based on Microsoft Visual Studio. For many features, the same user interface (UI) elements are used, for example, the various tool windows, which can be placed and docked flexibly, as known from Microsoft Visual Studio.

The main window is also referred to as the Developer Desktop and the central starting point for all development activities like creating new solutions, new business objects, writing code, and so on.

The following screenshot gives an overview of the most important features and tool windows.

• Menu and Toolbars: Most commands based on Visual Studio with additional Cloud Applications Studio specifics
• My Solutions window: Connect to tenants and manage solutions
• Project/Solution Explorer: Manage development content like business objects, scripts, and so on.
• Property Explorer: View properties of project explorer items, for example, created when and by whom
• Error List: See information, warning and error messages, for example, in case the code contains errors
• Code Editor / Document window: Edit code of business objects or configuration details of other development content, for example, relevant fields list for a web service integration

Main Menu and Toolbar of the Developer Desktop
Most frequently used button during code writing: Save and Activate

View Menu	Administration Menu
The View menu allows you to open the various tool windows in case you closed them.	The Administration menu contains a lot of lifecycle focused items. Most of them require PDI administrator access rights.

My Solutions Window	Project / Solution Explorer
Connect to tenant and manage solutions Provides toolbar buttons to Logon and Logoff, as well as Create a New Solution and Refresh the solution list.	Manage development content like business objects, scripts, folders, and so on. Provides toolbar buttons to Refresh the project content and Add New Items to it.

Code Editor, Error List, and Property Explorer
The Code Editor is the central window of the developer desktop that allows you to work on business object definitions and business logic. In case the code contains errors, the Error List window notifies you of them. The Property Explorer shows useful information about the currently selected file, for example when it was last changed and by whom.

The Repository Explorer is an important source of information when working with SAP content. It provides information about the public solution model (PSM). In short, the PSM is all content of SAP that can be accessed and used from customer specific solutions.

The Repository Explorer provides information for the following content types with a separate tab each:

• Business Objects
• Data Types
• Enhancement Options
• Inbound Service Interfaces
• Reuse UIs

Each tab, in turn, contains a list or a tree view of the respective entities and a documentation pane where the relevant content of the selected entity is displayed.

The tabs Business Objects and Data Types hold significant importance while writing code for looking up the structure and fields of business objects and their respective data types. Let’s have a closer look at them.

A business object is a technical representation of a real-world object and the cloud solution uses them to model the business environment.

• This tab lists all SAP business objects that are released with the PSM on the left-hand side in the entity pane. Each business object can be expanded to show its attributes, actions, and other elements, which we will get to know soon.
• The documentation's level of the details may vary depending on the business object. It usually consists of some general information like the namespace, where it belongs to (we will learn about that later), a definition and business context for the business object, and sometimes even scripting samples on how to implement certain things.
• The most comprehensive piece of documentation is shown when the business object itself is selected. However, also other elements provide further information like their structure and data types.

Data types define the kind of data that is stored in a field such as a number, date, or text.

• This tab lists all SAP data types that are released with the PSM on the left-hand side in the entity pane.
• The documentation for each data type includes general information, such as the namespace or PSM release status, and more specific details depending on the data type. For example, value ranges for a number and maximum field length for a text field.
• The following screenshot shows the example of the data type Amount, where the documentation tells us that it consists of two elements: a decimal value and a currency code.

The User Interface (UI) Designer is a separate window of the Cloud Applications Studio that allows you to modify screens (sometimes called floorplans). It's a WYSIWYG (what you see is what you get) editor for floorplans, although it doesn't render them according to the latest front end user interface. It starts automatically by opening a screen from the project explorer or from the menu Administration → Open UI Designer.

If the screens meet specific criteria, they will be rendered properly in the mobile app of the cloud solution and adhere to the design and navigation principles and specifics of the respective mobile operating system. This way the UI Designer also supports you in creating screens for mobile devices.

The features of the UI Designer will be discussed in detail later when they are used. For now, we just want to gather an overview on the user interface of the UI Designer:

The layout is similar to the Developer Desktop. The most relevant parts are:

• The Designeris the main area where the currently loaded floorplan is displayed. Inside this area you can also view the Data Model and Controller settings of the floorplan. These views can be activated by selecting the respective tab in the lower-left corner (the preview should be carried out in a separate web browser such as Chrome or Edge).
• The Property Explorer allows you to edit properties of the currently selected control.
• The Toolbox provides a list of controls that can be added to the screen.

So far, we have only mentioned modifying screens with the UI Designer. The reason for that is because the creation of new screens is triggered from the Developer Desktop. The following graphic visualizes the process and shows where the UI Designer comes into play: