SAP ANGULAR HANA

Post by Namita Kalita, Sep 08, 2016.
Tweet   Share   Share

Create HANA Table by importing data from Flat File

- HANA Studio is an Eclipse-based, integrated development environment (IDE) that is used to develop artifacts in a HANA server
- HANA Studio enables technical users to manage the SAP HANA database, to create and manage user authorizations, to create new or modify existing models of data etc.
- It is a client tool, which can be used to access local or remote HANA system
- The SAP HANA studio provides an environment for Administration, Modeling and Data Provisioning. There are several predefined User Interface layouts addressing several applications types called Perspectives.
In HANA Studio every HANA system has two main sub-nodes, Catalog and Content
- To run Hana Studio Java JRE 1.6 or 1.7 must be installed in our system. The Java runtime must be specified in the PATH variable.

1.Create hana table Products.sql
- Copy the SQL statement from the Products.sql and execute it in SQL console
- Now we have created the Products.sql table in HANA system without any data inside the table
Standard Rev 90

2.Populate the table using import from Data.csv
- Switch to ‘Systems’. Go to Catalog -> TUTORIAL(Schema) -> Tables -> Products
- Right click on Products -> Import -> SAP HANA Content -> Data from Local File, Click next
Standard Rev 90
- Browse the data.csv file and select "Existing" in Target table panel of the dialog box and select the existing table and click "OK"
Standard Rev 90
Standard Rev 90
- Map the data by selecting one by one option and Click "Finish"
Standard Rev 90
Standard Rev 90
- Importing the flat file is succesfull
Standard Rev 90

Create XS project for AngularJS app

1.Create XS project
- Switch to ‘project explorer’. Go to File -> New -> Project -> "XS Project -> Give the project name (In our example it's AngularJS) Standard Rev 90
2.Create .xsapp
- Right click on your XS project(AngularJS) and create a new file call ".xsapp". Standard Rev 90
3.Create .xsaccess– copy the file content
- Right click on your XS project(AngularJS) and create a new file call “.xsaccess”
Standard Rev 90
- Share the project with the HANA system Standard Rev 90
4.service.xsodata - copy the file content
- Right click on your XS project(AngularJS) and create a new file call “service.xsodata” and click finish Standard Rev 90
- Here we're creating odata service on the Product table from TUTORIAL schema(Which we created in first tutorial) Standard Rev 90
- Activate all the files present in your xs project(AngularJS) Standard Rev 90
- Test the odata service on browser Standard Rev 90
5.create index.html for AngulerJs app
- Right click on your XS project(AngularJS) and create a new file call “index.html” and click finish Standard Rev 90

Main parts of AngularJS app

- To define AngularJs application in our Angular App we are going to define ng-app="myApp" in html tag
- AngularJS is distributed as a JavaScript file and we can define AngularJS to a web page with a script tag: "http://ajax.googleapis.com/ajax/libs/ angularjs/1.4.8/angular.min.js" on head
- Now we need to define Application Controller to our code by the tag: ng-controller="productsCtrl" to div tag(where we want to get data from the JS script).Controller is created by Javascript ObjectConstructor,it is a JavaScript Object.
- In script create a Angular Js app "var app = angular.module('myApp', [ ]);",this application will run under "div tag" of our script
- Now we need to write the actual code in "app.controller"
- Here 'productsCtrl' function is a javascript function. Standard Rev 90

Angular- with Odata service

We are declaring our table rows inside tr tag.
We will use $http to consume the odata service in AngularJS app.
Here we are using ng-Repeat directive to instantiates our template once per our row items from a collection of rows in our table.
Each repetition has access to the current repetition object.
- $http is an AngularJS service for reading data from remote servers
- AngularJS $http service makes a request to the server, and returns a response
- The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object
- $scope object is used by AngularJS to invoke the controller in the script.
- In AngularJS $scope is used to declare application variable and function.
- Then Creating myData property in scope and binding the result of the table to the property declare in the scope
1.Call the odata service using $http Standard Rev 90
- A view of AngularJS code Standard Rev 90
2.Output
- We are getting the output from the oData service
in our table as the rows we have given as
Product Id,Category,Price,Dimension Standard Rev 90
The output what we are getting is not having a good look and feel, so in the next step we will use Bootstrap to make good look and feel for the output
3.Use Bootstrap
- Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites
- Bootstrap makes front-end web development faster and easier
- It's made for folks of all skill levels, devices of all shapes, and projects of all sizes
- Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries
- With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins
- Bootstrap is open source. It's hosted, developed, and maintained on GitHub
- Millions of amazing sites across the web are being built with Bootstrap Standard Rev 90
4.Output Standard Rev 90
- After using Bootstrap the table's look and feel become good.

Namita Kalita
Developer, Logic Scale

Namita Kalita is an ambitious Software Developer for SAP Applications from India. She is specialized in SAPUI5 and custom tailored SAP FIORI. In addition to his everyday job he loves any kind of technical challenge – be it Hard- or Software related – and also devotes his free time with upcoming and trendy IT topics.