Skip to Content
0
Jul 25, 2022 at 05:18 AM

Object Page: Adding Custom Filter Fields in Table Toolbar

276 Views

Hi community,

I want to add custom filter fields to the table toolbar on object page. The app is based on list report template.

custom-filters-on-toolbar.png

Reading the document below, it should be possible with extension. (My UI5 version is 1.84.1)

https://sapui5.hana.ondemand.com/1.84.1/#/topic/e34f78f40c3c447eb53322dc4dafe12a

I have added the following setting to manifest.json and also created a fragment, but the custom fileds are not displayed. (There's no errors in the console relevant to these settings) If anyone has succeeded in displaying custom fields on table toolbar, please let me know.

manifest.json

        "extends": {
            "extensions": {
                "sap.ui.viewExtensions": {
                    "sap.suite.ui.generic.template.ObjectPage.view.Details": {
                        "TableToolBarExtension|A_PurchaseOrder|to_PurchaseOrderItem::com.sap.vocabularies.UI.v1.LineItem": {
                            "type": "XML",
                            "className": "sap.ui.core.Fragment",
                            "fragmentName": "zdev.listreportext.ext.fragment.ToolBar"
                        }
                    }
                }
            }
        }

TooBar.fragment.xml (just copy & paste from the document)

<core:FragmentDefinition
        xmlns="sap.m"
        xmlns:smartfilterbar="sap.ui.comp.smartfilterbar"
        xmlns:core="sap.ui.core">
		
    <Label text="test" labelFor="filterId">
   	<layoutData>
			<OverflowToolbarLayoutData priority="NeverOverflow"/>
		</layoutData>
	 </Label>
    <Select id="filterId" change="onCustomFilterChange">
    	<items>
	        <core:Item key="0" text="A"/>
	        <core:Item key="1" text="B"/>
        </items>
         <layoutData>
			<OverflowToolbarLayoutData priority="NeverOverflow"/>
		</layoutData>
    </Select>
     
</core:FragmentDefinition>

annotation.xml

<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
    <edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/UI.xml">
        <edmx:Include Namespace="com.sap.vocabularies.UI.v1" Alias="UI"/>
    </edmx:Reference>
    <edmx:Reference Uri="/sap/opu/odata/sap/API_PURCHASEORDER_PROCESS_SRV/$metadata">
        <edmx:Include Namespace="API_PURCHASEORDER_PROCESS_SRV" Alias="SAP"/>
    </edmx:Reference>
    <edmx:DataServices>
        <Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="local">
            <Annotations Target="SAP.A_PurchaseOrderType">
                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="PurchaseOrder"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="PurchaseOrderType"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="PurchasingOrganization"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="PurchaseOrderDate"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="PurchasingProcessingStatus"/>
                        </Record>
                    </Collection>
                </Annotation>
                <Annotation Term="UI.Facets">
                    <Collection>
                        <Record Type="UI.ReferenceFacet">
                            <PropertyValue Property="Target" AnnotationPath="to_PurchaseOrderItem/@UI.LineItem"/>
                            <PropertyValue Property="Label" String="Items"/>
                            <PropertyValue Property="ID" String="items"/>
                        </Record>
                    </Collection>
                </Annotation>
            </Annotations>
            <Annotations Target="SAP.A_PurchaseOrderItemType">
                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="PurchaseOrderItem"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="Material"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="MaterialGroup"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="OrderQuantity"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="NetPriceAmount"/>
                        </Record>
                    </Collection>
                </Annotation>
            </Annotations>
        </Schema>
    </edmx:DataServices>
</edmx:Edmx>

Attachments