Technical Articles

Bollu Spandana

June 24, 2020 6 minute read

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.

Compact filters
Visual filters.

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

Bar chart,
Line chart
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…

5 Comments

You must be Logged on to comment or reply to a post.

ilhame oaharra

June 28, 2020 at 6:02 pm

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

Bollu Spandana

Blog Post Author

June 30, 2020 at 8:52 am

Hlo ilhame,

Once check your @Qualifier annotation in UI.Chart.

ilhame oaharra

July 3, 2020 at 5:47 pm

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

komal bhadani

October 19, 2020 at 8:20 am

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

Yulia Chernishova

December 23, 2020 at 1:23 pm

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

Technical Articles

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

Create an ALP app in our WEB IDE:

Assigned Tags