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.
Make sure you have been to the previous blog of this blog series.
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.
Following configurations are supported in manifest.json for the smart filter bar
I will discuss them in details in below sections
Application model name to which smart filter bar should be bound.
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.
Entity set to which smart filter bar should be bound.
Important: this attribute is deprecated and instead globalFilterEntityType should be used.
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.
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.
We can configure the default visibility of the attributes is controlled by the annotation UI.SelectionFields defined in the annotation file (in our case)
Rest of the filters will be inside "Adapt Filter" button and can be brought to the visible area by the end user at runtime.
attribute showBasicSearch should be true to have a search box in the smart filter bar. This search is only performed on entities:
2. @V1.SearchRestrictions
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:
2. Create result entity with sap:semantics = "aggregate”.
3. Define an Association between the Parameters and the Results
any filter attribute having annotation sap:required-in-filter="true" in metadata becomes a mandatory filter bar
in our sample application, display currency filter is mandatory.
The default value for normal filters can be set using annotation FilterDefaultValue
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:
In our sample application, the Currency code filter has the default value of "EUR".
Filters can have value help which can be achieved via annotation v1.ValueList.
"CollectionPath" propertyValue should point to another entity set in the same model, in our case its "VH_CountrySet"
In our sample application, filter country has a value help which points to the entity "VH_Country".
smart filter bar functionalities like save, load and change of variant are supported only when this configuration is set to true.
to remove the filter bar from OVP:
also if you want to remove the application header also, remove description also from manifest.json.
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
In this blog, we successfully configured the smart filter bar of our OVP application and learnt about different settings for smart filter bar configuration.
In the next blog, I’ll discuss list and table cards provided in OVP.
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.
- SAP Managed Tags:
18 Comments
