- SAP Managed Tags:
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
