Integrating AngularJS in SAP System: the next big merger for an intuitive UI

Integrating AngularJS in SAP System the next big merger for an intuitive UI
Mobolutions
November 23, 2020

by Mobolutions in ,,,,

Choosing the right front-end technology and mature toolsets is important to build fast, responsive SAP applications. One such popular, very powerful JavaScript client-side framework is AngularJS, which provides a rich set of out-of-the-box controls and flexible functions.

This blog will give the readers a detailed idea and examples of how efficiently to consume SAP OData services such as SAP Net weaver Gateway or SAP Cloud For Customer using AngularJS. SAP developers who develop an SAP Fiori application using OData Model are familiar with this, but it’s another matter when a developer has to call SAP OData services from different clients or server-side runtimes.

Let’s dive deep to understand how the users can read, write, modify, delete requests using AngularJS MKO. Integrating AngularJS with SAP’s UI frameworks such as SAPUI5 and SAP Fiori brings out the best from both and provides intuitive user experience with SAP applications.

Why SAPUI5&AngularJS?

  • Although SAPUI5 and SAP Fiori offer robust functionality, they may not always be the choice when developing client applications on top of SAP/HCP/Etc. But AngularJS is highly flexible as the user is not required to use only the existing components to enhance the look and feel.

You can use these tools to Create Angular applications in SAP WEB Ide:

  • HTML
  • JavaScript
  • Bootstrap 4
  • Angular JS

Angular JS is a client-side framework and it provides MVC features, data binding etc. to help develop extensive UI applications.

Develop an AngularJS application on the SAP HANA Cloud Platform

If developers want to develop an AngularJS app on the SAP HANA platform, they can have flexible tools and framework of their choice. And they can efficiently do that if they,

  • have an HCP developer(trial) accountto execute the following steps.
  • Basic knowledge ofdeveloping HTML5 applications, AngularJS, and Bootstrap.

Follow the following steps to develop the AngularJS app.
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 “first_angularProject”.
  • Create the app descriptor file. Right-click on thefirst_angularProject, 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.

{
"filename": "index.html"
}

Step 2:

  • Create a file by name “index.html”. Insert the following content and save.

{
<! DOCTYPE html>
<Html>
<Body>
<h1>Hi this is my first angular app!!</h1>
</body>
</html>
}

Step 3:

  • Hit the Run button for Preview the application or run the Index.html file. A text – “Hi this is my first angular app!!” – will appear in the Preview page.

Step 4:

  • 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.

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

Step 5:

  •  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.

<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script><body>
<div ng-app="myapp">
<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>

Step 6:

  •  Refresh the page. When you enter something in the input field (E.g. ‘Hello this is my first AngularJS application’), the text can be seen. It’s achieved through the data binding capabilities of AngularJS.

Step 7:

  • Fetch data from the OData service
  • Make an HTTP GET call to the Dev OData service to fetch data from the back-end. This will be done using HTTP destinations in HCP.
  • Create a destination file for the Dev service in the HCP cockpit.

{
"path": "/sap/opu/odata",
"target": {
"type": "destination",
"name": "DEVIDES",
"entryPath": "/sap/opu/odata"
},
"description": "dides:8009" }]

  • To keep the business logic separate from the UI, create a file named “notification.js” under the firstangularProject folder. Insert the code from below.
  • This code makes an AJAX call to the dev service using the $http service from AngularJS. Note that the dev uses the /destinations/dev/ 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 following step.
angular.module("myapp", []).controller(helloworld,['$scope','$http', function($scope,$http) {
var ursl = '/sap/opu/odata/sap/ZPRJ_PM_APPS_IH_SRV/ManageNotificationListSet';
$http({
method: 'GET',
url: ursl
}).then(function successCallback(response) {
var results = response.data.d.results;
var vhigharray = [];
var higharray = [];
var medarray = [];
var lowarray = [];
var Location = [];
for (var i = 0; i<results.length; i++) {
var fuc = {};
fuc.pro = results[i].Notification;
fuc.desc = results[i].Description;
fuc.lat = results[i].PriorityType;
fuc.lon = results[i].FunctionalLocation;
fuc.wrkcntr = results[i].PltWorkCtr;
fuc.eqi = results[i].EquipmentNumber;
fuc.protext = results[i].Priority;
Location.push(fuc);
}
for (var i = 0; i<Location.length; i++) {
this.vh = Location[i].protext;
if (this.vh === "1") {
vhigharray.push(this.vh);
} else if (this.vh === "2") {
higharray.push(this.vh);
} else if (this.vh === "3") {
medarray.push(this.vh);
} else if (this.vh === "4") {
lowarray.push(this.vh);
} else {
}
}
$scope.Location = Location

  • ·        Include the main.js file in the index.html

<script src="notification.js"></script>

  • Bind the data to the UI by looping through the invoices object using the ng-repeat directive.

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Notification No</th>
<th>Description</th>
<th>Priority Text</th>
<th>Functional Location</th>
<th>Work Center</th>
<th>Equipment Number</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Notification No</th>
<th>Description</th>
<th>Priority Text</th>
<th>Functional Location</th>
<th>Work Center</th>
<th>Equipment Number</th>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="fuc in Location | filter : search | orderBy : 'pro'| limitTo : 50">
<td>{{fuc.pro}}</td>
<td>{{fuc.desc}}</td>
<td>{{fuc.lat}}</td>
<td>{{fuc.lon}}</td>
<td>{{fuc.wrkcntr}}</td>
<td>{{fuc.eqi}}</td>
</tr>
</tbody>
</table>

When refreshing the Preview page, the invoices on the page will be with no formatting/styling. Add some styling to the UI in the next step.

Step 8:

  • Use Bootstrap to style the application
  • Finally, add Bootstrap  by adding the script tags for Bootstrap and jQuery(Bootstrap has a dependency on jQuery).

<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">


Integration-of-Angular-JS-in-SAP-Screen

Embedding AngularJS with SAP Fiori makes the process of customizing and building responsive apps easier and more efficient. SAP/Angular comes packed with extensible features so that a developer can extend, control and define her/his own custom controls. The end result is an accelerated development lifecycle and the platform delivers rich user experiences, ease of access, speed and productivity.

Leave a comment

Your email address will not be published. Required fields are marked *