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
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:
|Region Host||Cockpit URL hostname. eu1.hana.ondemand.com|
|Subaccount Name||Technical Name|
|Display Name||Subaccount Name is recommended|
|Subaccount User||SAP Cloud Platform admin user|
|Password||SAP Cloud Platform admin user password|
|Location ID||In case there is more than one Cloud Connector in the landscape, this fields helps to identify to which Cloud Connector the Destination will talk to. In this case we leave it empty since there is only one Cloud Connector in the scenario|
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.
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:
|Name||Enter the desired name for the Destination|
|Description||It is not mandatory but useful in case you have many destinations|
|Location ID||Appears after we select Onpremise as Proxy Type. This field is useful when we have multiple Cloud Connectors connected to our subaccount and serves as a “router” for the Destinations|
|URL||Is the virtual host we configured in the SAP Cloud Connector|
|Authentication||Basic Authentication. Here we need to enter the user and password of the user used in the backend to consume the OData|
Some extra properties are needed to use this Destination from the WebIDE:
|odata_abap||for the OData functionality of Gateway (corresponds to URL path /sap/opu/odata)|
|ui5_execute_abap||for executing SAPUI5 applications from the SAPUI5 ABAP Repository (corresponds to URL path /sap/bc/ui5_ui5)|
|dev_abap||for extensibility scenarios and developing or deploying to SAPUI5 ABAP Repository (corresponds to URL path /sap/bc/adt)|
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.
Import SAPUI5 application
Now it’s time to deploy the application that will consume products from the database. There are different options on this step, we can use to deploy this application via a zip file previously dowloaded using the Archive functionality in WebIDE or just cloning the repository. For this blog we simply are going to use the archive option.
Open WebIDE from Services > Web IDE Full-Stack > Go to Service
Open Home in the left menu and select the Archive option
Browse to the specific ZIP file that contains the application code and import to the WebIDE
Wait some seconds until the Import finished message pops-up
Note that all the files and folders has been imported to WebIDE.
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 and select the “+” button under Data Sources tab.
A new window open where we need to selelct the data souce type. Choose Service Catalog and use the dropdown box to search for the destination name we used when created it, in this case shop-app-destination.
Since we are going to use a shopping application type to consume data from the EPM model in ABAP, we need to filter for this specific service only, therefore use the search box search for the service EMP_REF_APPS_SHOP_SRV.
There is the option to show service details which can tell us importanc facts like the service type, OData version, service author and service URL among others.
Use fefault model and Finish
Deploy application to SAP Cloud Platform subaccount
Now it´s time to deploy the application in the SAP Cloud Platform subaccount we want to use. We can do this by doing right click under the application name Deploy > Deploy to SAP Cloud Platform
By defautl it will open the subaccount from where we have opened the WebIDE service, if we want to use a different subaccount, we just need to choose the Get Accounts and this will search for the subaccounts where we have permissions.
After chossing deploy, a build process starts which will then deploy the application in our subaccount, it will take some seconds to finish, then we will see a successful message. We can then check from the cockpit under Applications > HTML5 Applications that the application is app and running.
Clicking over the application name will open a more detailed view where we can see the application URL, the destination and also we can stop, export or delete the app.
Execute application and price change example
Opening the Application URL will allow us to see the data being consumed from the backend.
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 recources in SAP Cloud Platform
- Create and configure a Destination and its main capabilities
- Deploy SAPUI5 application using WebIDE and create binding
Read More: SAP ABAP 7.5 Certification