In this blog post, we’ll explain the steps of creating projects, adding source code to a project, testing an application, and finally how to deploy an application using SAP Business Application Studio.
The very first step of creating an SAP Fiori application using SAP Business Application Studio is to create a project. (A project is kind of a folder to organize your source code.) By default, projects are stored in the /home/user/projects folder.
You can create a project in two ways:
Creating a project using a wizard is simple and can be initiated by using the menu path File > New Project from Template and then selecting the appropriate one from the list of templates. However, for this chapter, we plan to create a project using the terminal. The terminal view can be opened using the menu Terminal > New Terminal, and you should see a new view open that looks like this.
Type “yo” in the command line, then select @sap/fiori, as shown below, and press (Enter).
Select SAPUI5 freestyle and SAPUI5 Application as the next steps. Also select None as the data source. The whole set of options to be selected is shown here.
Once you select all the options and press (Enter), the system will start creating the project. You can track the progress through the terminal view, as highlighted in the figure below, and your application will be generated successfully.
7
You can now open your project by accessing the File > Open menu and then selecting your newly created project, as shown below, and clicking Open.
Your newly created project with the created folders and files should now be available on the left side of the SAP Business Application Studio window, as shown in the previous figure. Now it’s time to add some code to the project.
As a part of the project, a basic folder structure has been created and some files are automatically created with empty or shell content. In this section, we’ll explore various options to add source codes. But before going there, let’s explore various important views available in SAP Business Application Studio and how you can use them throughout your development process:
That covers the different views you’ll be using to support your development activities. Now, let’s put some code into your empty project. One of the key features of SAP Business Application Studio is that you can add frontend code using a layout editor. If you’ve previously worked with the SAP Web IDE layout editor, this should be familiar to you, with some added options. For this section, we’ll be using layout editor to add some source code for the frontend. When the project was created, the system created a view with the name you provided. Select Layout Editor from the context menu of that view, as shown here.
The layout editor will open in the middle of the screen, as shown below, and you can now add your screen elements.
As shown, the layout editor contains three primary sections: control, design, and properties. The control section provides various SAPUI5 controls for your screen layout. You can drag one or more controls to the design section and can edit their properties or events in the properties section. We’ll show you simple options for creating a basic frontend application, so we’ll add only a couple of items: a checkbox and a date picker. Note that the editor will autosave your work. Also, you can navigate to the Outline tab to edit your screen, as shown in below For example, you can add a fragment, copy and paste to create new elements, and so on.
You can always check your source code in the code editor, as shown in the next figure. The editor can be opened by double-clicking the view name or from the context menu, like opening the layout editor.
So, now you have a basic understanding of how to add source code using the layout editor. Note that you can always add code manually using the source code editor, such as for adding controller logic, complex elements not available in the layout editor, and so on. Let’s assume that the code is complete and move on to testing it.
Once you complete your coding, you need to run and test your code. Before you can test your application, you need to create the run configuration. The following steps should be executed in sequence:
You should now have a basic understanding of testing the application. With the simple app now ready, let’s deploy it. You may think, “Where do I deploy it to?” This is a very valid question, one that we’ll answer now.
SAP provides two deployment options for your SAP Fiori application:
Deploy your app to the Cloud Foundry environment using the following steps:
Congratulations! You’ve now successfully created your simple SAPUI5 application using SAP Business Application Studio and deployed the same in the Cloud Foundry environment. As you’ve seen, some of the features of SAP Business Application Studio are similar to those in SAP Web IDE.
Although the SAP BTP trial no longer provides SAP Web IDE, many people still use SAP Web IDE productively. Eventually, however, all SAP users must migrate to SAP Business Application Studio as SAP Web IDE has been made obsolete by SAP. Learn how to take a project in SAP Web IDE to SAP Business Application Studio in this post.
Editor’s note: This post has been adapted from a section of the book SAP Fiori: Implementation and Development by Souvik Roy, Aleksandar Debelic, and Gairik Acharya.