Prerequisites

AshishAnand · ‎08-13-2019

In addition to the conventional smart filter bar (compact filters) present in other Fiori Elements floorplans, Analytical List Page (ALP) also provides something called visual filters. Which renders your filters in the form of analytical charts (donut, line and bar) to help the end-user with better visualisation of data. In an ALP application, any visual filter will always have a corresponding filter field in the compact filter but a compact filter field can not have any corresponding visual filter. Visual filter and compact filter in an ALP application will always be in sync in terms of value help and selected value.

ALP's Visual filter

ALP's Compact Filter

In this blog, I'll discuss different configurations and annotation for filter area of an ALP application.

Prerequisites

Make sure you have been to the previous blog of this blog series and already created a bare bone ALP application.

For reference, you can clone the GIT repo for this sample application which we are building.

Adding filters

To add filters, "UI.SelectionFields" annotation is used

				<Annotation Term="UI.SelectionFields">

					<Collection>

						<PropertyPath>Currency</PropertyPath>

						<PropertyPath>Product</PropertyPath>

						<PropertyPath>DeliveryMonth_Text</PropertyPath>

						<PropertyPath>DeliveryDateTime</PropertyPath>

					</Collection>

				</Annotation>

			</Annotations>

Please note that the filters (both visual and compact) will come in order in which they are mention in the "UI.SelectionFields" annotation.

Defaults values for filters

Default filter values can be configured by defining the "Common.FilterDefaultValue" annotation for a property type.

<Annotations Target="SEPMRA_PROD_MAN.SEPMRA_C_PD_ProductSalesDataType/Currency">

				<Annotation Term="Common.FilterDefaultValue" String="USD"/>

</Annotations>

Another way of defining default values for the filter is via the parameters of selectionVariant or selectionPresentatioVariant of the ALP application. You need to to make the manifest property "filterDefaultsFromSelectionVariant" as true in order to use this functionality which by default is false.

<Annotation Term="UI.SelectionPresentationVariant">

					<Record Type="UI.SelectionPresentationVariantType">

						<PropertyValue Property="SelectionVariant">

							<Record Type="UI.SelectionVariantType">

								<PropertyValue Property="Parameters">

									<Collection>

										<Record Type="UI.Parameter">

											<PropertyValue Property="PropertyName" PropertyPath="Currency"/>

											<PropertyValue Property="PropertyValue" String="USD"/>

										</Record>

									</Collection>

								</PropertyValue>

							</Record>

						</PropertyValue>

					</Record>

				</Annotation>

The default filter values from the "Common.FilterDefaultValue" annotations are overwritten by the variant management or navigation context.

Defining the value help for the filters

Value help for the filters can be defined using "Common.ValueList" annotation:

			<Annotations Target="SEPMRA_PROD_MAN.SEPMRA_C_PD_ProductSalesDataType/DeliveryDateTime">

				<Annotation Term="Common.ValueList">

					<Record Type="Common.ValueListType">

						<PropertyValue Property="CollectionPath" String="SEPMRA_C_PD_ProductSalesData"/>

						<PropertyValue Property="Parameters">

							<Collection>

								<Record Type="Common.ValueListParameterInOut">

									<PropertyValue Property="LocalDataProperty" PropertyPath="DeliveryDateTime"/>

									<PropertyValue Property="ValueListProperty" String="DeliveryDateTime"/>

								</Record>

							</Collection>

						</PropertyValue>

					</Record>

				</Annotation>

			</Annotations>

Please note that there should be no qualifier for these valueList annotations.

Record Type: Common.ValueListParameterOut determines the

Elements of the main entity set that make it to the filter query

Field from a value help entity set that sets the field value in the main entity set

Record Type: Common.ValueListParameterIn determines the filtering data set from a value help entity set

Record Type: Common.ValueListParameterInOut combination of both in and out parameters. In the above example, both the in and out combination was same hence I have used InOut for simplicity.

Defining visual filters

An ALP must have a visual filter because the visual filter is the most distinguishing factor which differentiates an ALP application from a List Report application. You need an aggregated entity set to define an ALP visual filter i.e. an entity type defined as sap:semantics="aggregate" in the metadata. An aggregated entity type will also have dimensions and measures attributes.

