An UI5 Smart Chart App based on actual server backed by Cloud Foundry on SAP Web IDE

[former_member242075]

An UI5 Smart Chart App based on actual server

backed by Cloud Foundry on SAP Web IDE

 

After the successful release of cloud foundry and the migration to full stack Web IDE, application development has been made so easy with rich set of capabilities like backing services, scalability, additional run times provided by cloud foundry and everything on go with simple and easy steps in development and testing on Web IDE.

Full Stack SAP Web IDE has made developers life easy and bringing a lot of innovations and new things in shorter span of time.

Coming to Smart Chart which is a SAP UI5 Component that creates the chart based on OData Metadata and configuration provided. These charts are basically used for analytical purposes where user can switch between measures and dimensions (which I will explain below), switch the chart types, sort, filter and much more capabilities. Simple to use and understand.

Below is the link for smart chart reference

https://sapui5.netweaver.ondemand.com/sdk/#/api/sap.ui.comp.smartchart.SmartChart

In this blog I am going to explain the smart chart implementation using actual server and here are the below things to achieve the same.

• Prerequisites


• What is OData and how smart chart works using it.


• Steps to create an OData Service using Java


• Manipulation of OData Metadata to accommodate SAP specific Annotations


• Creating an SAP UI5 application for smart chart using exposed OData.

 

 

Prerequisites:

To successfully run and use smart chart you would need the following

• SAP WEB IDE account.


• A SAP HANA Cloud Platform account(HCP).


• Registered for cloud foundry-based services on HCP.

 

What is OData and how smart chart works using it.

OData (Open Data Protocol) is a used for creation and consumption of REST API’s.

OData reads either a table(entity) or a HANA calculation view and then the OData can be exposed to public which can later be consumed by other applications based on the needs.

Smart chart or any other UI5 smart controls like smart field, smart table etc. are designed to work only with OData Metadata. The UI5 control uses the OData exposed URL and then the entity set from the metadata.xml is mapped to smart chart view.

Smart Chart will not work with only OData Metadata.xml in addition it requires some Annotations which I will be explaining in my next steps.

 

Steps to create an OData Service using Java

Follow the below steps to create the OData service to be exposed

1) Creating basic project structure

• Log on SAP WEB IDE.


• Configure Cloud Foundry Go to Tools->Preferences->Cloud Foundry and set the CF API end, choose your organization and space then save. Note: Do not click on reinstall builder click only if it says install.

• Choose File->New->Project from Template and then select SAP Cloud Platform Business Application.

• Give some name to your project “Shopping Cart” and click on Finish which will generate the project in required structure. Note: Java package name can be given as your choice which creates the package as desired by you. Checking Enable sample files in project will create a sample cds file to start with and you can uncheck and create on your own as well.

2) Creating Data Model for and adding services to “Shopping Cart” application

 

• Open data-model.cds in the file explorer and copy the following CDS definitions into it.

namespace my.shop;

entity Shop {

  key cartId : String;

  title  : String;

  quantity  : Integer;

  price:Decimal;

}

• Rename my-service.cds file in srv folder to shop-service.cds which is the OData service we want to expose. Copy the content below to your service.cds file.

using my.shop from '../db/data-model';

service ShopService {

 entity Shop {

  key cartId : String;

  title  : String;

  quantity  : Integer;

  price:Decimal;

}

}

You can expose all the columns or specific columns from your entity to create the service. Entity can be replaced by a calculation view as well.

• Click on database explorer and add click on “+” symbol to add the existing or new HDI container which is the database container to create and access tables and services.


• Change your mta.yaml file which is the deployment descriptor file specifying the modules like db,api and hdi reference name. If hdi container is an existing one use type as org.cloudfoundry.existing-service.


• Right click on db folder and select build which will generate the hdbcds files and creates a service in your hdi container with name “SHOPSERVICE_SHOP”. You can navigate to database explorer and click on tables of your hdi container and validate if the required “SHOPSERVICE_SHOP” is created. After successful creation add some data to it.


• Right Click on srv folder and build the package which generates a file called “ShopService.xml” under src/main/resources/edmx and then right click on same srv foler ad run as java application which will create the odata service.


• An url like https://abcdefgh-shoppingcart-srv.cfapps.sap.hana.ondemand.com/odata/v2/  will be generated for the service which can be clicked and tested specifying  url/$metadata and url/Shop where Shop is an entity name.

 

 

Manipulation of OData Metadata to accommodate SAP specific Annotations

Following was the ShopService.xml generated which needs to incorporate OData Annotations to work with smart chart or any other smart controls.

 



 

• For Smart chart specifically, it is required to identify if a column is measure or dimension based on which a chart is displayed.


• Measures are something where we can do some mathematical calculations. Eg quantity, price


• Dimensions can be anything which can consistently categorize your data.


• We will add the annotation sap-aggregation-role=”measure” for measures and sap-aggregation-role=”dimension” for dimensions.


• Give EntityContainer Name="ShopService". Add sap:sortable="true" sap:filterable="true" for the columns if you want to make them filterable and sortable.


• Add sap-semantics=”aggregate” to show analytical reports and include annotations as below to show the default chart type and default behavior.

 

• 

 

• Make changes to your pom.xml to include maven war plugin so that everytime it will not generate new service.xml. Build and run srv folder again and then validate by appending $metadata to the url to check if new xml is getting reflected or not.

 

 

Creating an SAP UI5 application for smart chart using exposed OData

• Create an UI5 application in the same shopping cart application or else a different one.


• Create view and controller and then make the below changes in your controller and view.

In the init method of controller replace the code with  below one

url = https://ckehekw...hana.ondemand.com/odata/v2/servicename

this._oModel = new sap.ui.model.odata.ODataModel(url, true);

getView().setModel(this._oModel);

In the view specify entitySet="Shop"

• Save all and then run index.html you will be seeing the charts based on your data and then you can click on settings icon select/unselect different things and play around.

 



 

 

This is how smart chart is developed and can be used to serve for analytical purposes, generating user specific reports and managing custom dashboards.

Drawbacks

• Works only for one level querying.


• Smart chart will not work without OData.


• Cannot give filters for the data being fetched the full set has to be provided.


• Chart is displayed only id SAP specific annotations are present.