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
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
- Browse the data.csv file and select "Existing" in Target table panel of the dialog box and select the existing table and click "OK"
- Map the data by selecting one by one option and Click "Finish"
- Importing the flat file is succesfull
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)
- Right click on your XS project(AngularJS) and create a new file call ".xsapp".
3.Create .xsaccess– copy the file content
- Right click on your XS project(AngularJS) and create a new file call “.xsaccess”
- Share the project with the HANA system
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
- Here we're creating odata service on the Product table from TUTORIAL schema(Which we created in first tutorial)
- Activate all the files present in your xs project(AngularJS)
- Test the odata service on browser
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
Main parts of AngularJS app- To define AngularJs application in our Angular App we are going to define ng-app="myApp" in html tag
- 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"
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
- A view of AngularJS code
- We are getting the output from the oData service
in our table as the rows we have given as
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
- 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
- After using Bootstrap the table's look and feel become good.