Custom Filters

Add custom filters to your Overview Page application. It provides end users an option to filter the data displayed in one or more cards.

Steps

  1. Create view extension fragment.

    Table 61:

    Property

    Description

    groupId

    Enter group ID to associate the custom controller to a group.

    key

    Enter a property of an entity type to define the filter criteria.

    visibleInAdvancedArea

    Enable this property to view custom filters on the filter bar.

    Input id

    Enter a property of an entity type to define the input criteria.

  2. Create controller extension. For example, create customFilter.controller.js file and define the following functions.
    • Define getCustomFilters() to return a filter object.
              getCustomFilters: function () {
      
                  var oValue1 = this.oView.byId("ProductID").getValue();
                  var oValue2 = this.oView.byId("SalesOrderID").getValue();
      
      
                  var aFilters = [], oFilter1, oFilter2;
      
                  if (oValue1) {
                      oFilter1 = new Filter({
      
                          path: "ProductID",
                          operator: "EQ",
                          value1: oValue1
      
                      });
      
                      aFilters.push(oFilter1);
      
                  }
      
                  if (oValue2) {
                      oFilter2 = new Filter({
      
                          path: "SalesOrderID",
                          operator: "EQ",
                          value1: oValue2
      
                      });
      
                      aFilters.push(oFilter2);
                  }
      
                  if (aFilters && aFilters.length > 0) {
                      return (new Filter(aFilters, true));
                  }
                  
              },
    • Define getCustomAppStateDataExtension(oCustomData) to store the application state.
              getCustomAppStateDataExtension: function (oCustomData) {
                  //the content of the custom field shall be stored in the app state, so that it can be restored later again e.g. after a back navigation.
                  //The developer has to ensure, that the content of the field is stored in the object that is returned by this method.
                  if (oCustomData) {
      
                      var oCustomField1 = this.oView.byId("ProductID");
                      var oCustomField2 = this.oView.byId("SalesOrderID");
                      if (oCustomField1) {
                          oCustomData.ProductID = oCustomField1.getValue();
                      }
                      if (oCustomField2) {
                          oCustomData.SalesOrderID = oCustomField2.getValue();
                      }
                  }
              },
    • Define restoreCustomAppStateDataExtension(oCustomData) to restore the application state.
              restoreCustomAppStateDataExtension: function (oCustomData) {
                  //in order to to restore the content of the custom field in the filter bar e.g. after a back navigation,
                  //an object with the content is handed over to this method and the developer has to ensure, that the content of the custom field is set accordingly
                  //also, empty properties have to be set
                  if (oCustomData) {
      
                      if (oCustomData.ProductID) {
                          var oCustomField1 = this.oView.byId("ProductID");
                          oCustomField1.setValue(oCustomData.ProductID);
                      }
      
                      if (oCustomData.SalesOrderID) {
                          var oCustomField2 = this.oView.byId("SalesOrderID");
                          oCustomField2.setValue(oCustomData.SalesOrderID);
                      }
                  }
      
              },
  3. Add controller and view extension settings to the manifest.