prerequisites

AshishAnand · ‎2018 Oct 11

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.

Configuring Smart filter bar of an Overview page (OVP)

prerequisites

How it works

Smart filter bar configuration and annotations

globalFilterModel

globalFilterEntityType

globalFilterEntitySet (depreciated)

enableLiveFilter

@UI.SelectionFields

showDateInRelativeFormat

useDateRangeType

showBasicSearch

considerAnalyticalParameters

making a filter mandatory

@Common.FilterDefaultValue

@V1.ValueList

smartVariantRequired

Removing the filter bar from OVP

Passing filters to OVP application as URL parameters

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