Create an SAP Fiori App Using SAP Business Application Studio

1. Create a new SAP Fiori project from a template.

   

   If the Welcome Page does not appear, in the menu bar, select View | Find Command to open the command palette and select the command SAP Business Application Studio: Welcome Page.

   

   The easiest way to develop an SAP Fiori 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 reset button to reset the wizard at the top-right of the wizard screen, click the Back button to go back to the previous step, or click the specific wizard step to go back to that step.
   For convenience, click the Explorer view button to close the Explorer view.

2. Make sure that the target folder is /home/user/projects, select the SAP Fiori Freestyle - Project Generator template, and click Next.

   

3. For Target Running Environment, select the following, and click Next.

   Step	Parameter	Value
   A	Select the target running environment	Cloud Foundry
   B	Select the template you want to use	SAPUI5 Application

   

4. For Project Name, enter FioriDemo, and click Next.

   

5. For HTML5 Applications, select Standalone Approuter, and click Next.

   

   The application router is the single point-of-entry for an application running in the Cloud Foundry environment on SAP Cloud Platform. 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.
   To simplify the tutorial the Standalone Approuter option is used .

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

   Step	Parameter	Value
   A	Enter an HTML5 module name	BusinessPartners
   B	Do you want to add authentication	No
   C	Enter a namespace	ns

   

7. For View Name, select the following, and click Next.

   Step	Parameter	Value
   A	Enter a view name	Suppliers
   B	Do you want to add a data service	Yes

   

8. For Consume Services, select the following, and click Next.

   Step	Parameter	Value
   A	Select a system	My SAP systems
   B	Select a source	ES5 [Catalog]
   C	Select a service	GWSAMPLE_BASIC

   

   A notification that the project has been generated appears at the bottom right of the screen.

   

9. Click Open in New Workspace in the notification or File > Open Workspace, and choose FioriDemo.

   

   The Explorer view opens and you can see the FioriDemo project, its folder structure, and files. If not, you can click the Explorer view button at the top left of the screen.

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

Open the layout editor in SAP Business Application Studio to easily make a few changes. In this case, you will make changes so that data from the backend service is displayed when the app is running.

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

2. Choose Open With > Layout Editor.

   

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

   The Suppliers view is opened in the Layout Editor.

   

3. You can optionally choose to open it with the code editor and see how modifications in the Layout Editor are manifested in the code editor.

   

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

   

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

   

Make some changes using the layout editor, with no need to do any coding.

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

   

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

   

3. Select the Standard List Item control 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 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 fields double click CompanyName. Click Bind to complete the operation.

   

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

   

Run your new application to test it.

1. Open the Run Configurations view.

   

2. Click + and select BusinessPartners.

   

3. For the next steps of the wizard, select the following:

   Step	Parameter	Value
   A	What would you like to run	BusinessPartners
   B	Select a runnable file	index.html
   C	Select a UI5 version	latest
   D	Enter a name	Run BusinessPartners (ES5)

   A new run configuration is generated for the FioriDemo project.

4. Expand the run configuration to display the services that can be bound.

   

   SAP Business Application Studio allows you to test your app with resources.

5. To bind to the destination, click the Bind icon to the right of the destination resource to get a list of available destinations.

   

6. Select the ES5 destination from the list.

   

   Once the destination has been bound, the Bind icon turns green.

   To unbind the destination, click the Unbind icon.

   

7. Hover over the run configuration and click the Run Module icon.

   

8. Wait for the A service is listening to port 6004 notification and then click the button to open the app.

   The left side view changes to the debug view and the status bar color changes to orange to indicate that the app is running in debug mode.

   If you are running the app for the first time, the button in the notification will say Expose and Open. Otherwise it will say Open in New Tab.

   

   Some of the notifications appear on the screen for a short period of time.

   You may optionally add a port description.

   You may need to authenticate yourself to access the backend. Use your ES5 username and password.

   The app is opened in a new tab and a list of suppliers is displayed.

   

1. Return to the SAP Business Application Studio tab.

2. In the Debug view click the Stop icon.

   

   The status bar background color changes from orange to blue.

   You can re-run the app clicking the Start Debugging icon in the Debug view or clicking the Run Module icon in the Run Configurations view.