Skip to Content
Author's profile photo Former Member

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:

  1. Install the UI Toolkit
  2. Prepare Your Source Data
  3. Set up a Development Environment
  4. Create Your Own Site

Install the UI Toolkit

  1. Download the Delivery Unit from SAP Service Marketplace
  2. Import the Delivery Unit
    1. Open SAP HANA™ Studio Modeler
    2. On the Quick Launch tab page, choose Content -> Import
    3. Select HANA Content -> Delivery Unit and choose Next
    4. Select Client and browse the DVD or the download folder for the REPO_INA_UITOOLKIT.tgz delivery unit
    5. Select both Actions and choose Finish
    6. Perform the same import procedure for the REPO_INA_SERVICE.tgz delivery unit
    7. Check the Packages were imported correctly
  3. Register and Activate the Service
    1. Switch to the SAP HANA™ Studio Administration Console and select your database instance
    2. Choose the Configuration tab page and expand xsengine.ini -> application_container
    3. Double-click the application_list line and, in the System column, add the entry SearchServer
    4. To restart the XSEngine, choose the Landscape tab page
    5. From the context menu of the xsengine service, choose Kill. The service stops completely and restarts automatically
  4. 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:

  1. Log on to the SAP HANA™ studio with user SYSTEM
  2. In the menu bar, choose Window -> Preferences -> Modeler -> Search Options
  3. 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:

  1. In the Output pane, select the attribute.
    Note: The searchable attributes must not be calculated attributes nor have lower case letters in their names.
  2. In the lower area of the Properties pane, select the Information Access category.
  3. 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:

  1. Make sure the SAP HANA™ Client is installed on your machine
  2. 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
  3. 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>

  4. Mark the UI toolkit packages as relevant for development by execute the following command:
    regi track sap.bc.ina
  5. Copy the UI toolkit packages and files to your local workspace by executing the regi checkout command.
  6. 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.

/wp-content/uploads/2012/08/workarea_129003.png

Search Box Widget

/wp-content/uploads/2012/08/searchbox_129002.png

Chart Widget

The most important thing here is to update the data-dimension parameter to the column from your entity set to be displayed

/wp-content/uploads/2012/08/chart_129005.png

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

/wp-content/uploads/2012/08/result_129006.png

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

/wp-content/uploads/2012/08/templates_129007.png

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.

/wp-content/uploads/2012/08/temp_129008.png

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.

Capture.PNG

Have Fun!

Follow me on Twitter: @LukiSpa

Assigned Tags

      31 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Diego Dora
      Diego Dora

      Great post! Thanks for sharing with the community! 🙂

      Author's profile photo Vamsi Krishna
      Vamsi Krishna

      Thanks for posting but a final screenshot of your solution would be very helful to see how it is going to come up.

      Vamsi

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Done! Thanks for your comment 🙂

      Author's profile photo Former Member
      Former Member

      Great blog!

      But a question...

      Now I can connect but shows a few rows

      Author's profile photo Former Member
      Former Member

      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?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author
      Author's profile photo Former Member
      Former Member

      Thanks for usefull info, that's the what i am looking for! Thanks a lot!

      Author's profile photo Former Member
      Former Member

      Sorry but this blog exists here but it is not blog: http://help.sap.com/hana/ui_toolkit/index.html

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      You are right, I missed that point, creating new web application. Sorry again.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      No worries! 🙂

      Author's profile photo Lars Schubert
      Lars Schubert

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi, I was able to find it today by navigating thru the following links:

      1. Go to Software Downloads
      2. Installation and upgrades
      3. Installation and upgrades guides
      4. SAP in-memory computing
      5. SAP in-memory appliance
      6. Software Download
      7. SAP HANA XX Edition
      8. SAP HANA XX Edition 1.0
      9. Comprised Software Component Versions
      10. HANA UI FOR INA 2.0

      Hope you find, otherwise let me know....

      Author's profile photo Former Member
      Former Member

      Hi,

      You must have a HANA license to download packages.

      Author's profile photo Lars Schubert
      Lars Schubert

      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

      Author's profile photo Former Member
      Former Member

      Hi Lars,

      You can contact with your local SAP sales guy. He/she can help you.

      Author's profile photo Lars Schubert
      Lars Schubert

      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!

      Author's profile photo Prasanna Prabhu
      Prasanna Prabhu

      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.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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?

      Author's profile photo Lars Schubert
      Lars Schubert

      Hi Lucas,

      thanks for answering again  ... but I think you meant Prasanna? 😉

      the best, Lars

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      haha...my head is a mess! 🙂

      Author's profile photo Prasanna Prabhu
      Prasanna Prabhu

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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

      Author's profile photo Prasanna Prabhu
      Prasanna Prabhu

      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.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      Hi Hong Zhu,

      I'm facing the same issue.Did you find a solution?

      Thanks

      Author's profile photo Former Member
      Former Member

      Hi Lucas,

      First thanks for this blog.

      I am new to HANA information access toolkit and I have few basic Q's 😕 .


      • I have downloaded the HCOINAUITOOLKIT07_3-20011361.SAR file . Do I need to extract it before importing into HANA server?
      • Where can we write the UI code ,in eclipse fiori project or in HANA XS project ?
      • Do we need Odata service here also or we can directly access the attribute view in UI code.
      • Please provide steps to create UI . ( Because I know modeling and hv little idea in XS projects )