Develop an SAP Fiori App Using SAP Business Application Studio

1. Go to your Cloud Foundry environment subaccount and click the Subscriptions tab.

   

2. Locate the SAP Business Application Studio tile.

3. Click Go to Application.

1. Choose Create Dev Space.

   

2. Choose Demo_Fiori for your dev space name.

3. Choose SAP Fiori as the application type.

4. Click Create Dev Space.

   

   The dev space is in status STARTING. Wait until it is in status RUNNING.

   

Now you need to consume a service to bind the UI controls to the service’s collection properties. Later, when you test run the app, it will present data coming from the backend service.

1. Open the command palette ( View > Find Command or F1) and select Consume SAP Services.

   

2. Select the FioriDemo/BusinessPartners/ folder.

   

   If the project contains more than one HTML5 module, you’ll have a list to select from.

3. Choose My SAP Systems as the data source.

   

   A list of data sources is displayed.

4. Choose ES5 as the data source.

   

5. Choose GWSAMPLE_BASIC as the service.

   

   The service is successfully bound to the application. You can see that the service appears in the module’s manifest.json dataSources section ( FioriDemo > BusinessPartners > webapp ). You can see the service metadata in FioriDemo > BusinessPartners > webapp > localService.

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 > webapp > view and right-click the Suppliers.view.xml file that you created with yo generator in a previous step.

2. Choose Open With > 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.

   

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

   

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 List control and, in the Entity Set property in the Properties pane, click the Bind icon.

   

   The Select Entity Set view is presented.

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.

   

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 steps for the Description property in the Properties pane. Choose BusinessPartnerID.

   

Before you can test run your new application, set your Cloud Foundry preferences.

1. Open the command palette and select CF: Login to cloud foundry.

   

2. When prompted, select the API endpoint, organization and space for your project.

   The Cloud Foundry organization and space appear in the status line at the bottom left part of the screen.

   

Run your new application to test it.

1. Open the Run Configurations view.

   

2. Click + and select BusinessPartners.

   

3. Select index.html.

   

   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 test Destination service instance in your space, click the bind icon to the right of the Destination service resource and select an instance from the list.

   

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

   To unbind the service instance, click the Unbind icon.

   

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

   

7. Wait for the notification A service is listening to port 6004. Click the notification’s button.

   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.

   

   You may optionally add a port description.

   You may need to authenticate yourself to access the backend.

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

   

Access your deployed application in the SAP Cloud Platform cockpit. The steps below show you how to create a URL that you can use to access your new application.

1. Access the space to where the app is deployed and go to the Applications tab.

   

2. Make sure your application is in Started state, and click its name (FioriDemo_appRouter). The Application: FioriDemo_appRouter - Overview page opens.

3. Right-click the URL under Application Routes and save the URL in a text file.

   

4. Locate the sap.app id from the manifest.json file, located in your HTML5 module, and add it to the copied link after removing the periods.

   

   For future reference, this is the construct of the final URL: <URL_from_application_overview_page>/<mynamespace><project_name>/index.html

   You can use this URL in any browser to access your new application.