Create an SAP Fiori App Using SAP Business Application Studio

1. In the left-hand sidebar of SAP Business Application Studio, select the hamburger icon | File | Open Folder… to open the Open Folder dialog.

   

2. The Open Folder dialog opens at the center of the SAP Business Application Studio window. First, select the projects entry.

3. Then click OK.

   

4. In the project explorer, select New Folder… to create a new folder for your project. Insert FioriDemo as folder name.

   

1. In the Get Started tab, click New Project from Template.

   

   If the Get Started Page does not appear, in the left side bar, select the hamburger icon | Help | Get Started.

   

   The easiest way to develop an SAPUI5 freestyle app from scratch is to create it from a template. To continue developing an existing application, the best practice is to use git source code management and clone the repository.

   Using the UI wizard you can at any point click the Back button to go back to the previous step, or click the specific wizard step to go back to that step.

   You can also create a project from the terminal using Yeoman (@sap/fiori generator).

2. Select the SAP Fiori generator tile, and click Start.

   

3. For Template Selection, select the following, and click Next.

   Parameter	Value
   Which template do you want to use?	Basic tile

   

4. For Data Source and Service Selection, select the following, and click Next.

   Parameter	Value
   Data source	Connect to a system
   System	ES5
   Service	ZGWSAMPLE_BASIC (1) - OData V2

   

5. For Entity Selection > View name, enter Suppliers, and click Next.

   

6. For Project Attributes, select the following, and click Next.

   Parameter	Value
   Module name	businesspartners
   Application title	Suppliers
   Application namespace	ns
   Description	An SAP Fiori app to view a list of suppliers (demo)
   Project folder path	/home/user/projects/FioriDemo
   Minimum SAPUI5 version	(Use the latest version)
   Enable TypeScript	No
   Add deployment configuration	Yes
   Add FLP configuration	Yes
   Use virtual endpoints for local preview	No
   Configure advanced options	No (default)

   Make sure to set the correct project folder path and to use the latest SAPUI5 version.

   

   You might need to scroll to see the latest version when selecting the Minimum SAPUI5version.

   

7. For Deployment Configuration, select the following, and click Next.

   Parameter	Value
   Please choose the target	Cloud Foundry (default)
   Destination name	ES5 - https: //sapes5.sapdevcenter.com
   Add Router Module	Add Application to Managed Application Router

   

8. For Fiori Launchpad Configuration, enter the following, and click Finish.

   Parameter	Value
   Semantic Object	Object
   Action	display
   Title	Suppliers
   Subtitle (optional)	Our Suppliers

   

9. Wait until the installation of project dependencies is completed. A notification that “The project has been generated” appears at the bottom right of the screen. The Application Information tab opens, and the files and project structure in the Explorer view are updated.

   

1. Click the Run Configurations icon to open the Run Configurations view. You’ll see a set of run configurations that were created when you generated the app.

   

   If you use a smaller screen the Run Configurations icon might be hidden. Then search for the … icon. Selecting this icon will open a menu showing all hidden menu entries.

   

2. Hover over the Start businesspartners run configuration and click the Play icon next to it to run the app locally in the dev space.

   

   You may be prompted to allow pop-ups.

   The Debug view opens, and the status bar color changes to orange, indicating that a debug session is in progress.

   A new tab opens in SAP Business Application Studio where you can see the log of the running app.

   

3. A new browser tab opens showing the app. At this stage of development, the app only shows a title.

   

The layout editor allows users to easily make changes in the app using a visual editor. In this tutorial, you will make changes so that data from the backend service is displayed when the app is running.

1. Click Toggle Bottom Panel to free screen space for the editors pane.

   

2. Click the Explorer button to open the Explorer view.

   

3. Choose FioriDemo / businesspartners > webapp > view, right-click the Suppliers.view.xml file, and click Open with…

   

4. The Select editor dialog opens at the top center of the SAP Business Application Studio window. Select the Layout Editor entry.

   

   You may need to wait a bit for the layout editor extension to load.

   The Suppliers view opens in the layout editor.

   

5. Open the Suppliers.view.xml file with the Text Editor and see how modifications in the layout editor show up in the text editor. You don’t have to open both editors for development. You can do the development work using either of the editors, or both. In this tutorial, you’ll have both editors open for demo purposes.

   

6. The Suppliers view opens in the text editor in a tab next to the layout editor.

   

7. For convenience, drag the text editor below the layout editor.

   

   The layout editor and text editor are stacked so you can see how making changes to one shows up in the other.

   

Edit your app using the layout editor, with no need to do any coding.

Tip 1: Since autosave is enabled by default, every change to a file triggers the live reload of the app. If you place the browser with the running app and the browser window with SAP Business Application Studio side by side, you’ll be able to see how changes trigger the app’s live reload.

Tip 2: To trigger live reload only when you save a file, in the menu bar, select File | Auto Save to toggle auto save from enable (default) to disable. A check mark next to auto save indicates that auto save is enabled.

1. In the Controls pane, enter List in the search box to filter the controls.

   

   To get more screen real-estate, click the Explorer button to close the Explorer view, and adjust the ratio between the layout editor and the code editor.

   

2. Drag the List control and drop it on the View control in the canvas.

   

   Adding the list control to the view is reflected in both the layout editor and the text editor.

   

3. Select the Standard List Item control by clicking the List control you just added (the breadcrumb indicates which control is selected) and, in the Entity Set property in the Properties pane, click the Bind icon.

   

   The Select Entity Set view is displayed.

4. Select the Define entity set and set the selected control as template option, and in the Entity Set dropdown list, choose the BusinessPartnerSet entity set. Click Bind to complete the operation.

   

   The space of the Select Entity Set view may be too narrow to show all options. If you do not see the Define entity set and set the selected control as template option, scroll down in the Select Entity Set view to make it available.

   The bind operation is reflected in both the Layout Editor and the code editor.

   

5. In the Properties pane, in the Title property, click the Bind icon.

   

   The Data Binding view is displayed.

6. Click the Clear expression (eraser) icon to clear the default text, and in the data field double-click CompanyName. Click Bind to complete the operation.

   

7. Repeat the last two steps for the Description property in the Properties pane. Choose WebAddress.

   

8. Wait for the live reload of the app to complete. A list of suppliers is displayed.

   

Congratulations!

You have now successfully developed an SAP Fiori app using SAP Business Application Studio, including test-running the app locally in the dev space. In this tutorial, you learned about the high productivity tools that are available out-of-the-box in SAP Business Application Studio, such as: templates and wizards, command palette, layout editor, local run (Preview Application), and more.