<EntityType Name="SEPMRA_C_PD_ProductSalesDataType" sap:semantics="aggregate" sap:label="Monthly Sales (only recent periods)" sap:content-version="1">

<Key>

<PropertyRef Name="ID"/>

</Key>

<Property Name="ID" Type="Edm.String" Nullable="false"/>

<Property Name="Product" Type="Edm.String" MaxLength="10" sap:aggregation-role="dimension" sap:display-format="UpperCase" sap:label="Product ID" sap:quickinfo="EPM Fiori Ref Apps: Product ID"/>

<Property Name="DeliveryDateTime" Type="Edm.DateTime" Precision="0" sap:aggregation-role="dimension" sap:display-format="Date" sap:label="Delivery Date"/>

<Property Name="DeliveryMonth" Type="Edm.String" MaxLength="2" sap:aggregation-role="dimension" sap:display-format="NonNegative" sap:text="DeliveryMonth_Text" sap:label="Month" sap:quickinfo="Month number"/>

<Property Name="DeliveryMonth_Text" Type="Edm.String" MaxLength="10" sap:aggregation-role="dimension" sap:label="Month" sap:quickinfo="Month long text" sap:creatable="false" sap:updatable="false"/>

<Property Name="Revenue" Type="Edm.Decimal" Precision="16" Scale="3" sap:aggregation-role="measure" sap:unit="Currency" sap:label="Revenue" sap:filterable="false"/>

<Property Name="Currency" Type="Edm.String" MaxLength="5" sap:aggregation-role="dimension" sap:label="ISO Currency Code" sap:quickinfo="EPM: Currency Code" sap:value-list="standard" sap:semantics="currency-code"/>

<NavigationProperty Name="to_Currency" Relationship="SEPMRA_PROD_MAN.assoc_72566A4A59B7E929287D37F8CF88FB8C" FromRole="FromRole_assoc_72566A4A59B7E929287D37F8CF88FB8C" ToRole="ToRole_assoc_72566A4A59B7E929287D37F8CF88FB8C"/>

<NavigationProperty Name="to_MonthName" Relationship="SEPMRA_PROD_MAN.assoc_BEF8734D3DB95728942443F9CA4E389E" FromRole="FromRole_assoc_BEF8734D3DB95728942443F9CA4E389E" ToRole="ToRole_assoc_BEF8734D3DB95728942443F9CA4E389E"/>

</EntityType>

A visual filter of an ALP application is defined via another "Common.ValueList" annotation with a qualifier and PresentationVariantQualifier property which points to the chart annotation. So if you want to have have both value list and visual filter for the same filter property, then you should define two Common.ValueList annotation for the same filter property, one without qualifier for value list and another with qualifier and PresentationVariantQualifier for the visual filter

			<Annotations Target="SEPMRA_PROD_MAN.SEPMRA_C_PD_ProductSalesDataType/Currency">

				<Annotation Term="Common.FilterDefaultValue" String="USD"/>

				<Annotation Term="Common.ValueList" Qualifier="CurrencyVisualFilter">

					<Record Type="Common.ValueListType">

						<!--<PropertyValue Property="SelectionVariantQualifier" String="CurrencyVisualFilter"/>-->

						<PropertyValue Property="CollectionPath" String="SEPMRA_C_PD_ProductSalesData"/>

						<PropertyValue Property="Parameters">

							<Collection>

								<Record Type="Common.ValueListParameterInOut">

									<PropertyValue Property="LocalDataProperty" PropertyPath="Currency"/>

									<PropertyValue Property="ValueListProperty" String="Currency"/>

								</Record>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="PresentationVariantQualifier" String="CurrencyVisualFilter"/>

					</Record>

				</Annotation>

				<Annotation Term="Common.ValueList">

					<Record Type="Common.ValueListType">

						<PropertyValue Property="CollectionPath" String="SEPMRA_C_CurrencyValueHelp"/>

						<PropertyValue Property="Parameters">

							<Collection>

								<Record Type="Common.ValueListParameterIn">

									<PropertyValue Property="LocalDataProperty" PropertyPath="Currency"/>

									<PropertyValue Property="ValueListProperty" String="Currency"/>

								</Record>

								<Record Type="Common.ValueListParameterOut">

									<PropertyValue Property="LocalDataProperty" PropertyPath="Currency"/>

									<PropertyValue Property="ValueListProperty" String="Currency"/>

								</Record>

							</Collection>

						</PropertyValue>

					</Record>

				</Annotation>

			</Annotations>

