How to enable Semantic Date Range in Smart Filter Bar?

[MioYasutake]

Hello.

I have a List Report app generated by template.

I want to convert filter items to Date Range Type like below sample.

https://sapui5.hana.ondemand.com/1.75.0/#/entity/sap.ui.comp.smartfilterbar.SmartFilterBar/sample/sa...

The documentation says we need to insert below code to manifest.json, but I don't know which section I should put this in.

"sap.ui.generic.app": {
    “pages”: {
        “component”: {
            "filterSettings": {
                "dateSettings":{
                    "useDateRange": true 
                }
            }
        }
    }
}

I have tried below and several other patterns but it didn't work.

	"sap.ui.generic.app": {
		"_version": "1.3.0",
		"settings": {
			"forceGlobalRefresh": false,
			"objectPageHeaderType": "Dynamic",
			"showDraftToggle": false			
		},
		"pages": {
			"ListReport|EntitySet": {
				"entitySet": "EntitySet",
				"component": {
					"name": "sap.suite.ui.generic.template.ListReport",
					"list": true,
					"filterSettings": {
						"dateSettings":{
							"useDateRange": true
						}
					},								
					"settings": {
						"smartVariantManagement": true,
						"condensedTableLayout": true
					}
				},
				"pages": {
					"ObjectPage|EntitySet": {
						"entitySet": "EntitySet",
						"component": {
							"name": "sap.suite.ui.generic.template.ObjectPage"
						}
					}
				}
			}
		}

I also tried putting "filterSettings" under "settings" section, but it didn't work either.

		"pages": {
			"ListReport|EntitySet": {
				"entitySet": "EntitySet",
				"component": {
					"name": "sap.suite.ui.generic.template.ListReport",
					"list": true,								
					"settings": {
						"smartVariantManagement": true,
						"condensedTableLayout": true,
						"filterSettings": {
							"dateSettings":{
								"useDateRange": true
							}
						}
					}
				},

[former_member245396 · Accepted solution]

The Filter restriction for the property should be "interval" inorder for the property to be considered as a date range.

eg:

<Property Name="DocDate" Type="Edm.DateTime" Precision="0" sap:display-format="Date" sap:label="Document Date" sap:quickinfo="Purchasing Document Date" sap:filter-restriction="interval"/>

[MioYasutake · Accepted solution]

Hi Reshma,

Date Range is now displayed. Thank you for your help!

[former_member256155 · Accepted solution]

Is there a way to set a default value to the filter ??

[MioYasutake · Accepted solution]

The only way I can think of is to use variants.

[Kishannaicker · Accepted solution]

Can we have date range for type Edm.DateTimeOffset ?

[former_member245396]

Hi Mio,

The below given snippet is the right way for setting the filter settings:

"sap.ui.generic.app": {
  "_version": "1.3.0",
    "settings": {
      "showDraftToggle": true,
      "forceGlobalRefresh":false
    },
    "pages": {
      "ListReport|EntitySet": {
        "entitySet": "C_STTA_SalesOrder_WD_20",
        "component": {
          "name": "sap.suite.ui.generic.template.ListReport",
          "list": true,
          "settings": {
            "condensedTableLayout": true,
            "smartVariantManagement": false,
            "filterSettings": {
              "dateSettings":{
                "useDateRange": true  
              }
            }
          }
        }
      }
    }
  }

Also kindly let me know which UI5 version you are trying this change on.

[MioYasutake]

Hi Reshma,

Thank you for your response.

My UI5 version is 1.78.1.

Although I have put filterSettings under ListReport>components>settings as suggested, it shows normal condition popup.

		"pages": {
			"ListReport|EntitySet": {
				"entitySet": "EntitySet",
				"component": {
					"name": "sap.suite.ui.generic.template.ListReport",
					"list": true,								
					"settings": {
						"smartVariantManagement": true,
						"condensedTableLayout": true,
						"filterSettings": {
							"dateSettings":{
								"useDateRange": true
							}
						}
					}
				}

OData property for the date field is below.

<Property Name="DocDate" Type="Edm.DateTime" Precision="0" sap:display-format="Date" sap:label="Document Date"
					sap:quickinfo="Purchasing Document Date"/>

Best regards,

Mio