The SAP HANA Cloud Platform is a development platform based on open standards. The platform provides developers with the flexibility to use frameworks/tools of their choice for application development. Let's take the case of developing the user interface. While SAP UI5 is SAP's recommended client side framework for developing business applications, HCP provides the flexibility of using any HTML5/JavaScript based framework like ReactJS, AngularJS, Bootstrap.
In this blog, we will develop an HTML5 application on HCP using:
- Angular JS as the client side framework that helps in development of UI applications by providing MVC/MVVM features,data binding etc.
- The Northwind OData service as the back-end service for fetching data (of course any RESTful APIs or web services can be used here, not necessarily OData services).
- Bootstrap as the client side framework for styling the application.
Pre-requisites:
- You should have an HCP developer(trial) account to execute the steps mentioned below.
- You should be familiar with basics of developing HTML5 applications,AngularJS and Bootstrap.
Note
- The source code for this application is available at Github. You can follow instructions provided at Github to import and run the application in your HCP trial account.
- While you can use the IDE of your choice(for e.g Eclipse with Angular JS plugins) for developing an HTML5 application on HCP, we will build this application using the SAP Web IDE which is available as a service on HCP.
Step 1: Create a simple HTML5 application using the SAP Web IDE
- Using the SAP Web IDE, create a new HTML5 application. Right click on the Workspace node, select the New > Folder menu. Provide the Folder Name as "angularnorthwindapp".
- Create the app descriptor file. Right click on the angularnorthwindapp node, select the New > File menu. Provide the File Name as "neo-app.json".
- Insert the following content into the neo-app.json file and save it.
neo-app.json
{
"welcomeFile": "index.html"
}
- Create a file by name "index.html". Insert the following content and save.
index.html
<!DOCTYPE html>
<html>
<body>
<h1>Hello World from HCP</h1>
</body>
</html>
- Preview the application by hitting the Run button(or press Alt+F5). You should see a "Hello World" text in the Preview page.
Step 2: Hello HCP from AngularJS!
Next we will add some AngularJS code into the application.
- Bootstrap AngularJS into the application by adding the following script tag into the index.html.
index.html
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
- Replace the content of the index.html file with the content below and save. Here the ng-model and ng-bind directives provided by AngularJS for data binding are used.
index.html
<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<body>
<div ng-app="nwApp">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
- Refresh the Preview page. Enter something in the input field(For e.g. 'Hello HCP from AngularJS') and you should see it appear as a text below due to the data binding capabilities of AngularJS.
Step 3: Fetch data from the OData service
Next step is to fetch data from the back-end by making an HTTP GET call to the Northwind OData service. This will be done using HTTP destinations in HCP.
- Create a destination file for the northwind service in the HCP cockpit.
northwind
Description=Northwind OData Services
Type=HTTP
Authentication=NoAuthentication
WebIDEUsage=odata_gen
Name=northwind
WebIDEEnabled=true
CloudConnectorVersion=2
URL=http://services.odata.org
ProxyType=Internet
WebIDESystem=Northwind
- Add a route for the northwind service destination by inserting the following code into the neo-app.json file.
neo-app.json
{
"welcomeFile": "index.html",
"routes": [
{
"path": "/destinations/northwind",
"target": {
"type": "destination",
"name": "northwind"
},
"description": "northwind"
}
]
}
- To keep the business logic separate from the UI, create a file named "main.js" under the angularnorthwindapp folder. Insert the code from below.
- This code makes an AJAX call to the northwind service using the $http service from AngularJS. Note that the northwindURL uses the /destinations/northwind/ path defined in the neo-app.json file.
- The response from the server is processed and added as an array of invoices to the $scope object (provided by AngularJS). This will be used for data binding in the UI in the next step.
main.js
angular.module("myapp", []).controller('NorthwindController',['$scope','$http', function($scope,$http) {
var northwindURL='/destinations/northwind/V4/Northwind/Northwind.svc/Invoices?$top=15';
$http({
method: 'GET',
url:northwindURL
}).then(function successCallback(response) {
var results = response.data.value;
var invoices=[];
_.each(results,function(result){
var invoice={};
invoice.product = result.ProductName;
invoice.unitprice = result.UnitPrice;
invoice.quantity= result.Quantity;
invoice.totalcost = invoice.unitprice*invoice.quantity;
invoices.push(invoice);
});
$scope.invoices=invoices;
}, function errorCallback(response) {
alert("Error while fetching invoices"+ response);
});
}]);
- Include the main.js file in the index.html
index.html
<script src="main.js"></script>- Bind the data to the UI by looping through the invoices object using the ng-repeat directive.
index.html
<body ng-app = "myapp">
<div ng-controller = "NorthwindController" >
<div class="container">
<h3>Invoices</h3>
<div ng-repeat="invoice in invoices">
<h3>{{invoice.quantity}} X {{invoice.product}}</h3>
<h3>{{invoice.unitprice}}</h3>
<h3>{{invoice.totalcost}}</h3>
</div>
</div>
</div>
</body>
- Refresh the Preview page. At this point, you should see the invoices on the page with no formatting/styling. Understandably the next step is to add some styling to the UI.
Step 4: Style the application using Bootstrap
- Firstly, bootstrap Bootstrap :smile: by adding the script tags for Bootstrap and jQuery(Bootstrap has a dependency on jQuery).
index.html
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
- Use the basic table CSS classes from Bootstrap to style the table.
index.html
<div ng-controller = "NorthwindController" >
<div class="container" style="margin-top:80px;">
<h3><strong>Invoices</strong></h3>
<table class="table table-hover table-bordered" style="margin-top:30px">
<thead>
<tr>
<th>Product</th>
<th>Unit Price</th>
<th>Total Cost</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="invoice in invoices">
<td>{{invoice.quantity}} X {{invoice.product}}</td>
<td>{{invoice.unitprice}}</td>
<td>{{invoice.totalcost}}</td>
</tr>
</tbody>
</table>
</div>
</div>
- Refresh the Preview page. You should see a page with a table of Invoices as shown below:
Step 5: Activate the application to make it accessible via a public URL
- Deploy the HTML5 application to HCP by right-clicking on the angularnorthwindapp and selecting Deploy > Deploy to HANA Cloud Platform. In the Deploy Application dialog, leave the defaults and click on the Deploy button.
- In the Successfully Deployed dialog, click on the 'Open the active version of the application' link. You should see the same page as above, with a public URL(available on the internet) that can be shared.
- The deployed application would be accessible on the following URL:
https://angularnorthwindapp-pXXXXXtrial.dispatcher.hanatrial.ondemand.com.
Note: Replace pXXXX with the SCN User ID that you provided during registration.
And you're done! You have a basic AngularJS application running on HCP.
- SAP Managed Tags:
13 Comments
