Fiori Elements: Implement Visual Filters in Analytic List Page (ALP)

[akashjagga]

Hi All

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

Problem Statement:

Implementing Visual Filters in ALP is a bit complex task as compared to other general implementations in the field of Fiori Elements. Many a time, rendering of these visual filters is not achieved due to one of the following reasons:

• particular annotations are not known


• annotations are known but correct way of using is not known

Analytic List Page (also known as ALP)

ALP is one of the floorplan of Fiori Elements. It is a great reporting tools which offers a unique way to analyze data step by step from different perspectives. It presents the this variety of information seamlessly within one page. It  consists of two main sections i.e. Header Section and Content section. (Here in this blog, we are going to talk about Visual Filter which is part of Header section)

Visual Filters

Visual Filters are a special attraction feature of ALP. It adds great value to data filtering experience. It provides a mechanism for filtering out parts of analytic or list of elements that are not of interest, leaving just the elements and connectors that are relevant to the view.

Visual Filters consists of a title and an interactive chart. There are 3 types of chart supported for visual filters, which are:

1. Bar Chart


2. Line Chart


3. Donut Chart

So let's move forward and see how these visual filters can be implemented with the help of UI Annotations.

Create ALP App

Although this is not the main topic to cover here, but I'll briefly explain the steps required to come up with an ALP application.

1. Create ALP type project in SAP Web IDE or SAP BAS


2. Add annotation file


3. Add following annotations
   
   
   
   • Selection Presentation Variant Annotation
   
   
   • Presentation Variant Annotation
   
   
   • Chart Annotation
   
   
   • Line Annotation
   
   
   • Selection Field Annotation
   
   
   • Value List Annotation
   
   
   
   


4. Once you have these annotations set up, you can test run your ALP and it will show up as follows:

Note: Here in the header section, compact filters are rendered. Moving forward, we are going to implement Visual Filters in this header area.

Implementing Visual Filters

• Add following annotations
  
  
  
  • Value List Annotation -  with Qualifier
  
  
  • Presentation Variant Annotation - with same Qualifier name
  
  
  • Chart Annotation - with same Qualifier name
  
  
  
  

 

• All these annotations need to be added as sub annotations of the attribute for which we are going to implement this visual filters

 

• Sample/ Example of Value List Annotation
  

  <Annotation Term="Common.ValueList" Qualifier="DEMOVisualFilter1">
  
  					<Record Type="Common.ValueListType">
  
  						<PropertyValue Property="CollectionPath" String="SUMMARYCDSSet"/>
  
  						<PropertyValue Property="Parameters">
  
  							<Collection>
  
  								<Record Type="Common.ValueListParameterIn">
  
  									<PropertyValue Property="LocalDataProperty" PropertyPath="AGR_NAME"/>
  
  									<PropertyValue Property="ValueListProperty" String="ARG_NAME"/>
  
  								</Record>
  
  								<Record Type="Common.ValueListParameterOut">
  
  									<PropertyValue Property="LocalDataProperty" PropertyPath="AGR_NAME"/>
  
  									<PropertyValue Property="ValueListProperty" String="ARG_NAME"/>
  
  								</Record>
  
  							</Collection>
  
  						</PropertyValue>
  
  						<PropertyValue Property="PresentationVariantQualifier" String="DEMOVisualFilter1"/>
  
  					</Record>
  
  				</Annotation>

  
  

Note: For property 'CollectionPath', enter the name of entity set which will be returning the value set for this visual filter.

 

• Sample/ Example of Presentation Variant Annotation
  

  <Annotation Term="UI.PresentationVariant" Qualifier="DEMOVisualFilter1">
  
  					<Record Type="UI.PresentationVariantType">
  
  						<PropertyValue Property="Visualizations">
  
  							<Collection>
  
  								<AnnotationPath>@UI.Chart#AgrVisualFilter</AnnotationPath>
  
  							</Collection>
  
  						</PropertyValue>
  
  					</Record>
  
  				</Annotation>

  
  

• Sample/ Example of Chart Annotation
  

  <Annotation Term="UI.Chart" Qualifier="DEMOVisualFilter1">
  
  					<Record Type="UI.ChartDefinitionType">
  
  						<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
  
  						<PropertyValue Property="Measures">
  
  							<Collection>
  
  								<PropertyPath>SESSIONS</PropertyPath>
  
  							</Collection>
  
  						</PropertyValue>
  
  						<PropertyValue Property="MeasureAttributes">
  
  							<Collection>
  
  								<Record Type="UI.ChartMeasureAttributeType">
  
  									<PropertyValue Property="Measure" PropertyPath="SESSIONS"/>
  
  									<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
  
  								</Record>
  
  							</Collection>
  
  						</PropertyValue>
  
  						<PropertyValue Property="Dimensions">
  
  							<Collection>
  
  								<PropertyPath>AGR_NAME</PropertyPath>
  
  							</Collection>
  
  						</PropertyValue>
  
  						<PropertyValue Property="DimensionAttributes">
  
  							<Collection>
  
  								<Record Type="UI.ChartDimensionAttributeType">
  
  									<PropertyValue Property="Dimension" PropertyPath="AGR_NAME"/>
  
  									<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>
  
  								</Record>
  
  							</Collection>
  
  						</PropertyValue>
  
  					</Record>
  
  				</Annotation>

  
  

• So we made it. Visual Filters implementation is complete, once you have these annotations set up. After this, you can test run your ALP and it will show up as follows:

 

Conclusion

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

---

 

I understand that this topic is a bit complex, but I hope this read will help you understand and implement.

Please share your feedback or thoughts in comment section. It will encourage me to come up with more good content and contribute.

Also I welcome you to follow my profile for more similar content (Of course, if you feel it was helpful).

Following are some go to destinations of SAP Community for deeper dive into similar content:

• Follow the Fiori Elements environment Topic page:
  
  
  
  • https://community.sap.com/topics/fiori-elements
  
  
  
  


• Q and A section
  
  
  
  • https://answers.sap.com/tags/ed5c1ef6-932f-4c19-b2ba-1be375109ff5
  
  
  
  


• More content on Fiori Elements
  
  
  
  • https://blogs.sap.com/tags/ed5c1ef6-932f-4c19-b2ba-1be375109ff5/
  
  
  
  

 

Happy reading 🙂 Best Wishes