Skip to Content

Introduction

In this blog I will show you how you can quickly expose HANA views in a SAPUI5 application using Gateway Productivity Accelerator (GWPA).

As I have recently been assessing CRM HANA Live models I decided to use one of these views for demo purposes. CRM HANA Live is an add-on for CRM business suite on HANA. Essentially HANA Live is a set of HANA views for common queries on CRM data e.g. quotes, orders, contracts, opportunities, etc… For more details you can check out the SAP Help portal – https://help.sap.com/saphelp_hba/helpdata/en/e0/f15aececda413185ba76c19afac76d/content.htm?frameset=/en/e0/f15aececda413…

GWPA is an eclipse based tool that allows you to easily consume odata services from Netweaver Gateway or other odata sources and rapidly build applications based on pre-defined templates. See here for more details – SAP NetWeaver Gateway Productivity Accelerator.

Here I will show you how to create a new SAPUI5 template adjusted for HANA based applications so that you can quickly create and deploy applications on HANA based on your HANA model. This is done in a few simple steps:

1) Create an xsodata service to expose the HANA model as odata.

2) Create a new SAPUI5 List/Details template specifically for HANA.

3) Create a new SAPUI5 application based on the new template.

Details

1)  The first step is to expose the HANA model that you want to build your application on.

In HANA Studio:

– Create a new “XS Project”.

Pic1.png

Pic2.png

– Create an xsodata file and add the following code:


service
{
"_SYS_BIC"."sap.hba.crm/SalesQuotationHeader" as "QuoteHeader" key ("SalesQuotation");
}

























– Add an xsaccess and xsapp file

Pic4.png

– Share the project to the HANA repository and activate it.

– Verify that the service is working by opening the URL to the service in a browser:

Pic5.png

2) The next step is to create a new accelerator template specifically for HANA.

– Install the GWPA as follows:

     Help -> Install New Software

     Add software site as below:

Pic6.png

– For this particular demo we only require the Core tools and HTML5 Toolkit so only need to select the below options:

Pic7.png

Pic8.png

     Hit Next and Finish on the next screen.

– Import the template plugin as follows:

     File -> Import -> Plug-ins and Fragments

Pic9.png

     On next screen leave the default entries and hit next.

Pic10.png

     Search for *html5* to find the html5 plugin.

Pic11.png

     Hit Add to include it in import list.

Pic12.png

     You should now see the html5 toolkit plugin project in your Project Explorer.


– Rename the project by right-clicking on the project and doing:

     Refactor -> Rename

Pic13.png

Pic14.PNG


– Open the plugin.xml file and go to the Extensions tab. Right click on the template which has “SAPUI5 List/Details (starter_application)” as it’s child and copy.


Pic15.PNG


     Paste the extension

Pic16.PNG

– Now change the id and the display name for the template so that it will be available in the Starter Application wizard:

Pic17.PNG


– Save your changes as you go along.


– Next step is to change the actual project and code template.


     In the res/UI5BaseTemplate/common folder add an empty .xsapp.vm file to mark the root point in the applications package hierarchy from which content can be exposed.

     Then add an .xsaccess.vm file with the following to expose the content and make the code accessible via HTTP.


{
     "exposed" : true
}


















     Modify the index.html.vm file change the src to point to “/sap/ui5/1/resources/sap-ui-core.js”

Pic18.PNG

     Your folder structure should look like this.

Pic19.PNG






– Last step is to de-install the original HTML5 Toolkit plugin.


     Go to Help -> About SAP HANA Studio -> Installation Details.


     Select the “Toolkit for HTML5 (GWPA, Developer Edition)” and Uninstall.

Pic20.PNG

     Confirm items to be uninstalled and Finish. You will need to restart the studio.


Note: if you do not uninstall the original plugin then you may run into ClassCastException errors when testing your new plugin template. Thanks to Boris Tsirulnik for helping me figure this out.





3) Now you are all set to test your new template and build a HANA UI5 app.


     Right click on your plugin project and do

     Run As -> Eclipse Application


     This will launch a new HANA Studio window.


     File -> New -> Project


     Under OData Development select “Starter Application Project”.


Pic22.PNG

     Enter Project name and HTML5

Pic23.PNG

     You should now see your new template available to select

Pic24.PNG

     Enter the URL for the xsodata service that we defined earlier and hit Go. The service details should appear in window below. Note: you will need to enter your HANA database credentials.

Pic25.PNG

     Optionally update the Page Title for the List page

Pic26.PNG

     Choose the fields that you want to appear on the List page.

pic1.PNG

     Add new page for the Details and select the fields to be displayed on the Details page. Click Finish.

pic2.PNG


– For testing purposes go back to your main HANA Studio application (repository workspaces are set up here) and import the project that you have just created from your runtime-EclipseApplication folder e.g. C:\Users\Administrator\runtime-EclipseApplication.

     File -> Import -> Existing Projects into Workspace


– Share the project to your HANA repository and Activate the project.

     Team -> Share Project

     Select “SAP HANA Repository”

     Select repository workspace and package.

     Team -> Activate

– Now open the URL to the app in a suitable browser (e.g. Chrome).


And there you go.


Here is an IPad view shown in Ripple Emulator (which is really useful Chrome Extension). List is shown initially.

pic3.PNG

You can search for quote or customer

pic4.PNG


Drill into the details.

pic5.PNG


IPhone view – the template could do with being adjusted to handle iPhone responsiveness a bit better e.g. the Details page..

pic9.PNG


The out of the box templates are pretty nice, uses the sap.m UI5 libraries and has standard sap_bluecrystal theme applied but I’m sure most companies would like to develop their own template versions and also other patterns. As you can see once you have your template defined whether for HANA, Netweaver Gateway or otherwise then it can as the name suggests really accelerate your development process.


Note: whilst I have used a CRM HANA Live model here as an example, this could be applied to any HANA model.




    

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply