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=...
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".
- 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
- 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:
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:
- For this particular demo we only require the Core tools and HTML5 Toolkit so only need to select the below options:
Hit Next and Finish on the next screen.
- Import the template plugin as follows:
File -> Import -> Plug-ins and Fragments
On next screen leave the default entries and hit next.
Search for *html5* to find the html5 plugin.
Hit Add to include it in import list.
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
- 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.
Paste the extension
- Now change the id and the display name for the template so that it will be available in the Starter Application wizard:
- 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"
Your folder structure should look like this.
- 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.
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".
Enter Project name and HTML5
You should now see your new template available to select
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.
Optionally update the Page Title for the List page
Choose the fields that you want to appear on the List page.
Add new page for the Details and select the fields to be displayed on the Details page. Click Finish.
- 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.
You can search for quote or customer
Drill into the details.
IPhone view - the template could do with being adjusted to handle iPhone responsiveness a bit better e.g. the Details page..
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.
- SAP Managed Tags:
