Creating an SAPUI5 Project

SAP Business Application Studio is an SAP Business Technology Platform service that offers a modern development environment tailored for efficient development of business applications for the SAP Intelligent Enterprise.

The following video provides a brief introduction to SAP Business Application Studio.

To try out the SAP Business Application Studio, you can create a free trial account on the SAP Business Technology Platform.

It provides pre-configured environments, so-called Dev Spaces, with pre-installed runtimes and tools tailored for key scenarios.

Each type of application requires a different development environment. When you create a dev space, you are prompted to select the type of application that you want to create. Based on the type of application that you choose to build, you are provided with a different set of tools.

To create a dev space for SAPUI5 development, proceed as follows:

1. Open SAP Business Application Studio and log in with your credentials.

2. Choose Create Dev Space.

3. Enter a name for the dev space.

4. Select the application type SAP Fiori.

5. (Optional) Select the relevant additional extensions to enhance your space.

6. Choose Create Dev Space.

If you don't need to work with your dev space for a while, you can stop your dev space. When your dev space is running, it consumes memory, energy, and CPU. If you don't use your dev space and it sits idle for too long, the dev space will be stopped.

When you restart your stopped dev space, all content in your dev space, including files and settings, remain and will be available.

You can also delete a dev space.

There is a project wizard that can be used to create a project in SAP Business Application Studio. To start the wizard, choose File → New Project from Template .

In the third step, select SAP Fiori as the application type from the dropdown menu. You will then get several templates from which you can choose. Select the floorplan Basic application.

Follow the wizard steps and provide the required information. You can move between steps using the Previous and Next buttons or clicking the steps from the wizard tree.

The wizard displays error notifications on the field level and on the step level.

The wizard generates the project, including the relevant folder structure, artifacts, and resources.

To be able to work with a project, you have to open it in a workspace. You can use the menu path File → Open Folder... for this. A workspace is an entity containing your project's settings, debug configurations, and task configurations.

You can choose to create a new workspace for each project, or you can set up a multi-root workspace.

In the Layout Editor, you can display the content of an XML view to see it in a way that closely corresponds to how it will appear in the finished application.

The Layout Editor is composed of a canvas, a pane on the left side that includes the Controls and Outline tabs, and a pane on the right side that includes the Events and Properties panes.

For details on the Layout Editor, refer to the SAP Business Application Studio documentation.

After the application is successfully generated, several options to preview it are available in SAP Business Application Studio. You can start a preview via npm scripts from the terminal, or using the Run Control function in the Run Configuration pane. You can also create additional run configurations in the Run Configuration pane that define how your project is executed.

It is also possible to start a preview from the context menu. Right-click on any subfolder in your project and select Preview Application from the context menu that appears. You are then provided with the following options, among others:

• start: Starts the application using npm start and embeds it in an SAP Fiori launchpad sandbox. If the application uses an OData service, it is called using the live service to retrieve real data against the hosted version of SAPUI5 that was selected during project generation.
• start-noflp: Starts the application via the HTML page index.html using npm start-noflp. The application is not embedded in an SAP Fiori launchpad sandbox.