How to create your own web application using SAP HANA UI Toolkit for Information Access
A few months ago I started developing the content for a new workshop called Get your Hands-on IT for SAP HANA™. This is a two days guided workshop providing you with everything you need to improve your practical development skills, like system access to a SAP HANA™ system in Amazon Web Services prepared with rich sample data and exercises that will expose you to more complex challenges than traditional training classes can provide. When we started thinking about which topics we wanted to cover in the workshop we decided to expose SAP HANA™ functionality that is usually not covered in standard trainings, so the UI Toolkit for Information Access was a perfect match.
The UI Toolkit for INA is basically a set of widgets that can be used in Web Applications to provide real time access to information stored in a SAP HANA™ database. You can also use the widgets to provide faceted search features for structured and unstructured text data. For those not familiar with this term (like I was until recently), faceted search means returning results grouped by attribute values instead of a flat list. These groups (facets) enable navigation, filtering, refining and visualization of the dimensions of the result set.
The toolkit is based on HTML5 and JavaScript libraries such as JQuery/JQueryUI, d3 (Data Driven Documents), Tempo and FancyBox (in case this means something for you). The widgets consume “search enabled” Attribute Views. Every time you create a “search enabled” Attribute View, the SAP HANA™ REST service automatically creates an Entity Set, so to be more precise, the widgets consume Entity Sets thru the SAP HANA™ REST service whose responses are provided in JSON format.
Enough with the theory, let’s get our hands dirty. To implement the UI Toolkit in your own site we will need to complete the following steps:
- Install the UI Toolkit
- Prepare Your Source Data
- Set up a Development Environment
- Create Your Own Site
Install the UI Toolkit
- Download the Delivery Unit from SAP Service Marketplace
- Import the Delivery Unit
- Open SAP HANA™ Studio Modeler
- On the Quick Launch tab page, choose Content -> Import
- Select HANA Content -> Delivery Unit and choose Next
- Select Client and browse the DVD or the download folder for the REPO_INA_UITOOLKIT.tgz delivery unit
- Select both Actions and choose Finish
- Perform the same import procedure for the REPO_INA_SERVICE.tgz delivery unit
- Check the Packages were imported correctly
- Register and Activate the Service
- Switch to the SAP HANA™ Studio Administration Console and select your database instance
- Choose the Configuration tab page and expand xsengine.ini -> application_container
- Double-click the application_list line and, in the System column, add the entry SearchServer
- To restart the XSEngine, choose the Landscape tab page
- From the context menu of the xsengine service, choose Kill. The service stops completely and restarts automatically
-
Download the Demo Data from SAP Code Exchange and import it to your database. This step is optional, it is not necessary to get the UI Toolkit running, only if you want to check out the demo site. In our case, we won’t be working with the demo site so you can skip it for now
To test the service was successfully installed you can open the demo site, in case you didn’t installed the demo data you should still be able to log into the site, but of course no data will be displayed:
Revision 33 or lower:
http://<HANAhost>:80<instance>/sap.bc.ina.demos.epm/search.html
Revision 34 or higher
http://<HANAhost>:80<instance>/sap/bc/ina/demos/epm/search.html
Prepare Your Source Data
The first thing we need to do is create a full-text index in each table column that contains human readable text data. To create a full-text index in SAP HANA™ Studio, execute the following SQL command:
CREATE FULLTEXT INDEX <index_name> ON <table_name>(<column_name>)
To create a “search enabled” Attribute View the first thing you need to do is change the configuration of you SAP HANA™ Studio:
- Log on to the SAP HANA™ studio with user SYSTEM
- In the menu bar, choose Window -> Preferences -> Modeler -> Search Options
- Select the “Enable Search Attributes” option and choose OK
Once this is complete, you can go ahead and create the Attribute View that will be consumed by the widgets. For each attribute in the Attribute View, make sure you follow the steps below:
- In the Output pane, select the attribute.
Note: The searchable attributes must not be calculated attributes nor have lower case letters in their names. - In the lower area of the Properties pane, select the Information Access category.
- Set the Freestyle Search property to True.
In the Information Access category, you can make search-specific settings. The Weights for Ranking setting (between 0.0 and 1.0, default 0.0) influences the ranking of items in the results list. The higher the weight of the attribute, the higher up in the list an item with a hit in this attribute is positioned. The Fuzziness Threshold setting is not in operation yet.
To make sure you will be able to connect the widgets to your newly created Attribute View, open the following URL in a Web Browser:
Revision 33 or lower:
http://<HANAhost>:80<instance>/sap.bc.ina.service.v1
Revision 34 or higher:
http://<HANAhost>:80<instance>/sap/bc/ina/service/v1
You should see a list of Entity Sets that are exposed thru the SAP HANA™ REST Service, the entity set name contains the name of the SAP HANA™ package, the name of the view, and the string “Collection”:
<package_name>/<view_name>Collection
To test the entity set, open the following URL:
Revision 33 or lower:
http://<HANAhost>:80<instance>/sap.bc.ina.service.v1/<entityset>
Revision 34 or higher:
http://<HANAhost>:80<instance>/sap/bc/ina/service/v1/<entityset>
Set Up a Development Environment
To be able to create our own site we will need to set up a development environment:
- Make sure the SAP HANA™ Client is installed on your machine
- Add the path to the hdbclient folder to the following environment variables: PATH on Windows and LD_LIBRARY_PATH on Linux. This step is necessary to be able to execute SAP HANA™ Client commands from any folder
- Create a new folder on your local machine and make it a SAP HANA™ development workspace by executing the following command inside this folder:
Revision 33 or lower:
regi create workspace –user=<HANAuser> –host=<HANAhost>:<SQLport>
Revision 34 or higher:
hdbuserstore SET <mykey> <HANAhost>:<SQLport> <HANAuser> <password>
regi create workspace –key=<mykey> - Mark the UI toolkit packages as relevant for development by execute the following command:
regi track sap.bc.ina - Copy the UI toolkit packages and files to your local workspace by executing the regi checkout command.
- In your workspace, the package structure is represented as folders containing the HTML, CSS, JS files, and graphics
Create Your Own Site
To create your own site, go to the demos folder, copy the epm folder, rename it, for example to myapp, and work in the new folder only. Now you can start manipulating the site or the toolkit using a Web development editor of your choice. We will focus on the search.html file under the myapp folder and the HTML files under the templates folder.
Search.html
This is the home page of your site. Inside you will find the implementation of the widgets, so let’s start reviewing the code for each one and how to customize them.
Work Area Widget
The Work Area widget will allow you to connect you site to your Source Data by specifying your entity set in the data-entityset parameter.
Search Box Widget
Chart Widget
The most important thing here is to update the data-dimension parameter to the column from your entity set to be displayed
Result List Widget
Here you will need to change the data-responseattributes parameter to specify all the columns from your entity set that you want to display in the Result List
Now that we are done with the search.html file, let’s move forward with the HTML files under the templates folder
Templates.html
The HTML files under the templates folder will be used by the Result List Widget to display the data in your site. You will need to update the html files that are listed in the search.hmtl file in the templates section
In this case, updating the products.html, products_small.html and product_detail.html files will be enough. In these files you will need to specify the attributes that you want to display in the results list and in which way do you want them displayed. Make sure that every attribute you use in these files was specified in the data-responseattributes parameter of the Result List Widget.
Once you are done making all the modifications, execute the regi commit command to commit the changes back to the SAP HANA™ server and then the regi activate command. The URL to open your new UI in a browser is the following:
Revision 33 or lower:
http://<HANAhost>:80<instance>/sap.bc.ina.demos.myapp/search.html
Revision 34 or higher:
http://<HANAhost>:80<instance>/sap/bc/ina/demos/myapp/search.html
Below you can see a screenshot of the site that I created. My page is showing Airports by Country, State and City.
Have Fun!
Follow me on Twitter: @LukiSpa
Great post! Thanks for sharing with the community! 🙂
Thanks for posting but a final screenshot of your solution would be very helful to see how it is going to come up.
Vamsi
Done! Thanks for your comment 🙂
Great blog!
But a question...
Now I can connect but shows a few rows
Sorry I chaned my comment to blog.
I am using Chrome, restarted HANA it shows now. But I got only 10 rows. When I analyze url for demo I see lots of query string. Any reference to this query strings?
So basically what you are doing is you are querying an SAP HANA OData Service. The service is always going to return 10 rows by default because the idea is that you divide into pages your result set. If you would like to change the amount of rows that you get, what you can do is use query string $top=X where X is the amount of rows that you would like to get. Here's an example:
http://<HANA_HOST>:<PORT>/sap/bc/ina/service/v1/lucas/ATV_AIRPORTS_CORCollection?$top=50
So if you combine the two query string top and skip you can divide your result set into pages. For example:
Page 1:
http://<HANA_HOST>:<PORT>/sap/bc/ina/service/v1/lucas/ATV_AIRPORTS_CORCollection?$top=50
Page 2:
http://<HANA_HOST>:<PORT>/sap/bc/ina/service/v1/lucas/ATV_AIRPORTS_CORCollection?$top=50&$skip=50
Page 3:
http://<HANA_HOST>:<PORT>/sap/bc/ina/service/v1/lucas/ATV_AIRPORTS_CORCollection?$top=50&$skip=100
Thanks for usefull info, that's the what i am looking for! Thanks a lot!
Sorry but this blog exists here but it is not blog: http://help.sap.com/hana/ui_toolkit/index.html
What you can find in the official documentation is how to install the UI toolkit and how to set up a dev environment, which I summarized in here, but my blog post goes beyond what you can find in the official documentation. This is a step by step guide of how to create your own web application, that you will not find in the official documentation.
You are right, I missed that point, creating new web application. Sorry again.
No worries! 🙂
Hi Lucas,
great post.
We managed to run HANA on EC2, but we don't find a place to download the SAP HANA UI TOOLKIT. In our Download catalog is no download possibility of SAP HANA UI TOOLKIT indicated ... what do we do wrong? Restricted access due to missing rights?
Thanks for your help in advance!
Lars
Hi, I was able to find it today by navigating thru the following links:
Hope you find, otherwise let me know....
Hi,
You must have a HANA license to download packages.
Thanks for the links Lucas, but there is still the message "No data available".
Probably Erhan is right: we need a HANA license.
But where to find it, when running HANA on AWS ... did you all have your "own" HANA Server?
We are so happy to get HANA installed 🙂 and we thought there were no restrictions in using it on AWS.
Any other ideas on how to get the HANA UI FOR INA 2.0?
Thanks in advance, Lars
Hi Lars,
You can contact with your local SAP sales guy. He/she can help you.
We are a SAP software and technology partner ... never spoke to a sales guy and my partner manager just changed. Thanks Erhan, will speak to him!
Hello lucas,
I am trying out the creation of information access toolkit, i am able to find all the entity sets in the url of form : http://<HANAhost>:80<instance>/sap/bc/ina/service/v1/<entityset>, but when i select my own entity set it throws error saying :
{
"error": {
"code": "258",
"message": "OData: Not authorized"
}
}
could you pls guide me how shud i resolve the issue !!
Fyi the url is : http://xml1009:8000/sap/bc/ina/service/v1/tmp.i033055/TESTCollection. My entity set is tmp.i033055/TESTCollection.
Best Regards,
Prasanna.
Hi Lars, seems to be an authorization issue. What user are you using when trying to open your entity set, is it the same user that you used when creating the Attribute View? Did you try using the SYSTEM user?
Hi Lucas,
thanks for answering again ... but I think you meant Prasanna? 😉
the best, Lars
haha...my head is a mess! 🙂
Hello Lucas,
To open my entity set i used the same user which i used to create the attribute view. I did not try with the SYSTEM user, Is it mandatory to have the SYSTEM user to view the entity set..???
Best Regards,
Prasanna
Hi Parsanna, I would try using the SYSTEM user to make sure it works. If it does then you are most likely missing some authorization to be able to call the entity set. I'm no authorization expert, but I know someone else in SCN had the same issue and opened a message with SAP to find out which authorization object he was missing, so I asked him if he got a reply from them. Let's see if he comes back.
http://www.experiencesaphana.com/thread/1674
Cheers
Hello lucas,
Greetings!!!
Now i am able to see the complete entity set when i go to URL : http://xml1009:8000/sap/bc/ina/service/v1/tmp.i033055/TESTCollection it was b'coz of some authorization issue i was unable to see it. 🙂 .
But now the issue is when i hit the html page of UI toolkit ie. http://xml1009:8000/sap/bc/ina/demos/epm/search.html it only shows a blank page with headings Bar chart, pie chart. 🙁 so could you help me out.
Hi Prasanna, sorry for the delay in getting back to you. Which browser are you using? I found that some versions of IE won't work. Firefox 10 is the only version officially supported, but I use Chrome and it works like a charm.
This is a great blog post - thanks for drawing this. I have the epm demo running, and I want to use ODBO to create a basic chart of data in a HANA table.
However I dont want to use an attribute view becuse this is a single table, not a star schema (it contains tweets).
The table doesnt have a PK, and attempts to swap it in instead of PRODUCT result in this error:
[39255]{0}[0] 2012-10-28 20:58:35.663370 e xsa: sap.bc. SearchServer.h(00065) :
IA: OData (ErrCode = 6): invalid data: View has too many key attributes for 'count distinct'
What I would like to do is to use a regular (column) table instead of an attribute view, and run a basic group-by and count query for the jQuery chart.
I can query the table successfully using ODBO, but I would like to use the EPM HTML page as I dont know enough HTML to build a new page from scratch.
Do you know of a way to use a table instead of an attribute view?
Thanks!
Mark
Singapore
Hi Mark, unfortunately as far as I know you can only consume Attribute Views with the UI Toolkit. Like you said, you can expose the table using OData and consume it using any 3rd party tools like JQuery UI or Google Charts, but that in fact requires some HTML knowledge. I'm glad you liked the post.
Thanks, Lucas.
Hi Lucas, I did this followed Guide, but after I open the URL, there is no data and no chart on the web, I write the workarea like this:
<div data-sap-widget="workarea" data-entityset="EPM_PRODUCT" data-packagename="hong.Search.epm.views" data-aggregationdimension="PRODUCT_ID">
And I can Preview the data of EPM_PRODUCT in the HANA studio, do you know where the bug is?
Thanks!
Hong
Shanghai
Hi Hong Zhu,
I'm facing the same issue.Did you find a solution?
Thanks
Hi Lucas,
First thanks for this blog.
I am new to HANA information access toolkit and I have few basic Q's 😕 .