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

[carlonnheim]

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,
            }
        ],
    }
);

[gwendal_moreau · Accepted solution]

Hi Karl,

SelectionPresentationVariant are not directly supported yet on tables within an objectPage, only the PresentationVariant is applied.

In your case, using segmented buttons instead (please see https://ui5.sap.com/#/topic/5532c899e6e94137b18b8ee68df12efb ) should allow to achieve your target.

Kind regards.

Gwendal.

[carlonnheim · Accepted solution]

Thanks for this gwendal.moreau, works like a charm! One followup though - is there a way to get a PresentationVariant to take effect behind those segmented buttons? I am not able to make that happen, have tried pointing the "annotationPath" of these segmented buttons to a "SelectionPresentationVariant", but it is not taking effect.

Closest I am getting to achieve this is to set up two "ReferenceFacets" pointing to their respective LineItem annotations, then annotating those LineItem annotations with as single "QuickFilter". But this seems a bit backwards, is there a better way?

Thanks!

//Carl

[carlonnheim · Accepted solution]

Hi gwendal.moreau , any updates on this topic? Came across the same scenario again and for what I can see it remains without support in recent FE versions too?

Thanks!

//Carl

[monokizsolt7 · Accepted solution]

I confirm that SelectionPresentationVariant is not working in Fiori Elements CAP. Can we expect any updates gwendal.moreau ?

[gwendal_moreau · Accepted solution]

Hi Zsolt,

We are looking at it but no commitment yet as the support will require both technical and UX changes.

Kind regards.

Gwendal.

[David21 · Accepted solution]

any update on this ?

[kannaujiyaashutosh03]

Hi,

I have a fiori elements app on oData v4 and there are three filters in object page list like OccurredCaseEvents , DueCaseEvents, AllCaseEvents. I want to hide one table (Due Date) only from OccurredCaseEvents filter . When i am trying to hide this table (Due Date) , It is getting hidden from everywhere. So can you suggest me how to hide this table (Due Date) only in OccurredCaseEvents filter. 

I have pasted some screenshot below.