Edited: SAP Fiori Reference App incorporated

Overview

This how-to guide describes an end-to-end scenario to consume backend data coming from an Netweaver AS ABAP system which is exposing a products catalog via an OData service. The approach of the blog is to provide intuitive guidance with the SAP Cloud Platform Connectivity Service and the SAP Cloud Connector.

Big Picture Scenario

List of resources used

Here are the main components used for this scenario:

 

SAP Cloud Connector Configurations

Assuming there is already a working instance of the SAP Cloud Connector, we need to do the following steps after the installation is done:

Change default password:

The default user is the SAP Cloud Connector is Administrator and the default password is manage, the first time you will login in the UI it will request to configure a new password.

Configure the connection to your SAP Cloud Platform subaccount:

After password has been changed the next step is to connect our SAP Cloud Connector from the datacenter (onpremise) to the target SAP Cloud Platform subaccount that is going to be used in the scenario.

The connection details can be obtained from the subaccount cockpit under Overview tab. See a mapping below:

Once the connection is done we should see a window as follows, describing some basic information related to the tunnel opened from your Cloud Connector to the SAP CP subaccount:

Alternatively we can also check the connection from the SAP Cloud Platform subaccount under Connectivity > Cloud Connector:

Configure Access Control – Cloud To On-Premise Mapping

Now it’s time to configure the mapping between cloud and the on-premise system, which allows to expose backend services throught the SAP Cloud Connector.

Click the “+” button to start the wizard.

We have a backend service running and a gateway exposing this service so we can select ABAP System.

HTTPS as a protocol has to be selected

Next step is to configure the internal host which is the actual host where the service is running in the backend. Since we have our Cloud Connector installed in the same host, we can use localhost as a hostmane under the 44300 port.

As virtual host we will use an alias or random name. Keep in mind this name needs to match with the URL field on the Destination we will create later on. In this case we use shopapp under port 443.

For the Principal type we leave this field as None, we are going to use Basic as authentication method so there is no need to configure anything here.

You can add a Description if it is required.

Finally a summary with the previous configuration is shown on the screen, we can also select the option Check Internal Host which performs a ping to the backend to verify of the system is up an running.

As a result we will see our new entry in the Mapping Virtual to Internal System and the result of the check as Reachable.

Expose Resources

Now that we have created the mapping between the virtual cloud system and the actual resource, what we need to do is to expose the backend services that are going to be consumed from our application in SAP Cloud Plaform. Use the “+” button to add a new resource:

A pop-up will open to configure the resource, for this scenario we are going to expose all the services running in the backend, but we can select a more restrictive configuration if needed. So we use /sap/ as the URL path and the access policy need to be for Path and all sub-paths

After Saving the configuration we should see a new entry under the Resources Accesible On shopapp:443 with the information related to this new resource. We can easily deactivate, delete or modify it from the SAP Cloud Connector menu.

Alternatively we can also go back to our SAP Cloud Platform subaccount under Connectivity > Cloud Connectors and check that the virtual host name is exposed with its Resouces available.

SAP Cloud Platform Configuration

Here we will create a new Destination using the details from the virtual system we created previously in the SAP Cloud Connector. Also we will go through the process of import a SAPUI5 application which will consume the data from the backend and create a binding using the Destination and the WebIDE Full-Stack

Create a Destination

Create a new Destination by clicking the New Destination button.

A sub-menu will open with a set of properties we need to enter with the details of the destination, such details are:

Some extra properties are needed to use this Destination from the WebIDE:

WebIDEUsage: true

WebIDEUsage: odata_abap,ui5_execute_abap,dev_abap

 

If you want to know more about how to connect to ABAP systems from WebIDE follow the link below:

https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/Cloud/en-US/5c3debce758a470e8342161457fd6f70.html

After Saving the configuration we can do a Check Connection by clicking the button and this will do a ping from SAP Cloud Platform to the backend system via the Destination. Note that no authorization verification is done at this point.

Create Project from Sample Application

Now it’s time to create a new Project from a sample application from the WebIDE.

Open WebIDE from Services > Web IDE Full-Stack > Go to Service

Open Home from the left menu and select the New Project from Sample Application

We choose the Shop application tile from the list, accept the license agreement and Finish

We will see the application deployed in our workspace

 

Create Data Binding

Now we need to connect our application to the data source by using the Destination created previously, in order to to do that simply open the manifest.json file, delete the mainService binding that already exists and select the “+” button under Data Sources tab.

A new window will open where we need to select the data souce type. Choose Service Catalog and use the dropdown box to search for the RefAppsBackend destination

Since we are going to use a Reference App to consume data from the EPM model in ABAP, we need to filter for this specific service , therefore use the search box search for the service EPM_REF_APPS_SHOP_SRV.

We can see also some details about the service we will consume:

Use default model and Finish

Run the Shop App from the WebIDE

Now it´s time to open the application in the WebIDE by choosing the flpSandbox.html from webapp folder > test > Run as Web Application

It will open a launchpad with our Shop application tile

We can see how data is coming from the back end

We can do a little exercise with a product from the catalog. Let’s assume we want to change a price from the Notebook Basic 15 for example. We can select this product and copy the Product ID HT-1000 which has a price of 956.00 USD

Then we go back to our backend the SAP Cloud Connector is also running and change the price and setup the new price to 856.00 USD

We can see the new price reflected after refreshing the application.

With this we conclude this blog where we have learnt basics for:

• Configure SAP Cloud Connector in our landscape (OnPremise).
• Connect SAP Cloud Connector to our cloud resources in SAP Cloud Platform.
• Create and configure a Destination and its main capabilities.
• Use a Sample application from the WebIDE Full-Stack service in SAP Cloud Platform and bind it to our own data source.

I hope this guide helps to understand the end-to-end process and visualize from a better perspective the main components of the SAP Cloud Platform Connectivity Service and SAP Cloud Connector.

Follow this guide to get more insights about the SAP NetWeaver AS ABAP 7.51
SP02 on ASE 16.0 [Dev Edition]