Brook Preloader

Blog

How to Implement Visual Filters by using UI annotations in Analytical List Page

Problem Statement:

There is an existing issue in displaying the visual filters using CDS annotations. Here Ihave a chart and a table in the content area. In the Filter section I can see the compact filters but I am unable to see the visual filter so for that I am adding the UI annotation for displaying the visual filters.

ALP is composed of a filter area which allows users to filter the result set. It supports 2 types of filters.

  1. Compact filters
  2. Visual filters.

Visual filters are composed by a title and an interactive chart. There are three types available at this moment and they are

  1. Bar chart,
  2. Line chart
  3. Donut chart                                                                                                                                                                                                                                                                           Here I am going to explain about Visual filters with Bar Chart.

Create an ALP app in our WEB IDE:

Once your create the Analytical List Page application in our cloud webIDE, It shows the structure like below.

Adding Annotation file:

Now I am adding the annotation file by right clicking on the annotation folder and selecting annotations file.

Enter your annotation file name and click on Finish to add the annotation file.

Now we can see the annotation file path in our manifest.json file.

You can find your annotation.xml file in the below structure.

XML Annotation Structure:

<Annotations xmlns="http://docs.oasis-open.org/odata/ns/edm" Target="SEPMRA_SO_ANA.SEPMRA_C_ALP_SlsOrdItemCubeType/SoldToParty">
<Annotation Term="Common.ValueList" Qualifier="VisualFilter">
<Record>
<PropertyValue Property="Label" String="Customer"/>
<PropertyValue Property="CollectionPath" String="SEPMRA_C_ALP_SlsOrdItemCube"/>
<PropertyValue Property="SearchSupported" Bool="false"/>
<PropertyValue Property="PresentationVariantQualifier" String="FilterRevenueByCustomer"/>
<PropertyValue Property="Parameters">
<Collection>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="SalesOrder"/>
<PropertyValue Property="ValueListProperty" String="SalesOrder"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="SalesOrderItem"/>
<PropertyValue Property="ValueListProperty" String="SalesOrderItem"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="DeliveryCalendarDate"/>
<PropertyValue Property="ValueListProperty" String="DeliveryCalendarDate"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="DeliveryCalendarYear"/>
<PropertyValue Property="ValueListProperty" String="DeliveryCalendarYear"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="DeliveryCalendarQuarter"/>
<PropertyValue Property="ValueListProperty" String="DeliveryCalendarQuarter"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="DeliveryCalendarMonth"/>
<PropertyValue Property="ValueListProperty" String="DeliveryCalendarMonth"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="Product"/>
<PropertyValue Property="ValueListProperty" String="Product"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="ProductCategory"/>
<PropertyValue Property="ValueListProperty" String="ProductCategory"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="MainProductCategory"/>
<PropertyValue Property="ValueListProperty" String="MainProductCategory"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="SalesOrderOverallStatus"/>
<PropertyValue Property="ValueListProperty" String="SalesOrderOverallStatus"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="SoldToParty"/>
<PropertyValue Property="ValueListProperty" String="SoldToParty"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="SoldToPartyCountry"/>
<PropertyValue Property="ValueListProperty" String="SoldToPartyCountry"/>
</Record>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="Supplier"/>
<PropertyValue Property="ValueListProperty" String="Supplier"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="DeliveryCalendarQuarterT"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="DeliveryCalendarMonthT"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="ProductName"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="NetProductPrice"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="SalesOrderOverallStatusT"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="SoldToPartyCompanyName"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="SoldToPartyCountryName"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="SupplierCompanyName"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="GrossAmount"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="NetAmount"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="NetAmntDeviationRangeLow"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="NetAmntToleranceRangeLow"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="TaxAmount"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="Currency"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="CurrencyT"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="Quantity"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="QuantityUnit"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="QuantityUnitT"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="NumberOfSalesOrders"/>
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>

Now open the Annotation Modeler by clicking on the created annotation file.

Now we can add the Visual Filter by using this local annotations file.

Visual Filter Configuration steps :

First we have to select the UI.Chart annotation.

Now Select the ChartType and Title Properties for UI.Chart like below.

I am giving the name of the chart as Revenue by Customer.

Here I want to display the customer revenue based on the Net amount in bar chart.

Now we have to add the Measures and Dimensions for that UI.Chart, For that I am adding measure and dimension Properties as mentioned below.

Displaying the Net Amount in the Measure Axis:

Displaying the Customers in the Dimensions:

Now we have to add the PresentationVariant UI Vocabulary for UI.Chart.

Now select the Visualization property for presentationVariant annotation.

Add an item to Visualization property.

Now we have to assign annotation filter path to Visualization item like below(@UI.Chart#FilterRevenueByCustomer).

Note: We can get the Annotation filter path from our CDS view which we have selected during app development time.

Finally our local annotation will be like the below.

Now Run the application to added Visual Filter shown like below.

Conclusion:

In this blog, we are successfully implemented the Visual Filter in our ALP application by using UI annotations.

0 0 vote
Rating
guest
0 Comments
Inline Feedbacks
View all comments