The Sap Hana Angularjs

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.
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 “InterviewScheduler“.
 Create the app descriptor file. Right click on the InterviewScheduler 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.8/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.8/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
 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 “app.js” under
InterviewScheduler >> JS (create JS folder in InterviewScheduler folder first then create app.js
under JS).
 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.
app.js
var app = angular.module("myApp", []); // Creating a module

var myCtrl = function($scope,$http){ // Creating a controller
var EmployeeURL='/destinations/northwind/V4/Northwind/Northwind.svc/Employees';
var SupplierURL='/destinations/northwind/V4/Northwind/Northwind.svc/Suppliers';
$http({
method: 'GET',
url:EmployeeURL
}).then(function successCallback(response) {
$scope.employees= response.data;
$scope.selUser=function(user){
$scope.selected_user=user;
};
}, function errorCallback(response) {
alert("Error while fetching invoices"+ response);
});
$http({
method: 'GET',
url:SupplierURL
}).then(function successCallback(response) {
$scope.suppliers= response.data;
$scope.selSupplier=function(supplier){
$scope.selected_supplier=supplier;
};
}, function errorCallback(response) {
alert("Error while fetching invoices"+ response);
});
};
app.controller("myController", myCtrl); // registering controller with module.
 Include the main.js file in the index.html
index.html
<script src="app.js"></script>
 Bind the data to the UI by looping through the invoices object using the ng-repeat directive.
index.html
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script type="text/javascript" src="/JS/app.js"></script>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript" ></script>
<link href="https://netdna.bootstrapcdn.com/twitter-
bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css"/>
<link href="/CSS/main.css" rel="stylesheet">
</head>
<body ng-controller = "myController">
<div class="container-fluid">
<div class="row-fluid">
<div class="row-field">
<div class="span10 offset1">
<h1 class="well">
Interview Scheduler
</h1>
<div class="span3">
<p class="text-info">
Please select the member to schedule the interview.
</p>
<p>
Search: <input ng-model="search1">
</p>
<table class="table table-bordered">

<tr class="well">
<td class="tdCenter" colspan="4" >
<b>Available list of Candidates for
Interview</b>
</td>
</tr>
<tr ng-class="{sel: supplier === selected_supplier}"
ng-repeat="supplier in suppliers.value | orderBy:'name' | limitTo : '10' |
filter:search1" ng-click="selSupplier(supplier)">
<td>
<b>{{supplier.ContactName}}</b><br />
{{supplier.ContactTitle}}
</td>
</tr>
</table>
</div>
<p class="text-info">
Please select the Panel member for the interview.
<br />
</p>
<p>
Search: <input ng-model="search">
</p>
<table class="table table-bordered">

<tr class="well">
<b>Available panel for Interview</b>
</td>
</tr>
<tr ng-class="{sel: employee === selected_user}" ng-
repeat="employee in employees.value | orderBy:'name' | limitTo : '10'| filter:search"
ng-click="selUser(employee)">
<td>
<b>{{employee.FirstName}}
{{employee.LastName}}</b><br />
{{employee.Title}}
</td>
</tr>
</table>
</div>
<br/><br/><br/><br/>
<p>
Seleted Employee : <textarea disabled>
{{selected_supplier.ContactName}}</textarea>
</p>
<br/>
<p>
Panel Member : <textarea disabled>{{selected_user.FirstName}}
{{selected_user.LastName}}</textarea>
</p>
<br/>
<p>
Selet Date : <input type="date" ng-model="date">
</p>
<p>
Select Time : <input id="time" type="time" ng-model="time"/>
</p>
<button
class="btn btn-block btn-success"
ng-click="showTable = !showTable">
Schedule Interview
</button>
<button
class="btn btn-block btn-danger"
onclick="window.location.href='index.html'">
Reset all
</button>
<br/><br/><br/>
<table class="table table-bordered" ng-

show="showTable">
<tr class="well">
<b>Interview Scheduled with below
details</b>
</td>
</tr>
<tr>
<td>
<b>Candidate name :
{{selected_supplier.ContactName}}</b><br />
<b>Panel Member :
{{selected_user.FirstName}} {{selected_user.LastName}} </b>
<br/>
<b>Date : {{date | date}} </b>
<br/>
<b>Time : {{time | date : 'hh:mm:ss a'}}
</b>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
 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 custom CSS
 Firstly, bootstrap Bootstrap by adding the script tags for Bootstrap and jQuery(Bootstrap
has a dependency on jQuery).
main.css
.table td.tdRight {
text-align: right;
}
.table td.tdCenter {
text-align: center;
}
.table-nonfluid {
width: auto;
}
table { border-collapse: collapse; }

td, th { border: 1px solid #999; }
.col-1 { width: 200px; }
.col-2 { width: 300px; }
.sel { background-color: #bce65e; }
.desc { background-color: #d1e6ac; }
h1 {
text-align: center;
}
 Use the basic table CSS classes from Bootstrap to style the table.
 Refresh the Preview page. You should see a page like 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 InterviewScheduler 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:// interviewscheduler-pXXXXXtrial.dispatcher.hanatrial.ondemand.com.
Note: Replace pXXXX with the SCN User ID that you provided during registration.

The Sap Hana Angularjs

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

The Sap Hana Angularjs

Enviado por

Direitos autorais:

Formatos disponíveis

The SAP HANA Cloud Platform is a development platform based on open standards.

In this blog, we will develop an HTML5 application on HCP using:

Step 2: Hello HCP from AngularJS!

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

Step 3: Fetch data from the OData service

var app = angular.module("myApp", []); // Creating a module

 Include the main.js file in the index.html

<script type="text/javascript" src="/JS/app.js"></script>

<table class="table table-bordered">

<table class="table table-bordered">

<div class="span3 offset1">

<table class="table table-bordered" ng-

Step 4: Style the application using custom CSS

table { border-collapse: collapse; }

Você também pode gostar