Below is the PresentationVariant annotation for the currency visual filter:

<Annotation Term="UI.PresentationVariant" Qualifier="CurrencyVisualFilter">

					<Record Type="UI.PresentationVariantType">

						<!--<PropertyValue Property="SortOrder">-->

						<!--	<Collection>-->

						<!--		<Record Type="Common.SortOrderType">-->

						<!--			<PropertyValue Property="Property" PropertyPath="Revenue"/>-->

						<!--		</Record>-->

						<!--	</Collection>-->

						<!--</PropertyValue>-->

						<PropertyValue Property="Visualizations">

							<Collection>

								<AnnotationPath>@UI.Chart#CurrencyVisualFilter</AnnotationPath>

							</Collection>

						</PropertyValue>

					</Record>

				</Annotation>

Below is the chart annotation to which above PV annotation points to:

				<Annotation Term="UI.Chart" Qualifier="CurrencyVisualFilter">

					<Record Type="UI.ChartDefinitionType">

						<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Donut"/>

						<PropertyValue Property="DimensionAttributes">

							<Collection>

								<Record Type="UI.ChartDimensionAttributeType">

									<PropertyValue Property="Dimension" PropertyPath="Currency"/>

									<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>

								</Record>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="MeasureAttributes">

							<Collection>

								<Record Type="UI.ChartMeasureAttributeType">

									<PropertyValue Property="Measure" PropertyPath="Revenue"/>

									<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>

									<PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#revenue"/>

								</Record>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="Measures">

							<Collection>

								<PropertyPath>Revenue</PropertyPath>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="Dimensions">

							<Collection>

								<PropertyPath>Currency</PropertyPath>

							</Collection>

						</PropertyValue>

					</Record>

				</Annotation>

You can also define datapoint annotation for your measure attribute to define the criticality or semantic colouring of your visual filters:

<Annotation Term="UI.DataPoint" Qualifier="revenue">

					<Record Type="UI.DataPointType">

						<PropertyValue Property="Value" Path="Revenue"/>

						<PropertyValue Property="CriticalityCalculation">

							<Record Type="UI.CriticalityCalculationType">

								<PropertyValue Property="ImprovementDirection" EnumMember="UI.ImprovementDirectionType/Minimize"/>

								<PropertyValue Property="AcceptanceRangeLowValue" Decimal="600000"/>

								<PropertyValue Property="AcceptanceRangeHighValue" Decimal="6000000"/>

								<PropertyValue Property="ToleranceRangeLowValue" Decimal="200000"/>

								<PropertyValue Property="ToleranceRangeHighValue" Decimal="400000"/>

								<PropertyValue Property="DeviationRangeLowValue" Decimal="0"/>

								<PropertyValue Property="DeviationRangeHighValue" Decimal="199999"/>

							</Record>

						</PropertyValue>

					</Record>

				</Annotation>

Exercise for the readers

The above example will create a visual filter for currency field, similarly, you can go ahead and create two more visual filters for product ID and delivery month to make your ALP application filter bar looks like the screenshot I posted at the beginning of this blog.

a little help for the Surprise element in the exercise

Once you create other two visual filters and run your ALP application, you will notice that none of the visual filters is rendering. Because the batch call for all the visual filter is getting timed out as the backend public demo system do not support batch call (I guess).

To overcome this, you can mark your model in the manifest of your application to fire the call individually and do not batch them, by marking the property "useBatch" as false

"": {

				"preload": true,

				"dataSource": "mainService",

				"settings": {

					"defaultBindingMode": "TwoWay",

					"defaultCountMode": "Inline",

					"refreshAfterChange": false,

					"useBatch": false,

					"metadataUrlParams": {

						"sap-value-list": "none"

					}

				}

			}

Please note that this is just a workaround, in a productive scenario all the call must be batched for optimal performance of your application.

In my forthcoming blog where I explain ALP application developer extensions, I'll also discuss how can we group ALP visual filter batch calls for optimal performance.

A word of caution !!

