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
- Eclipse Juno : http://www.eclipse.org/juno/
- SAPUI5 plugin for Eclipse Juno :https://tools.hana.ondemand.com/#sapui5
- SAP Cloud for Eclipse Juno : https://tools.hana.ondemand.com/#cloud
- SAP Cloud connector in your private network : https://tools.hana.ondemand.com/#cloud
- Create an account in the SAP HANA Cloud Platform: https://account.hanatrial.ondemand.com/
Steps
- Expose your data as JSON by using a BSP application
- Configuring your SAP Cloud Connector
- Create your SAPUI5 application
- Create a Servlet to forward the JSON
- 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
- SAP Managed Tags:
12 Comments
