Skip to Content
Technical Articles
Author's profile photo Bollu Spandana

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

Hi All!

In this blog I am going to explain how can we implement the Visual Filters by using UI annotations in an Analytical List Page(ALP).

Problem Statement:

There is an existing issue in displaying the visual filters using CDS annotations. Here I have 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.

Thanks for Reading…

 

 

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo ilhame oaharra
      ilhame oaharra

      thank you for this  blog. i followed same steps as you. but the chart does not showing in visual filters. contrary, it was displayed in chart section . is there any step or configuration to do it before configuring annotation file

      Author's profile photo Bollu Spandana
      Bollu Spandana
      Blog Post Author

      Hlo ilhame,

      Once check your @Qualifier annotation in UI.Chart.

       

      Author's profile photo ilhame oaharra
      ilhame oaharra

      here is my chart how it looks. i used qualifier to identify my chart in vizualisations. Did i miss something. don't know why that is not working

      Author's profile photo komal bhadani
      komal bhadani

      Hi Bollu,

      I am facing exactly the same issue as ilhame. Although I have a Qualifier assigned to my chart and I am using the same in my visualizations, the chart is replacing my content chart.

      Do you know how to fix this?

      Thanks,

      Komal

      Author's profile photo Yulia Chernishova
      Yulia Chernishova

      Hello!

      You need to add a property (your dimension attribute). e.g.

      			<Annotations Target="ZZZ_SRV.Stock/Storagelocation">
      				<Annotation Term="Common.ValueList">
      					<Record Type="Common.ValueListType">
      						<PropertyValue Property="CollectionPath" String="StockSet"/>
      						<PropertyValue Property="Parameters">
      							<Collection>
      								<Record Type="Common.ValueListParameterInOut">
      									<PropertyValue Property="LocalDataProperty" PropertyPath="Storagelocation"/>
      									<PropertyValue Property="ValueListProperty" String="Storagelocation"/>
      								</Record>
      							</Collection>
      						</PropertyValue>
      						<PropertyValue Property="PresentationVariantQualifier" String="StorageLocationVisualFilter"/>
      					</Record>
      				</Annotation>
      			</Annotations>

      my filter:

      Thanks,

      Yulia