Technical Articles
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…
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
Hlo ilhame,
Once check your @Qualifier annotation in UI.Chart.
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
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
Hello!
You need to add a property (your dimension attribute). e.g.
my filter:
Thanks,
Yulia