Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Carlosdb
Product and Topic Expert
Product and Topic Expert
29,585

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 Plarfom Instance https://account.hana.ondemand.com/cockpit
SAP Cloud Connector https://tools.hana.ondemand.com/#cloud
ABAP Backend Service The SAP NetWeaver AS ABAP 7.51 SP02 on ASE provides a great platform for trying out the ABAP language and toolset. It is extensively pre-configured with Fiori launchpad, SAP Cloud Connector, SAP Java Virtual Machine, pre-configured backend /frontend connections, roles, and sample applications. It also includes all the standard ABAP AS infrastructure. https://cal.sap.com
SAP Fiori Reference App We will use the SAP Fiori Reference Apps to demonstrate the scenario which will cover the entire end-to-end process from design and technilogy coding principles. https://blogs.sap.com/2014/11/24/fiori-reference-apps/


 

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
Description <description>




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:
































Name RefAppsBackend. We will use this name for our destination since our Reference App comes configured with this destination name
Type HTTP
Description It is not mandatory but useful to describe the purpose of the destination
Location ID This field appears after we select Onpremise as Proxy Type. This 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
Proxy Type Onpremise
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:



WebIDEUsage: true

WebIDEUsage: odata_abap,ui5_execute_abap,dev_abap
















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)


 

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/5c3debce758a470e8342161457f...

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]
6 Comments