Skip to Content
0
Mar 16, 2022 at 10:08 PM

Filter items in a Object Page Table with Fiori Elements / CAP Node JS

1566 Views

Hi,

I have a fiori elements app on oData v4 where the main entity set contains items, and I want to show a filtered subset of those items on the object page. I am trying to achieve this through "SelectionPresentationVariant" annotations but cannot get this to work.

I can see all the annotations coming through in the metadata file (pasted below), so it should not be syntax errors. There are two variants

  • "Occurred" which is supposed to show all entries with the "occurred" flag is true and sorted by "eventDate"
  • "Due" which is supposed to show the ones where "occurred" is false, and instead sort by "dueDate"

I have been trying the different variants of building the SelctionPresentationVariant (the subitems inline or via reference) and using SelectOptions as well as explicit "FilterExpression". With all the approaches I try the output is showing the columns I expect and the correct sorting, but there is no filtering. Inspecting the network traffic there is also no $filter=... being passed along.

Hoping somebody can clarify what is wrong here?

Thanks!

//Carl

   <Annotation Term="UI.SelectionPresentationVariant" Qualifier="Occurred">
      <Record Type="UI.SelectionPresentationVariantType">
         <PropertyValue Property="SelectionVariant">
            <Record Type="UI.SelectionVariantType">
               <PropertyValue Property="FilterExpression" String="occurred eq true" />
            </Record>
         </PropertyValue>
         <PropertyValue Property="PresentationVariant">
            <Record Type="UI.PresentationVariantType">
               <PropertyValue Property="MaxItems" Int="20" />
               <PropertyValue Property="Visualizations">
                  <Collection>
                     <AnnotationPath>@UI.LineItem#Occurred</AnnotationPath>
                  </Collection>
               </PropertyValue>
               <PropertyValue Property="SortOrder">
                  <Collection>
                     <Record Type="Common.SortOrderType">
                        <PropertyValue Property="Property" PropertyPath="eventDate" />
                        <PropertyValue Property="Descending" Bool="false" />
                     </Record>
                  </Collection>
               </PropertyValue>
            </Record>
         </PropertyValue>
      </Record>
   </Annotation>
   <Annotation Term="UI.SelectionPresentationVariant" Qualifier="Due">
      <Record Type="UI.SelectionPresentationVariantType">
         <PropertyValue Property="SelectionVariant" Path="@UI.SelectionVariant#Due" />
         <PropertyValue Property="PresentationVariant" Path="@UI.PresentationVariant#Due" />
      </Record>
   </Annotation>
   <Annotation Term="UI.SelectionVariant" Qualifier="Due">
      <Record Type="UI.SelectionVariantType">
         <PropertyValue Property="SelectOptions">
            <Collection>
               <Record Type="UI.SelectOptionType">
                  <PropertyValue Property="PropertyName" PropertyPath="occurred" />
                  <PropertyValue Property="Ranges">
                     <Collection>
                        <Record Type="UI.SelectionRangeType">
                           <PropertyValue Property="Sign" EnumMember="UI.SelectionRangeSignType/I" />
                           <PropertyValue Property="Option" EnumMember="UI.SelectionRangeOptionType/EQ" />
                           <PropertyValue Property="Low" Bool="false" />
                        </Record>
                     </Collection>
                  </PropertyValue>
               </Record>
            </Collection>
         </PropertyValue>
      </Record>
   </Annotation>
   <Annotation Term="UI.PresentationVariant" Qualifier="Due">
      <Record Type="UI.PresentationVariantType">
         <PropertyValue Property="MaxItems" Int="20" />
         <PropertyValue Property="Visualizations">
            <Collection>
               <AnnotationPath>@UI.LineItem#Due</AnnotationPath>
            </Collection>
         </PropertyValue>
         <PropertyValue Property="SortOrder">
            <Collection>
               <Record Type="Common.SortOrderType">
                  <PropertyValue Property="Property" PropertyPath="dueDate" />
                  <PropertyValue Property="Descending" Bool="false" />
               </Record>
            </Collection>
         </PropertyValue>
      </Record>
   </Annotation>
The CDS annotations to generate the above metadata are the following:
annotate service.MyEntity with @(
    UI: {
        SelectionFields: [
            occurred
        ],
        SelectionPresentationVariant #Occurred: {
            SelectionVariant: {
                SelectOptions: [
                    {
                        PropertyName : occurred,
                        Ranges : [
                            {
                                Sign: #I,
                                Option : #EQ,
                                Low : false
                            }
                        ]
                    }
                ],
            },
            PresentationVariant: {
                MaxItems : 20,
                Visualizations : ['@UI.LineItem#Occurred'],
                SortOrder : [
                    {
                        Property : eventDate,
                        Descending : false
                    }
                ]
            },
        },
        SelectionPresentationVariant #Due: {
            SelectionVariant: {
                SelectOptions: [
                    {
                        PropertyName : occurred,
                        Ranges : [
                            {
                                Sign: #I,
                                Option : #EQ,
                                Low : false
                            }
                        ]
                    }
                ],
            },
            PresentationVariant: {
                MaxItems : 20,
                Visualizations : ['@UI.LineItem#Due'],
                SortOrder : [
                    {
                        Property : dueDate,
                        Descending : false
                    }
                ]
            },
        },
        LineItem #Occurred: [
            {
                $Type : 'UI.DataField',
                Value : eventDate,
                ![@UI.Importance] : #High,
            }
        ],
        LineItem #Due: [
            {
                $Type : 'UI.DataField',
                Value : dueDate,
                ![@UI.Importance] : #High,
            }
        ],
    }
);