How to use Smart Filter Bar with controlConfiguration conditionType as “DateRangeType”?

Hello, my fellow learning enthusiasts,

In this blog I will show you how to use Smart Filter Bar with “DateRangeType” and I would also share my experience with experimenting with this new smart feature in the Smart filter bar selection field and a few customizations on it to cater to our need. This smart feature enhances the date control field in Smart filter bar using the DateRangeType setting.

Requirement :

My requirement was to have selection fields that had a date picker control in it to select the From and To dates as well as a separate dropdown list which was interrelated to these date picker selection fields. The dropdown list had options such as Current week, current month and current year, by selecting the corresponding  option it would automatically prefill or populate the selection fields with start and end date of week, month or year.

Something similar like the below screenshot was expected to be achieved.

Prototype

Solution :

To find a simplified solution for this requirement I came across an option called as “DateRangeType” in smart fields.

Upon exploring further, I found that it was a selection field in smart filter bar which acts as an independent date picker as well provides a variety of predefined date range options inside a single field.

The below link gives us an explored example of this control

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

Fascinated by the UI design and its simplicity I went on to learn more about this control and ways of customizing it to meet my needs. In this blog, I will explain the step-by-step changes that take place in achieving this feature in our application with a real-time example.

The prerequisites for using this control are

SAPUI5 Version supported: From 1.68.0

Now let’s get coding.. 🙂

Step 1: To get a basic Smart date control to work on we need to add this annotation to our required field

• sap:filter-restriction=”interval”
• Type=”Edm.DateTime”

Example Annotation Structure:

<Property Name="businessdaydate"
Type="Edm.DateTime " 
Nullable="false" 
sap:filter-restriction="interval" 
sap:required-in-filter="true" 
sap:label="Business Day Date" />

After adding these annotations alone we will get a selection field like below

Basic Date Interval

Upon clicking on the value help button we get the below screen

Basic Date Interval

Step 2: Now to enhance this date field to show the calendar presets we need to extend the smart filter bar and set the control configuration’s conditionType property as ‘conditionType=”sap.ui.comp.config.condition.DateRangeType” ‘

Code :

<sFB:SmartFilterBar id="sFB" persistencyKey="UniqueAndStablePersistencyKey" 
     considerSelectionVariants="true" 
     entitySet="<your_Own_Entity_Set>" 
     useToolbar="false" showFilterConfiguration="true" 
     initialise="onSFBInitialise" showClearOnFB="true" 
     search="onSearch" clear="onClear">
    <sFB:controlConfiguration>								 
          <sFB:ControlConfiguration key="businessdaydate" index="2" 
               groupId="_BASIC" 
               change="onDateChange" 
               mandatory="mandatory"						 
               conditionType="sap.ui.comp.config.condition.DateRangeType" 
               visibleInAdvancedArea="true"/>
	  </sFB:controlConfiguration>
    </sFB:SmartFilterBar>

In the manifest file don’t forget to set “sap.ui.comp” library as one of the dependency libraries.

manifest.json

After adding the above code the selection field will look like this,

Smart date

The Time Period dropdown contains 43 date range options or operations (as of 1.84 UI5 version) to choose from.

Step 3: When we debug the control and closely examine we’ll find that  the details such as date range options available in this control can be found from the $smartEntityFilter model’s data

var bizDateData = this.getView().byId("sFB").getControlByKey("businessdaydate").getBindingContext("$smartEntityFilter").getModel().getData(); 

Console screen

As we can see from the screenshot, the dropdown options are available as “operations” and we can filter our desired fields from among these.

Step 4: Now that we know the options provided by the control, we can start filtering them out based on our requirement. In this example my requirement is to have only the From date, To date, Date Range, Current Week, and Current Month. We can filter it using its key as the path, a filter operator, and an exclude parameter. I will use normal filter operators such as equals & contains to include the options that I need and exclude the others.

[Note: Other Filter operators such as startswith , notstartswith, notcontains, endswith, notendswith, notequals do not work as expected in our ‘filter’ parameter]

Code:

<sFB:SmartFilterBar id="sFB" 
     persistencyKey="UniqueAndStablePersistencyKey" 
     considerSelectionVariants="true"
     entitySet="<Your_entity_set_name>" 
     useToolbar="false" 
     showFilterConfiguration="true" 
     initialise="onSFBInitialise" 
     showClearOnFB="true" search="onSearch" clear="onClear">
<sFB:controlConfiguration>
     <sFB:ControlConfiguration key="businessdaydate" 
          index="2" groupId="_BASIC" 
          change="onDateChange" mandatory="mandatory"
          conditionType="{ 
           module: 'sap.ui.comp.config.condition.DateRangeType', 
           operations: { 
	         filter: [ 
			{path: 'key', contains: 'DAY', exclude:true}, 
			{path: 'key', equals: 'DATE', exclude:true}, 
			{path: 'key', contains: 'TOMORROW', exclude:true}, 
			{path: 'key', contains: 'WEEKS', exclude:true}, 
			{path: 'key', contains: 'LASTWEEK', exclude:true}, 
			{path: 'key', contains: 'NEXTWEEK', exclude:true}, 
			{path: 'key', contains: 'MONTHS', exclude:true}, 
			{path: 'key', contains: 'NEXTXMONTHS', exclude:true}, 
			{path: 'key', contains: 'LASTMONTH', exclude:true},
			{path: 'key', contains: 'NEXTMONTH', exclude:true}, 
			{path: 'key', equals: 'SPECIFICMONTH', exclude:true}, 
			{path: 'key', contains: 'QUARTER', exclude:true}, 
			{path: 'key', contains: 'YEAR', exclude:true} ] } }"
	    visibleInAdvancedArea="true"/>
	</sFB:controlConfiguration>
</sFB:SmartFilterBar>

After our customization, our date field will look like below,

Final Date field

Voila !! We have achieved our customized Smart selection field!! 😊

Thus in this blog, we have seen the technical metamorphosis of a Smart date range field.

Happy Learning and Exploring!! Cheers!! 😊

Regards

Imtiaz N