SMART tables –Backend (ABAP-CDS) and Frontend example with currency measures

This blog post is here to help, how to develop the SAP UI5 smart tables control including the ABAP  CDS’s, OData services and front end application,

In this documentation, will show how to use the sum aggregation on currency fields by using the SADL (Service Adoption definition language ) frame work gateway and you can see the currency summation and smart table column functions (Like Sort ,Filter and group) output screen shots at end the of the documentation.

in this blog, following steps will be cover.

• ABAP CDS View creation
• Gateway service creation by using the SEGW
• Smart table UI5 application

 

Backend

A. ABAP CDS view creation: in this section, it covers the CDS view creation which is required  for    accounting data display in smart tables, as shown the below list of fields.

a. BELNR : Accounting Document Number
b. BUZEI : Number of Line Item Within Accounting Document
c. AUGDT : Clearing Date
d. HSL : Amount in Company Code Currency
e. WSL : Amount in Transaction Currency
f. RHCUR : Company Code Currency
g. RWCUR : Transaction Currency
h. BUKRS : Company Code

Here we made the CDS view with input parameter as company code.

Press F8 and find the below CDS view input screen.

CDS output

B. Gateway service creation by using the SEGW: this section describes, how to consume the             CDS views by using the OData services.

Go to transaction code SEGW. click on create button

Please enter the required inputs and select the package name as local object

Select Data Model->Import->DDIC Structure.

Give the entity name and select the checkbox for create Default entity set (it will creates the entity set name). Give the structure name in ABAP structure input field than click on next button.

In next screen, select the required fields, which are required for display as smart table output.
Click on next button.

Adding a Property for the Generated Key.

Services must provide a unique key that can be used by the client to retrieve a specified entity after receiving a list of entities, in order to conform to the OData standard. Analytical services must provide a dedicated key since the natural keys of the business entity are not usable in aggregated results.
In transaction SEGW, add a property for the unique identifier of the returning results. The name of the property can be freely chosen. The type of the property must be Edm.String and this property needs to carry the ABAP field name ‘GENERATED_ID’.

In above highlighted area in red colour, need to be select the check boxes which are fields need to be display as Smart Filters.
If we select the sort check box then sorting features (Ascending/Descending) will be add in smart table column menu, as you can see in screen shot 1 and 2
Based on selection in properties, OData service will be generate the annotation/Metadata automatically, in metadata file, we can see the same configuration relevant code in MPC (Model provider class) Define method (Screen shot 1).

CDS View mapping to entity set.

Expand the service implementation folder and select the Itemset entity set as shown below screen shot.

Select the Map to Data source as highlighted in yellow colour.

Click on enter button, than you can see the below screen shot, CDS view mapping to entity structure.

In below screen, right side you can see the CDS view and left side is Entityset fields.
Click on generate mapping button.

Once select the generate mapping button, screen will be look like below, field mapping will be happen automatically.

Click on generate application button, system will be provide the application class as you can see same under “Runtime Artifacts” folder.

While click on generate application button, you can see the Model and data provider classes details and service names.

Click on enter button and give the package details, click on save button.

Screen-shot: 1 (Model Provider Class)

Screen-Shot 2

An OData entity set is grouped by each requested dimension. Measures are aggregated, for example as sum of a price or as average time.
Following peace of logic, will helpful to differentiate which are fields display as dimension and Measure

Please note: if cds view have the any input parameters, than we should pass relevant smart filter inputs to CDS view in DPC (Data provider class) -> Method

IF_SADL_GW_QUERY_CONTROL~SET_QUERY_OPTIONS.

Set the aggregation fields.
Provide the measure to be aggregated as ‘element’ and the ABAP field name of the property that contains the result of the aggregation as ‘alias’

Please note : In below first highlighted piece of logic , passing the company code values to CDS view input parameter which are from smart filter input field values .

As you can see the metadata for the service ZSMART_PROJ_SRV by using the transaction code /IWFND/MAINT_SERVICE.

Click on Sap gateway client and find the metadata file.

Frontend

C. Smart table UI5 application.

Step: 1

Step: 2

Give your own name in view. Click on finish button.

Here we can see the SAPUI5 project details.

Here you can find the controller and view logic screen shots and find the attached smart templets source code in below.

S1.controller.js

S1.View.xml

Now it’s time for upload the offline application into SAP.

In transaction code SE38, give the program name as /UI5/UI5_REPOSITORY_LOAD and execute.
Give your own application name and execute. It selection path, select the attached source code area.

Please note: once application loaded into the SAP, application will be get create under SICF node and you can find same under below paths.

A. /default_host/sap/bc/bsp/sap/zsmart_tables8
B. /default_host/sap/bc/ui5_ui5/sap/zsmart_tables

Once application is available in transaction code SE80, in two places changes need to be done as per your requirement.

S1.Controller.js: in this controller, have to be give your own OData service name which is already created in SEGW.

S1.View.xml

Smart Tables Final output.

Smart Filter F4 Help.

Sum, calculation each currency key wise we can see in below screen shot.

Group function in menu option: once perform the grouping action, then report will particular column value grouping output as shown below.