Skip to Content

How to enable Semantic Date Range in Smart Filter Bar?

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/sap.ui.comp.sample.smartfilterbar.ControlConfigurationDateRangeType

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
							}
						}
					}
				},
Add comment
10|10000 characters needed characters exceeded

2 Answers

  • Best Answer
    Posted on Jun 30 at 04:47 AM

    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"/>
    Add comment
    10|10000 characters needed characters exceeded

  • Posted on Jun 26 at 01:24 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • 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

      bolce.png (21.1 kB)