cancel
Showing results for 
Search instead for 
Did you mean: 

Object Page: Adding Custom Filter Fields in Table Toolbar

MioYasutake
Active Contributor
0 Kudos
613

Hi community,

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

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>

Accepted Solutions (1)

Accepted Solutions (1)

MioYasutake
Active Contributor
0 Kudos

The follwoing part in manifest.json was wrong.

"TableToolBarExtension|A_PurchaseOrder|to_PurchaseOrderItem::com.sap.vocabularies.UI.v1.LineItem"

It should be

"TableToolBarExtension|A_PurchaseOrder|items"

to align with the facet ID for item table.

Answers (0)