Tips and Tricks for Analytical List Page Using CDS Views and Annotations

Hello All,

In this blog you will know the special findings and areas explored and implemented in the Analytical list Application.

For the analytical list page created with CDS view most of the annotations are added in the CDS view itself

Still, we have to add the local annotations in the application at UI directly for specific changes

Prerequisites: Knowledge of CDS Views, ODATA and WEB IDE based App development background.

Please do visit the below link for better getting good overview with steps:

https://blogs.sap.com/2018/04/04/create-an-analytical-list-page-using-abap-cds-views-and-annotations/

For Fiori UX design guidelines for Analytical list page:

https://experience.sap.com/fiori-design-web/analytical-list-page/

After we generate our Odata service(From CDS view using annotations definately) and create the App using FIori Elements, In the below picture we can see the External annotations which are automatically generated in the Modeler from the CDS view and the local annotations we must Add by ourself.

 

 

We will see local annotations further:

1. For the visual filters to be added in the App local annotations are added from the Annotation modeler

The above three charts are possible in the ALP only through below annotations:

CollectionPath, PresentationVariantQualifier

Above example is for Bank Statement. Also same we have to do for the Company code and Reason

2. To make the visual filters dependant on each others completely like below:

When the particular date is selected in line chart then automatically donut chart filters with the company code and the bar chart with Reason changes as per the date filter selection.

For the above we have to add the annotations under parameter under Common.valueList

in the Code editor also it can be added directly if we know the annotations

 

 

3. Value Help and drop down list:

For each Visual filter or Compact filter we can also create value help or drop down list. This is achieved when we create an association in the main Consumption view for example:

we have drop down select list for Company Code and Reason

 

For these we created associations in the main View below. and @Consumption.valueHelp: is the external annotations which automatically creates Value help or drop down list(through external annotations)

If we have the below annotations in the associations then drop down list will appear else Value help dialogue box

@ObjectModel.resultset.sizeCategory: #XS

@Search.searchable: true

For ex: Company code (Value help dialogue box)

 

4. SAPUI5 Visual Editor:

To hide or insert some buttons in the UI level or any other changes we can also use Visual Editor

Below are steps to edit UI elements

 

 

 

We have the option to edit below:

in the above screenshot we have added a new button ‘Alle zürucksetzen’ in the UI. Initially the name of the button was ‘Clear’. we renamed it and its functionality is already there in the framework.

All the changes performed in the visual editor are logged in the Changes tab and we can see complete history below:

Similarly, we can explore other so many options in the visual editor.

 

5. Manifest File

There are so many important settings which we can change through modifying Manifest file.

5.1 Defaulting the Content view: Normally the hybrid view is by default

but we can change the content view(above chart view) by below setting

“defaultContentView”: “chart”,

Manifest file settings for ALP below:

 

For more details please refer below link:

https://sapui5.hana.ondemand.com/sdk/#/topic/3d33684b08ca4490b26a844b6ce19b83.html

 

5.2  For automatic filtering we have to make the go button false as changed above.

5.3  We can remove the navigation of the table row below

by removing the below code completely from manifest file

6. Default Variant Selection: Default the previous business date in the Visual filter or compact filter when the app is loaded initially. Below is the example:

This is only possible through adding controller extension file in the Webapp folder.

Steps below:

6.1  Add below code in the Manifest under extends:

ztest_alp is the project name

6.2 Create below folders like below:

6.3 Write a code in the new controller file (customMain.controller.js)

event to be used onInitSmartFilterBarExtension:

 

Please feel free to add additional points which are not documented anywhere or are interesting to know about ALP.