We should never create more than one visual filter for one dimension. Like for in our example we have defined only one visual filter for each dimension i.e. currency, product and delivery. This is because let's say you have defined two visual filters like revenue by currency and quantity by currency and in first visual filter end-user have selected USD and in second visual filter, end-user have selected EUR then the final query will be like currency eq 'USD' & currency eq 'EUR', which will never yield any results.

Conclusion

In this blog, we successfully configured the filter area of our ALP application and learnt about different settings for the filter area.

What Next?

In the next blog, I’ll about how to configure ALP's chart area.

EkanshCapgemini · ‎08-19-2019

Hello,

Thanks for the blog. Would you mind sharing the github link for the project as so that we can have a look to the final annotation file?

BR, Ekansh

AshishAnand · ‎08-24-2019

Hi ekansh005 ,

I have provided the GIT repo link under prerequisite section

https://github.com/ashishcorg/ALPdemo

Hope it helps 🙂

Thanks and Regards

Ashish

EkanshCapgemini · ‎09-04-2019

Thanks for mentioning. Monday morning blues must be blamed for missing it at the first place. 🙂

BR, Ekansh

jmey · ‎09-12-2019

Hello,

Thank you for the blog. It helped me a lot, but I still have a question.

I am trying to create an Analytical List Page application based on a XS oData Service generated from a calculation view in SAP HANA Cloud Database (SCP service on Neo environment).

Is there a way to use Variant Management with Local Annotations ? I would like to have some variants like in this demo.

I don’t need to provide to users the functionality to manage or save variants, just to select some preconfigured ones.
Thank you for your help.

Best regards,

Jessy

AshishAnand · ‎09-20-2019

Hello Jessy,

end-users can create variants and make them public so that its available for other end users also. Last time we checked, other users cannot edit the public variants. So this should suffice your requirement I guess.

Hope it helps 🙂

Thanks and Regards

Ashish

marco-silva · ‎09-23-2019

Hi Ashish,

You can find here the question about variant management without a SAP backend. I guess the main point is if it's possible to pre-configure variants in a json file stored in the frontend application. In other hand, I don't think you can save user variants with an app based on an XS oData service... Where would the variant be stored?

Best regards,

Marco

former_member610354 · ‎09-27-2019

Hi Ashish,

Great Blog series.

Can we change the name of the Visual Filters? Ex: Change the Revenue by Product ID to something else?

marco-silva · ‎11-26-2019

Hello ashish.anand4,

Any clue about the last question?

I also have a simpler question: in the “Defaults values for filters”, if for example we want to put a date, like today’s date less 5 days, how to perform it, since the that will be dynamic instead of static? Is there a “clean” way to do it?

Thank you.

Best regards,

Marco

pranav_him · ‎06-17-2020

Hello Ashish,

Hope you are doing good.

I created an Odata Service and in FIORI i am adding Annotation Manually. So i have already defined the Presentation Varaiant and Chart for Visual Filter. But under the Property i provided my Dimension fields and normally when we create ALP with CDS views generated service we provide the CDS view name under Value List.

But in case of Odata i have already provided the Entity Type name but still Visula Filter is not visible. Could you help me if we are manually adding the Annotation then what exactly i need to do to get the visula filter?

Regards,

Pranav

akshaya_p · ‎10-28-2020

Hi Ashish,

Followed the same steps. But my cart doenst render. is data point tolerance values mandatory?

akshaya_p · ‎01-11-2021

Hi Ashish,

UI annotation valuelistwithfixed values doesnt render it s a dropdown. Can you help?

akshaya_p · ‎02-10-2021

Hi Ashish,

The visual filter F4 on changing values doesnt reflect in the chart . ANy reason?

JerMarijnissen · ‎01-25-2022

Thanks for the good blog!

Is there an annotation to show compact fitler always by default ?

Configuring filters area of an Analytical List Page (ALP) application

Prerequisites

Adding filters

Defaults values for filters

Defining the value help for the filters

Defining visual filters

Exercise for the readers

a little help for the Surprise element in the exercise

A word of caution !!

Conclusion

What Next?

Get Your SAP HANA Idea Incubator Badge Today!

SCN Mission - SAP HANA Quiz Challenge is now retired

Share your #HANAStory and Win