Expose data from the backend to the Cloud without Gateway

Hi All,

When creating an application in the SAP Cloud, it is nice to create an application which uses data from your SAP Backend sytem. Mostly this SAP Backend system is only accessible from your private network. To access your SAP System in the cloud, u can setup a SAP Cloud connector. With this Cloud connector it is possible to access your SAP system from in the Cloud. This setup is connected to just one SAP Cloud account en secure.

Normally, you should have a SAP Gateway system in your network for exposing your data as OData. But it is not necessary, you can use portal, a BSP application, SICF Service, …. for exposing data. In our example, we will use a BSP application.

Requirements

1. Eclipse Juno : http://www.eclipse.org/juno/
2. SAPUI5 plugin for Eclipse Juno :https://tools.hana.ondemand.com/#sapui5
3. SAP Cloud for Eclipse Juno : https://tools.hana.ondemand.com/#cloud
4. SAP Cloud connector in your private network : https://tools.hana.ondemand.com/#cloud
5. Create an account in the SAP HANA Cloud Platform: https://account.hanatrial.ondemand.com/

Steps

1. Expose your data as JSON by using a BSP application
2. Configuring your SAP Cloud Connector
3. Create your SAPUI5 application
   1. Create a Servlet to forward the JSON
   2. Create the front-end

Expose your data as JSON by using a BSP application

Create a BSP application

Add an attribute for passing data from the controller to the front-end of the BSP

You have to load the data in the OnCreate event and convert it to JSON.

*********** END OF DATA ********
 DATA lt_flight TYPE TABLE OF sflight.
 ************* JSON OUT TABLE **************
 SELECT * FROM sflight INto TABLE lt_flight UP TO 20 ROWS.
 CALL FUNCTION 'Z_JSON_OUT'
   IMPORTING
     json = lv_json
   TABLES
     itab = lt_flight.
CONCATENATE '{ "FLIGHTS": ' lv_json '}' INTO lv_json.

Show the JSON in the BSP

<%@page language="abap"%>
 <%@extension name="htmlb" prefix="htmlb"%>
<%= lv_json %>

Configure the BSP application as anonymous logon (not required, is just for testing)

Go to SICF

Setting up the Cloud Connector

You can find the instruction for the installation of the Cloud connector at: https://tools.hana.ondemand.com/#cloud

Browse to the cloud administration:

Log in with administrator and check the status of the Cloud Connector

Connect the Cloud Connector to your Hana Cloud trial account

Settings–> Configuration

account name = P****trial

user name = SAP user

If needed, configure your proxy in the HTTPS Proxy tab.

Goto Acces Control –> Resources –> add

Fill in the address of the SAP system with the BSP application and the port number

You can chose the virtual name, but remember that it’s the name that you use in the configuration of your destination in Eclipse

Define the path that is accessible from the outside:

Create SAPUI5 application in the Cloud

Setting up eclipse for SAPUI5 in the cloud:https://tools.hana.ondemand.com/#cloud

     Configurate the connection to your backend

          Configure your destination connectivity. These settings are defined in the Cloud Connector, which will come at the end of the blog. For the URL, the virtual name is used from the Cloud connector. You can also configure this directly in the cloud.

In the SAP HANA Cloud Platform it is possible to do the same configuration

https://account.hanatrial.ondemand.com

     Create your SAPUI5 Application

          Something I almost forgot to mention, you need to set your build settings of your SAPUI5 project. This is required for using servlets in your SAPUI5 project.

          Add the following code to your web.xml in your SAPUI5 application

 <resource-ref>
    <res-ref-name>pingdest</res-ref-name>
    <res-type>com.sap.core.connectivity.api.http.HttpDestination</res-type>
  </resource-ref>

     Create servlet which will act as a proxy

Create servlet by right clicking on the package –> new –> servlet

          In the servlet you add the following code:

public class BackendServlet extends HttpServlet {
          private static final long serialVersionUID = 1L;
    /**
     * Default constructor.
     */
    public BackendServlet() {
        // TODO Auto-generated constructor stub
    }
          /**
           * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
           */
          protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                    // TODO Auto-generated method stub
                              try {
                                         //response.getWriter().println(querystring);
                                        // access the HttpDestination for the resource "pingdest" specified in the web.xml
                                        Context ctx = new InitialContext();
                                        HttpDestination destination = (HttpDestination) ctx.lookup("java:comp/env/pingdest");
                                        HttpClient createHttpClient = destination.createHttpClient();
                                         HttpGet get = new HttpGet("export_to_cloud.html");
                                        HttpResponse resp = createHttpClient.execute(get);
                                        HttpEntity entity = resp.getEntity();
                                        String respToString = EntityUtils.toString(entity);
                                        response.getWriter().println(respToString);
                              } catch (DestinationException e) {
                                        throw new RuntimeException(e);
                              } catch (NamingException e) {
                                        throw new RuntimeException(e);
                              }
          }
          /**
           * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
           */
          protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                    // TODO Auto-generated method stub
          }
}

          We use the name of the configuration “pingdest” to access the configuration. Then we call the BSP application by using just the name of the applciation The name of the html page is added to the url in the configuration. So just the name is enough to call the BSP and write the output of the BSP application as HTML.

     You can already test this by browsing to your cloud account and add the project + / + name of the servlet:

     http://youraccount.nwtrial.ondemand.com/SAPUI5Cloud/BackendServlet

     Create Front-end

          We are just going to create a table, add the following to your SAPUI5 view:

 var oTable = new sap.ui.table.Table({editable:true});
        var oControl = new sap.ui.commons.TextView({text:"{CARRID}"}); // short binding notation
        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Carrid"}), template: oControl }));
        var oControl = new sap.ui.commons.TextView({text:"{CONNID}"}); // short binding notation
        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Connid"}), template: oControl }));
        var oControl = new sap.ui.commons.TextView({text:"{FLDATE}"}); // short binding notation
        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Flight date"}), template: oControl }));
        var oControl = new sap.ui.commons.TextView({text:"{PRICE}"}); // short binding notation
        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Price"}), template: oControl }));
        var oControl = new sap.ui.commons.TextView({text:"{CURRENCY}"}); // short binding notation
        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Currency"}), template: oControl }));
        var oControl = new sap.ui.commons.TextView({text:"{PLANETYPE}"}); // short binding notation
        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Planetype"}), template: oControl }));
        var oControl = new sap.ui.commons.TextView({text:"{SEATSMAX}"}); // short binding notation
        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "SEATSMAX"}), template: oControl }));
        var oControl = new sap.ui.commons.TextView({text:"{SEATSOCC}"}); // short binding notation
        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "SEATSOCC"}), template: oControl }));

     Next do an ajax request to the servlet and bind the data to the table:

var oModel = new sap.ui.model.json.JSONModel();
        $.ajax({
                  dataType: "json",
                            url: "BackendServlet,
                            }).done(function ( data )
                            { 
                                      oModel.setData(data);
                                      oTable.setModel(oModel);
                                oTable.bindRows("/FLIGHTS");
                                oTable.placeAt("content");
                            });

You can find the full code of the index page in the attachments.

Testing

Last but not least, you can test you’re application in the Cloud! From everywhere!

Go to your cloud account

Start your application

You can find more information at: https://help.hana.ondemand.com/help/frameset.htm?e76f9e75bb571014a7218bcd30a8771b.html

Kind regards,

Wouter