Skip to Content

Set compact filter default value in Analytical List Page (Fiori Elements)

Is it possible to set a filter default value in to a Date Range on a compact filter in an Analytical List Page?

It is possible with an Overview Page using the instructions at https://blogs.sap.com/2018/08/23/fiori-ovp-defaulting-values-into-global-filters/ however i can't get the same methodology to work for an ALP. Krishna Kishor Kammaje has given some pointers at https://blogs.sap.com/2018/08/20/navigation-from-a-fiori-ovp/ but i'm unable to get it working.

This is the OVP working as expected.

capture.png (10.5 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Best Answer
    Sep 18, 2018 at 10:02 AM

    Having inspected the UI5 code, the following enables this functionality.

    Manifest.json:

    (where file name customMain.contoller.js is placed inside a folder at path webapp>ext>controller)

    "extends": {
    			"extensions": {
    				"sap.ui.controllerExtensions": {
    					"sap.suite.ui.generic.template.AnalyticalListPage.view.AnalyticalListPage": {
    						"controllerName": "[namespace.here].ext.controller.customMain"
    					}
    				}
    			}
    		},
    

    customMain.controller.js

    sap.ui.define([], function () {
    	"use strict";
    	return sap.ui.controller("[YourProjectNamespace.here].ext.controller.customMain", {
    
    		onBeforeRendering: function () {
    
    			// Get reference to SmartFilterBar
    			var oSmartFilter = this.getView().byId("template::SmartFilterBar");
    
    			//Create JSON data to be defaulted
    			var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({
    				pattern: "yyyy-MM-dd"
    			});
    			var oToday = dateFormat.format(new Date());
    			var o30DaysEarlier1 = new Date();
    			o30DaysEarlier1.setDate(o30DaysEarlier1.getDate() - 30);
    			var o30DaysEarlier = dateFormat.format(new Date(o30DaysEarlier1));
    			var oDefaultFilter = {
    				WorkDate: {
    					low: o30DaysEarlier,
    					high: oToday
    				}
    			};
    
    			//Default the Global filter values
    			oSmartFilter.setFilterData(oDefaultFilter);
    		}
    	});
    });
    

    Also within the OData service class definition if you want to set the filter field as a date you need to ensure that you redefine the DEFINE method.

    method DEFINE.
    
    DATA: lo_entity_type TYPE REF TO /iwbep/if_mgw_odata_entity_typ,
    
              lo_property    TYPE REF TO /iwbep/cl_mgw_odata_property,
              lo_annotation  TYPE REF TO /iwbep/if_mgw_odata_annotation.
    
        super->define( ).
    
        lo_entity_type = model->get_entity_type( iv_entity_name = '[ODataQueryTypeHere]Type' ).
    
        lo_property ?= lo_entity_type->get_property( iv_property_name = '[FieldYouWantToFilterOn]' ).
    
        CALL METHOD lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation
    
          EXPORTING
            iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace
    
          RECEIVING
            ro_annotation           = lo_annotation.
    
        lo_annotation->add( iv_key = 'display-format' iv_value = 'Date' ).
    
        lo_annotation->add( iv_key = 'filter-restriction' iv_value = 'interval' ).
    
        CALL METHOD lo_property->/iwbep/if_mgw_odata_property~set_type_edm_datetime.
    
        CALL METHOD lo_property->/iwbep/if_mgw_odata_property~set_internal_type
          EXPORTING
            iv_type = cl_abap_typedescr=>typekind_date.
    
      endmethod.

    Which gives the following definition in the OData service metadata

    <Property Name="[FieldYouWantToFilterOn]" Type="Edm.DateTime" Precision="0" sap:aggregation-role="dimension" sap:creatable="false" sap:display-format="Date" sap:filter-restriction="interval" sap:semantics="yearmonthday"sap:text="[FieldYouWantToFilterOn]_T" sap:updatable="false" sap:label="[LabelOfFieldYouWantToFilterOn]"/>

    With the end result being


    capture.png (6.8 kB)
    Add comment
    10|10000 characters needed characters exceeded

    • Hi Mark,

      I followed the same same steps for ALP but not able to achieve the default filter.

      oSmartFilter.setFilterData(oDefaultFilter); 

      statement above does not change filter values in any way.

      tested in console by command oSmartFilter.getFilterData(); but does not return value of oDefaultFilter after oSmartFilter.setFilterData(oDefaultFilter) call.

      Am I missing something ? Only difference is I have my odata service an xsodata XSC based service and not ABAP CDS.

      Thanks,

      Tanveer

      capture.jpg (23.6 kB)
  • Sep 15, 2018 at 06:41 AM

    I believe it should be similar. Get a reference to the Global filter of the ALP, and call setFilterData on it. What have you got?

    Add comment
    10|10000 characters needed characters exceeded

  • Sep 17, 2018 at 09:41 AM

    Hi Krishna. Thanks for responding.

    My controller file is:

    sap.ui.define([], function() {
    	"use strict";
    	return sap.ui.controller("[namespace.here].controller.customMain", {
    		
    		onBeforeRendering: function() {
    			//Get reference of Global FIlter
    			var oSmartFilter = this.getView().byId("SmartFilterBar");
    			
    			//Create JSON data to be defaulted
    			var oToday = new Date();
    			var o90DaysEarlier = new Date();
    			o90DaysEarlier.setDate(o90DaysEarlier.getDate() - 90);
    			var oDefaultFilter = {
    				WorkDate: {
    						low: o90DaysEarlier,
    						high: oToday
    				}
    			};
    
    
    			//Default the Goabl filter values
    			oSmartFilter.setFilterData(oDefaultFilter);
    		}
    	});
    });
    
    

    My Manifest.json contains:

    "extends": {
    "extensions": {
    "sap.ui.controllerExtensions": {
    "sap.suite.ui.generic.template.AnalyticalListPage.controller.AnalyticalListPage": {
    "controllerName": "[namespace.here].controller.customMain"
    					}
    				}
    			}
    		}
    

    My project structure is as shown below:

    The WorkDate field i am trying to populate is annotated as a Selection Field in my local annotations.

    EDIT - when i change

    sap.suite.ui.generic.template.AnalyticalListPage.controller.AnalyticalListPage 

    to

    sap.suite.ui.generic.template.AnalyticalListPage.view.AnalyticalListPage

    in the manifest.json, the customMain.js file is called and i can see it using debug in Chrome. However the line:

    var oGlobalFilter = this.getView().byId("SmartFilterBar");

    just returns 'undefined'.


    capture.png (5.3 kB)
    capture1.png (10.5 kB)
    Add comment
    10|10000 characters needed characters exceeded

  • Oct 01, 2018 at 08:28 AM

    Tanveer Shaikh - can you post your manifest and controller file and i'll take a look to see if there is anything obvious.

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 01, 2018 at 01:05 PM

    Hi Mark,

    Thanks for response.

    Here is the controller file.

    sap.ui.controller("ZBI_SALSANA.ext.controller.ListReportAction", {
    	onBeforeRendering: function() {
    	// Get reference to SmartFilterBar
    			var oSmartFilter = this.getView().byId("template::SmartFilterBar");
    			//Create JSON data to be defaulted
    			var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern: "yyyy-MM-dd"});
    			var oToday = dateFormat.format(new Date());
    			var o30DaysEarlier1 = new Date();
    			o30DaysEarlier1.setDate(o30DaysEarlier1.getDate() - 30);
    			var o30DaysEarlier = dateFormat.format(new Date(o30DaysEarlier1));
    			var oDefaultFilter = {DATE: {	low: o30DaysEarlier,high: oToday}};
    			//Default the Global filter values
    			oSmartFilter.setFilterData(oDefaultFilter);
    	}
    });
    

    Here is the mainfest

    "extends": {
    			"extensions": {
    				"sap.ui.controllerExtensions": {
    					"sap.suite.ui.generic.template.AnalyticalListPage.view.AnalyticalListPage": {
    						"controllerName": "ZBI_SALSANA.ext.controller.ListReportAction"
    					}
    				}
    			}
    		},
    .
    .
    .
    
    	"pages": {
    			"AnalyticalListPage|sales": {
    				"entitySet": "sales",
    				"component": {
    					"name": "sap.suite.ui.generic.template.AnalyticalListPage",
    					"list": true,
    					"settings": {
    						"defaultFilterMode": "compact",
    						"tableType": "AnalyticalTable",
    						"gridTable": false,
    						"multiSelect": false,
    						"autoHide": true,
    						"showGoButtonOnFilterBar": false,
    						"condensedTableLayout": true,
    						"keyPerformanceIndicators": {}
    					}
    				},
    				"pages": {
    					"ObjectPage|sales": {
    						"entitySet": "sales",
    						"component": {
    							"name": "sap.suite.ui.generic.template.ObjectPage"
    						}
    					}
    				}
    			}
    		}
    

    And here is the folder structure.

    Thanks,

    Tanveer


    capture.jpg (22.8 kB)
    Add comment
    10|10000 characters needed characters exceeded

    • Within your ext folder do you have a controller folder (example below)?

      In your manifest is ZBI_SALSANA your namespace? The part after

      "sap.app": { "id":

      around line 4.

      Presumably DATE in your controller file

      var oDefaultFilter = {DATE: {	low: o30DaysEarlier,high: oToday}};

      is your filter field. Date is a reserved word and i wonder if it is conflicting. Can you try with a different field name, or rename DATE to something else?

      capture.png (5.4 kB)