How to use sap.m.ViewSettingsDialog in a sap.suite.ui.commons.Timeline as a custom filter?

Question

Currently, I want to integrate a multi-faceted filter in a sap.suite.ui.commons.Timeline, as it is described in the Fiori Design Guidelines. The guidelines say, that one have to use a sap.m.ViewSettingsDialog for it.

Looking into the Timeline API says, that there exists an aggregation customFilter, but the control used inside needs to have an openBy function, which is called to open the custom filter popover / dialog.

My problem now is, that the sap.m.ViewSettingsDialog does not have a openBy function, but only (since it is a dialog, the API description reflects it) an open() function.

How do I correctly implement a multi-faceted filter by using the ViewSettingsDialog?

Thanks so much!

Answer 1

You have three options:

1. Use a different Popover (e.g. ResponsivePopover).

2. Hide the filter bar button by setting the showTimeFilter and showItemFilter to false and than add your own button with whatever logic you need:

   oTimeline.getHeaderBar().addContent(new Button({
       press: function () {
         oViewSettingDialog.open();
       }
   });
   

3. You can extend the sap.m.ViewSettingsDialog to add an openBy method which will just call open. It can be done statically:

   var CustomViewSettingDialog = ViewSettingDialog.extend("my.namespace.CustomViewSettingDialog", {
     openBy: function () {
       this.open();
     }
   });
   

   Or in runtime:

   var oViewSettingDialog = new ViewSettingDialog(...);
   oViewSettingDialog.openBy = function () {
     this.open();
   }