Technical Articles
Configuring Smart filter bar of an Overview page (OVP)
Smart filter bar of the OVP provides functionalities like variant management, global filters for the complete cards and standard and custom global action buttons. In this blog, we will learn about concepts and configurations for OVP’s smart filter bar. OVP’s smart filter bar is implemented on top of UI5 smart filter bar.
prerequisites
Make sure you have been to the previous blog of this blog series.
How it works
As discussed in the previous blog, smart filter bar of the OVP application can only be bound to one entity set of a model. But the cards in the OVP application can bind only to different entity set of different model. So there may be a case (which is very common in real-world use cases) where smart filter bar is bound to a completely different entity set and cards are bound to a completely different entity set. So how the global filtering works?
So when trying to apply a filter based on the specific attribute, In our demo application we are trying to filter based on attribute “Supplier” then the OVP traverse all the cards and search if the entity set to which the card is bound, have an attribute named “Supplier” or not? if the attribute is present then only a call is fired for that card else the filter call is not fired and card content remains same.
Smart filter bar configuration and annotations
Following configurations are supported in manifest.json for the smart filter bar
{
.....
"sap.ovp": {
"globalFilterModel": "GWSAMPLE_BASIC",
"globalFilterEntityType": "GlobalFilters",
"containerLayout": "resizable",
"enableLiveFilter": true,
"considerAnalyticalParameters": true,
"showDateInRelativeFormat": true,
"useDateRangeType": true,
"showBasicSearch": true,
"smartVariantRequired": true,
"cards": {}
}
}I will discuss them in details in below sections
globalFilterModel
Application model name to which smart filter bar should be bound.
globalFilterEntityType
Entity type to which smart filter bar should be bound.
Important: smart filter bar can only be bound to one entity of one model. whereas different cards can be bound to different entities of different models.
globalFilterEntitySet (depreciated)
Entity set to which smart filter bar should be bound.
Important: this attribute is deprecated and instead globalFilterEntityType should be used.
enableLiveFilter
if enableLiveFilter is true then the data will refresh as soon a filter value changes. if set to false user will have to click the “Go” button at the bottom of the smart filter bar.
@UI.SelectionFields
If you run the demo app now, you will notice that only fields like Display Currency, Supplier, Country, Material, Material Group, Purchasing Category, Purchasing Group, Purch. Organization are visible in the smart filter bar.
But If you look at the manifest, you will find that entity set “GlobalFilters” have others attributes also like NetAmount, Land1, CityName etc, which are not shown in the visible area of the smart filter bar but are hidden inside the “adapt filter” pop up.
<EntityType Name="GlobalFilters" sap:label="Global Filters" sap:semantics="aggregate" sap:content-version="1">
<Key>
<PropertyRef Name="CurrencyCode"/>
</Key>
<Property Name="DeliveryDate" Type="Edm.DateTime" sap:label="Delivery Date" Precision="0" sap:display-format="Date"
sap:filter-restriction="interval"/>
<Property Name="OrderedAmount" Type="Edm.Decimal" sap:label="Ordered Amount" Precision="13" Scale="3"/>
<Property Name="OverdueTime" Type="Edm.Int32" sap:label="Overdue Time"/>
<Property Name="SupplierName" Type="Edm.String" MaxLength="35" sap:label="Supplier"/>
<Property Name="CityName" Type="Edm.String" MaxLength="35" sap:label="City Name"/>
<Property Name="Land1" Type="Edm.String" MaxLength="3" sap:label="Country" sap:semantics="country"/>
<Property Name="CurrencyCode" Type="Edm.String" MaxLength="5" sap:label="Sales Order Currency" sap:creatable="false" sap:updatable="false"
sap:semantics="currency-code"/>
<Property Name="NetAmount" Type="Edm.Decimal" Precision="16" Scale="3" sap:unit="CurrencyCode" sap:label="Net Amt." sap:creatable="false"
sap:updatable="false"/>
<Property Name="MaterialName" Type="Edm.String" MaxLength="40" sap:label="Material"/>
<Property Name="MaterialGroup" Type="Edm.String" MaxLength="40" sap:label="Material Group"/>
<Property Name="PurchasingCategory" Type="Edm.String" MaxLength="40" sap:label="Purchasing Category"/>
<Property Name="PurchasingGroup" Type="Edm.String" MaxLength="40" sap:label="Purchasing Group"/>
<Property Name="PurchasingOrganization" Type="Edm.String" MaxLength="40" sap:label="Purch. Organization"/>
</EntityType>We can configure the default visibility of the attributes is controlled by the annotation UI.SelectionFields defined in the annotation file (in our case)
<Annotations Target="GWSAMPLE_BASIC.GlobalFilters">
<Annotation Term="com.sap.vocabularies.UI.v1.TextArrangement" EnumMember="com.sap.vocabularies.UI.v1.TextArrangementType/TextLast"/>
<Annotation Term="UI.SelectionFields">
<Collection>
<Record>
<PropertyPath>SupplierName</PropertyPath>
</Record>
<Record>
<PropertyPath>Land1</PropertyPath>
</Record>
<Record>
<PropertyPath>MaterialName</PropertyPath>
</Record>
<Record>
<PropertyPath>MaterialGroup</PropertyPath>
</Record>
<Record>
<PropertyPath>PurchasingCategory</PropertyPath>
</Record>
<Record>
<PropertyPath>PurchasingGroup</PropertyPath>
</Record>
<Record>
<PropertyPath>PurchasingOrganization</PropertyPath>
</Record>
</Collection>
</Annotation>
</Annotations>Rest of the filters will be inside “Adapt Filter” button and can be brought to the visible area by the end user at runtime.
showDateInRelativeFormat
useDateRangeType
showBasicSearch
attribute showBasicSearch should be true to have a search box in the smart filter bar. This search is only performed on entities:
- if sap:searchable=”true” in metadata
<EntityContainer Name="GWSAMPLE_BASIC_Entities" m:IsDefaultEntityContainer="true">
<EntitySet Name="BusinessPartnerSet" EntityType="GWSAMPLE_BASIC.BusinessPartner" sap:content-version="1" sap:searchable=”true”/>
....2. @v1.SearchRestrictions
<Annotations Target="GWSAMPLE_BASIC.GlobalFilters/PurchasingGroup">
<Annotation Term="Org.OData.Capabilities.V1.SearchRestrictions">
<Record>
<PropertyValue Property="Searchable" Bool="true"/>
</Record>
</Annotation>
</Annotations>considerAnalyticalParameters
To enable analytical parameters for the smart filter bar, considerAnalyticalParameters flag in the manifest.json should be set to true.
Service metadata should be changed in the following way:
- Create parameter entity with sap:semantics = “parameters”. Each individual property should be set to mandatory. We will need to define one Navigation Property for the Entity named Results.
<EntityType Name="GlobalParameters" sap:label="Global Parameters" sap:semantics="parameters" sap:content-version="1">
<Key>
<PropertyRef Name="P_DisplayCurrency"/>
</Key>
<Property Name="P_DisplayCurrency" Type="Edm.String" MaxLength="5" sap:label="Display Currency" sap:parameter="mandatory" DefaultValue="EUR"
sap:creatable="false" sap:updatable="false" sap:semantics="currency-code"/>
<NavigationProperty Name="Results" Relationship="GWSAMPLE_BASIC.Assoc_GlobalParameters_GlobalFilters"
FromRole="FromRole_Assoc_GlobalParameters_GlobalFilters" ToRole="ToRole_Assoc_GlobalParameters_GlobalFilters"/>
</EntityType>2. Create result entity with sap:semantics = “aggregate”.
<EntityType Name="GlobalFilters" sap:label="Global Filters" sap:semantics="aggregate" sap:content-version="1">
<Key>
<PropertyRef Name="CurrencyCode"/>
</Key>
<Property Name="DeliveryDate" Type="Edm.DateTime" sap:label="Delivery Date" Precision="0" sap:display-format="Date"
sap:filter-restriction="interval"/>
<Property Name="OrderedAmount" Type="Edm.Decimal" sap:label="Ordered Amount" Precision="13" Scale="3"/>
<Property Name="OverdueTime" Type="Edm.Int32" sap:label="Overdue Time"/>
<Property Name="SupplierName" Type="Edm.String" MaxLength="35" sap:label="Supplier"/>
<Property Name="CityName" Type="Edm.String" MaxLength="35" sap:label="City Name"/>
<Property Name="Land1" Type="Edm.String" MaxLength="3" sap:label="Country" sap:semantics="country"/>
<Property Name="CurrencyCode" Type="Edm.String" MaxLength="5" sap:label="Sales Order Currency" sap:creatable="false" sap:updatable="false"
sap:semantics="currency-code"/>
<Property Name="NetAmount" Type="Edm.Decimal" Precision="16" Scale="3" sap:unit="CurrencyCode" sap:label="Net Amt." sap:creatable="false"
sap:updatable="false"/>
<Property Name="MaterialName" Type="Edm.String" MaxLength="40" sap:label="Material"/>
<Property Name="MaterialGroup" Type="Edm.String" MaxLength="40" sap:label="Material Group"/>
<Property Name="PurchasingCategory" Type="Edm.String" MaxLength="40" sap:label="Purchasing Category"/>
<Property Name="PurchasingGroup" Type="Edm.String" MaxLength="40" sap:label="Purchasing Group"/>
<Property Name="PurchasingOrganization" Type="Edm.String" MaxLength="40" sap:label="Purch. Organization"/>
</EntityType>3. Define an Association between the Parameters and the Results
<AssociationSet Name="Assoc_GlobalParameters_GlobalFilters_Set" Association="GWSAMPLE_BASIC.Assoc_GlobalParameters_GlobalFilters"
sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:content-version="1">
<End EntitySet="GlobalParameters" Role="FromRole_Assoc_GlobalParameters_GlobalFilters"/>
<End EntitySet="GlobalFilters" Role="ToRole_Assoc_GlobalParameters_GlobalFilters"/>
</AssociationSet>making a filter mandatory
any filter attribute having annotation sap:required-in-filter=“true“ in metadata becomes a mandatory filter bar
<EntityType Name="GlobalParameters" sap:label="Global Parameters" sap:semantics="parameters" sap:content-version="1">
<Key>
<PropertyRef Name="P_DisplayCurrency"/>
</Key>
<Property Name="P_DisplayCurrency" Type="Edm.String" MaxLength="5" sap:label="Display Currency" sap:parameter="mandatory" DefaultValue="EUR"
sap:creatable="false" sap:updatable="false" sap:semantics="currency-code"/>
<NavigationProperty Name="Results" Relationship="GWSAMPLE_BASIC.Assoc_GlobalParameters_GlobalFilters"
FromRole="FromRole_Assoc_GlobalParameters_GlobalFilters" ToRole="ToRole_Assoc_GlobalParameters_GlobalFilters"/>
</EntityType>in our sample application, display currency filter is mandatory.
@Common.FilterDefaultValue
The default value for normal filters can be set using annotation FilterDefaultValue
<Annotations Target="GWSAMPLE_BASIC.GlobalFilters/SupplierName">
<Annotation Term="com.sap.vocabularies.Common.v1.FilterDefaultValue" String="SAP"></Annotation>
</Annotations>In our sample application, the supplier filter has the default value of “SAP”.
For parameterized filters, a default value can be set in metadata itself with “DefaultValue” attribute like below:
<EntityType Name="GlobalParameters" sap:label="Global Parameters" sap:semantics="parameters" sap:content-version="1">
<Key>
<PropertyRef Name="P_DisplayCurrency"/>
</Key>
<Property Name="P_DisplayCurrency" Type="Edm.String" MaxLength="5" sap:label="Display Currency" sap:parameter="mandatory" DefaultValue="EUR"
sap:creatable="false" sap:updatable="false" sap:semantics="currency-code"/>
<NavigationProperty Name="Results" Relationship="GWSAMPLE_BASIC.Assoc_GlobalParameters_GlobalFilters"
FromRole="FromRole_Assoc_GlobalParameters_GlobalFilters" ToRole="ToRole_Assoc_GlobalParameters_GlobalFilters"/>
</EntityType>In our sample application, the Currency code filter has the default value of “EUR”.
@v1.ValueList
Filters can have value help which can be achieved via annotation v1.ValueList.
<Annotations Target="GWSAMPLE_BASIC.GlobalFilters/Land1">
<Annotation Term="com.sap.vocabularies.Common.v1.ValueList">
<Record>
<PropertyValue Property="Label" String="Country Code"/>
<PropertyValue Property="CollectionPath" String="VH_CountrySet"/>
<PropertyValue Property="SearchSupported" Bool="true"/>
<PropertyValue Property="Parameters">
<Collection>
<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="Land1"/>
<PropertyValue Property="ValueListProperty" String="Land1"/>
</Record>
<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="Natio"/>
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
</Annotations>“CollectionPath” propertyValue should point to another entity set in the same model, in our case its “VH_CountrySet”
<EntityType Name="VH_Country" sap:content-version="1">
<Key>
<PropertyRef Name="Land1"/>
</Key>
<Property Name="Land1" Type="Edm.String" Nullable="false" MaxLength="3" sap:label="Country" sap:creatable="false" sap:updatable="false"
sap:sortable="false" sap:filterable="false"/>
<Property Name="Landx" Type="Edm.String" Nullable="false" MaxLength="15" sap:label="Name" sap:creatable="false" sap:updatable="false"
sap:sortable="false" sap:filterable="false"/>
<Property Name="Natio" Type="Edm.String" Nullable="false" MaxLength="15" sap:label="Nationality" sap:creatable="false" sap:updatable="false"
sap:sortable="false" sap:filterable="false"/>
</EntityType>In our sample application, filter country has a value help which points to the entity “VH_Country”.
smartVariantRequired
smart filter bar functionalities like save, load and change of variant are supported only when this configuration is set to true.
Removing the filter bar from OVP
to remove the filter bar from OVP:
- smartVariantRequired should be false
- globalFilterEntityType should be removed from manifest.json
- description should have a value
also if you want to remove the application header also, remove description also from manifest.json.
Passing filters to OVP application as URL parameters
filters can be passed to OVP application as URL parameters in the Key-value format, where Key stands for the filter name and value is value for the filter. Examples of the same for sample application are :
?P_DisplayCurrency=USD&Land1=AF
Conclusion
In this blog, we successfully configured the smart filter bar of our OVP application and learnt about different settings for smart filter bar configuration.
What Next?
In the next blog, I’ll discuss list and table cards provided in OVP.
Hi Ashish,
Thanks a lot for the detailed blog. The OVP blog series is really wonderful. You have captured many things in one place, which would surely help the Fiori Element developers to pursue the front end development.
I came across one issue while implementing OVP. If possible, can you please answer the following link
https://answers.sap.com/questions/679354/annotation-for-fiori-overview-page-filter.html
Regards,
SAP Learner
Hi Ashish ,
The blog is very helpful , Thanks for detailed explaination .
Can you please help me with custom filters so that I can display only Last 5 mins data on my cards from IOT-MMS table .
BR,
Atul .
Hi Atul,
Thanks for your feedback 🙂
You can use the manifest property "refreshIntervalInMinutes" to refresh your card model every 5 minutes so your OVP request the data every 5 minutes. you can read more about it here.
To always fetch the 5 minutes live data, you can manipulate the filter via "custom filter" breakout provided by OVP. you can read more about it here.
Hope it helps 🙂
Thanks and Regards
Ashish
Hi Ashish,
Thank you for writing this blog. We have a similar requirement and your blog helped me a lot.
I have one question. Is it possible to pass $filter for the CollectionPath referenced inside v1.ValueList?
Regards,
Himanshu
Hi Himanshu,
as far as my understanding, it is not supported. But I"m not an expert on smart filter bar. You be some smart filter bar expert can help you in a better way.
If smart filter bar supports it, OVP will support it out of the box.
Thanks and Regards
Ashish
Hi Ashish,
Great blog! for fiori consultants.
I am facing issue while following steps for defining configuration in manifest.json while setting property “showBasicSearch”: true. It’s throwing error “property showBasicSearch is not allowed“.
Can you help here. I am using ES5 demo system.
Hi rakesh singh ,
It's a proper property and can be used. May you try and run your project and check if search bar is coming or not.
Hope it helps 🙂
Thanks and Regards
Ashish
thank for the great blog! Is there a setting for always showing the filter bar (expand header) ?
Hi,
Thanks for the feedback.
In OVP there is no manifest setting to keep the filter bar expanded. It will only be expanded in case you have some mandatory filters which are not fulfilled.
Thanks and Regards
Ashish
Hi Ashish,
I set the controlconfiguartion of smartfilterbar in my customcontroller's init method as mandatory. it shows as mandatory but in all cards I get" cannot load card error"
Hi Ashish,
Really useful blog. Thanks for sharing the information.
I have a requirement like inside the Smart Filter Field's Value help of a Standard List Report Template, i need to define a Tree table to display the search results. Kindly guide me how to control the tableType property inside that value help request.
Thanks,
Happy
Hello Happy,
Thanks for your feedback. Sorry I couldn't help much here as I'm not an expert on Smart filter bar, May be you can redirect this query to some Smart filter bar expert.
Thanks and Regards
Ashish
Hi Ashish Anand
Can you tell me how to pass url parameter through annotation. I added it under selection variant->filter expression annotation. Also I gave Selection variants with ranges. But on click of go the values are not passed to backend. Please help.
Hi Sakthi,
Try providing the selection variant at the card level, it shall get propagated while navigating.
Hope it helps 🙂
Thanks and Regards
Ashish
Hi all,
i have successfully implemented a value help for the search field. By default a Odata request with a $top=10 statement is added. In my example i have more then 10 results. If i use the button Show all Itmes my inserted search string is not used any more. So all Vendors will be shown.
Do you know how to solve this issue?
Hi Friends. I have followed these step but I can't see the fields of entity "Parameters" into Filter Bar. I only see the entity "Results" (othes filters). I have change the metadata as follow.
But when I execute the OVP I can't see P_DisplayCurrency
Could you Help me ??
Thank you very much in advance.
Javier.
Hi Ashish, i have configured country name in OVP smartfiletrbar but i wnat to apss country code on navigation . is it possible?