Create an SAP Fiori App Using SAP Business Application Studio

1. In the left side bar, select Hamburger icon | View | Command Palette… to open the command palette.

   

2. The command palette is opened at the top-center of the SAP Business Application Studio window.

   

3. Enter the Fiori: Open CF Application Router Generator command in the command palette. Type fiori: open in the command palette text field to filter the commands.

   Filter the list of commands in the command palette by typing part of the command in the command palette text field.

   

4. The Application Router Generator Wizard tab is opened. For Application Router Configuration, select the following, and click Finish.

   Step	Parameter	Value
   A	Application router project path	/home/user/projects (default)
   B	MTA ID	FioriDemo
   C	MTA Description	Can be left empty (default)
   D	Add route module	Managed Approuter

   

   When end-users access an app in the Cloud Foundry environment, they actually access the Application Router first. The application router is used to serve static content, authenticate users, rewrite URLs, and forward or proxy requests to other micro services while propagating user information.

   The recommendation is to use Managed Application Router that provides many benefits, when compared to Standalone Application Router, such as save resources, lower maintenance efforts, etc. Standalone Application Router should only be used in advanced cases, for example when application router extensibility is required. More information is available in Developing HTML5 Applications in the Cloud Foundry Environment

5. Wait until the creation of project is completed. A notification that “The files has been generated” appears at the bottom right of the screen.

   

1. In the left side bar, select Hamburger icon | File | Open Folder… to open the Open Folder dialog.

   

2. The Open Folder dialog is opened at the center of the SAP Business Application Studio window. Select the projects entry.

   

3. Select the FioriDemo project within the projects folder, and click OK.

   

4. SAP Business Application Studio reloads with the FioriDemo project open in its workspace. In the Explorer view you can see the FioriDemo project, its folder structure, and files.

   The status bar color changes to blue, indicating that a workspace or folder is open.

   

1. In the Get Started tab click Start from template.

   

   If the Get Started Page does not appear, in the left side bar, select 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 Application tile, and click Start.

   

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

   Step	Parameter	Value
   A	Application type	SAPUI5 freestyle
   B	Which template do you want to use?	SAPUI5 Application tile

   

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

   Step	Parameter	Value
   A	Data source	Connect to a system
   B	System	ES5
   C	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.

   Step	Parameter	Value
   A	Module name	businesspartners
   B	Application title	Suppliers
   C	Application namespace	ns
   D	Description	An SAPUI5 freestyle app to view a list of suppliers (demo)
   E	Project folder path	/home/user/projects/FioriDemo
   F	Minimum SAPUI5 version	1.102.1 (Source system version) (default)
   G	Add deployment configuration	Yes (default after setting the project folder path)
   H	Add FLP configuration	Yes
   I	Configure advanced options	No (default)

   

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

   Step	Parameter	Value
   A	Please choose the target	Cloud Foundry (default)
   B	Destination name	ES5 - https: //sapes5.sapdevcenter.com

   

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

   Step	Parameter	Value
   A	Semantic Object	Object
   B	Action	display
   B	Title	Suppliers
   B	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 is opened, and the files and project structure in the Explorer view are updated.

   

1. Click the Run Configurations view button to open the Run Configurations view. A set of run configuration that were created as part of the app generation are presented.

   

2. Click the Play icon of the Start businesspartners run configuration 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.

   You may be prompted to open the app in a new tab.

   

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

   If the browser tab does not open, or a notification “You have exceeded the number of ports you can expose” appears at the bottom-right of the page, you may need to un-expose ports. Select the Ports: Unexpose option in the command palette (View | Find Command) to un-expose a port that is in an [Active] state. Repeat this procedure until no more than two ports are in [Active] state, and try again.

   

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 view button to open the Explorer view.

   

3. Choose FioriDemo > businesspartners > webapp > view and right-click the Suppliers.view.xml file that you created with the template in a previous step.

   

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

   

   To have the Layout Editor option available after opening the workspace or folder, you may need to wait a bit for the Layout Editor extension to be loaded.

5. The Suppliers view is opened in the Layout Editor.

   

6. Open the Suppliers.view.xml file with the text editor and see how modifications in the Layout Editor are manifested in the text editor. It is not mandatory 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.

   

7. The Suppliers view is opened in the text editor in a tab next to the Layout Editor.

   

8. For convenience, place the code editor below the Layout Editor. Use the drag & drop functionality.

   

   The Layout Editor and code editor are stacked so you can see how making changes to one will be reflected on the other.

   

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

   Tip 1: Since auto save is enabled by default, every change to a file triggers the live reload of the app. If you place the browser where the app is running and the browser where SAP Business Application Studio is running side by side, you’ll be able to see how code 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 ‘V’ next to auto save indicates that auto save is enabled.

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

   

   In order to get more screen real-estate, click the Explorer view button to close the Explorer view, and adjust the ratio between the Layout Editor and the code editor.

3. 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 code editor.

   

4. 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.

5. 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. In case 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.

   

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

   

   The Data Binding view is displayed.

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

   

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

   

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

   

Congratulations!

With this, you have successfully completed the development of 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 high productivity tools that are available out-of-the-box in SAP Business Applications Studio, such as: templates and wizards, command palette, Layout Editor, local run (Preview Application), and more.