Creating a sample SAPUI5 application with destination in Cloud Foundry environment

[former_member683027]

In this blog post, we will be creating a SAPUI5 application that is connected to a data source in the Cloud Foundry environment of the SAP Cloud Platform. The goal of this is to show how easily you can connect to any backend service and start consuming it in your SAPUI5 application using SAP Business Application Studio.

So let’s get started!

Step 1: Creating a destination in Cloud Foundry environment

For this blog post, we will be connecting to the “Northwind” services which are publicly available and hosted by OASIS here

• Log in to the SAP Cloud Platform Cockpit and enter your trial account. In your subaccount, click on the Destinations option under Connectivity on the left panel and click on New Destination.

• Enter the following information in the destination configuration. Also, add the additional properties as mentioned below by clicking on the New Property button.

You will have to enter HTML5.DynamicDestination manually as it is not available in the dropdown list. Also, ensure that the checkbox Use default JDK truststore is checked. Click on the Save button.

• Click on the newly connected destination to check if the connection is established.

You will get a popover with the message Connection to “Northwind” established. Response returned: “200: OK”

Step 2: Creating a SAPUI5 application in SAP Business Application Studio

• Log in to the SAP Business Application Studio.


• Start a dev space of type SAP Fiori. I have created one with the name Fiori_Demo. If you are logging in for the first time you can create a dev space of kind SAP Fiori by clicking on the Create Dev Space button.

Open the created dev space by clicking on it.

• Next, we will connect to the Cloud Foundry endpoint. This is a one-time activity. To connect, click on the bottom left corner of the screen.

• Enter the Cloud Foundry endpoint.

• Enter your credentials.

• Enter the organization and the space details. Once you have entered all the information, you will be connected to the Cloud Foundry endpoint.

• Now, you can create a new project by selecting Start from template.

• Select the SAP Fiori Freestyle Project and click on Start.

• Select the Target Running Environment as Cloud Foundry and SAPUI5 Application as the template, then click on Next.

• Enter the project name. Click on Next.

• Choose Standalone Approuter for the runtime and proceed by clicking Next.

• Enter the name of the module webapp and namespace sap.cf. Turn the authentication off. Click Next.

• Enter a view name as App and select Yes to add a data service to this project.

• Enter My SAP systems and the source as Northwind. Enter /v2/northwind/northwind.svc/ for the path with a backward slash. Click Next to create the project.

• Once the project has been generated, you will get a prompt to open the newly generated project in New workspace. Click Open in New Workspace.

• Next, in the view, we will create a simple list of items and bind it to the Products.

• Now we will create a new run configuration. To run the app, click on the run configuration panel on the left-hand bar and click on the + icon.

• Select webapp UI module in the prompt to run.

• Then select index.html.

• Choose the latest UI5 version.

• Choose Run demo-webapp as the name of the run configuration.

• Now you can see the run configuration on the left side. Click on the connect button to connect to the destination.

• Finally, click on the run button to run the configuration.

• SAP Business application studio will run the app and when prompted click on Expose and Open. Enter any description for the port.

Now you should see your SAPUI5 application loaded with the Product names.

That's it for this blog post. Following these steps, you can connect and consume destinations easily in your SAPUI5 applications with SAP Business Application Studio. Hope you liked the blog post. Feel free to list down any questions or comments you may have in the comments section below. I'll be happy to answer.

Cheers.