Skip to Content
Technical Articles
Author's profile photo imtiaz farheen

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

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%20Date%20Interval

Basic Date Interval

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

Basic%20Date%20Interval_1

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

manifest.json

 

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

Smart%20date_1.1

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%20screen

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%20Date%20field

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

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Wonderful blog will be very useful!

      Author's profile photo imtiaz farheen
      imtiaz farheen
      Blog Post Author

      Thank you for your support Akshaya.. 🙂

      Author's profile photo Ramin Shafai
      Ramin Shafai

      Do you know what other condition types other than date range are available in sap.ui.comp.config.condition?

      It's not documented anywhere in the ui5 API reference.

       

       

      Author's profile photo imtiaz farheen
      imtiaz farheen
      Blog Post Author

      I'm sorry Ramin Shafai , I haven't explored any other condition other than DateRangeType yet. If I explore and learn them will definitely share it with the SAP community.. 🙂

      Regards

      Imtiaz N

      Author's profile photo Christophe Naciri
      Christophe Naciri

      Thanks !! Very useful !!

      Author's profile photo Mihaly Ducz
      Mihaly Ducz

      Does this workaround still works? The added code to the xml view seems to be ignored.

       

      If for example i write something incorrect in the module, eg module:'sap.ui.comp.config.condition.DateRangeTypeHello'

      The app correctly throws an error, however, if i write anything as a filter, be it a random value or the correct keys found in the model (or if i just copy the entire block from here into my code) nothing seems to happen.

      I think this undocumented solution might have been closed off, unless i'm doing something wrong.

      Author's profile photo imtiaz farheen
      imtiaz farheen
      Blog Post Author

      Hi, Did you try adding the dependency library "sap.ui.comp" in the manifest file? Cause I had faced this issue earlier, without explicit mentioning of the library in the manifest file it neither works nor throws any error.

      Regards

      Imtiaz N

      Author's profile photo Mihaly Ducz
      Mihaly Ducz

      Hi Imtiaz!

      Thanks for the reply, sadly i do have it already:

      ...
      "sap.ui.comp": {
        "lazy": false
      },
      ...

      Any other idea that you have perhaps, which i could double check?

       

      Thank You and Best Regards,
      Mihaly

      Author's profile photo imtiaz farheen
      imtiaz farheen
      Blog Post Author

      Hi Mihaly,

      Seems to be right, perhaps could you please check on the UI5 version of your application. Cause this control is supported only from version 1.68.0, incase if your template is running on a lower version than expected then that could be a possible reason.

       

      Regards

      Imtiaz N

      Author's profile photo Simon Reiher
      Simon Reiher

      Hello,

      I had the same issue but was able to fix it by removing the useDateRangeType property of the SmartFilterbar.

      After that it worked as described 🙂

      Hope this helps you as well!

      @imtiaz THank you so much for this great Blog Post! Its such a great detail and adds so much value! Great finding and thanks for sharing 🙂

      all the best,
      Simon

      Author's profile photo imtiaz farheen
      imtiaz farheen
      Blog Post Author

      Yes Simon you're right!! 🙂 This is a tiny yet important point to be noted even I have not used this in my code.. 🙂 Thanks for sharing that tip @simon.. 🙂

      Author's profile photo Ramin Shafai
      Ramin Shafai

      Same here, it just doesn't work. No errors, just ignores it.

      I'm using WebIDE cloud, so the latest UI5 libraries 1.88

       

      Author's profile photo Simon Reiher
      Simon Reiher

      Hello Ramin,

      I got the same issue but was able to fix it the following way:

      In order to make this work the property useDateRangeType of the SmartFilterbar itself must be removed! That solved the issue for me.

      I tested it for Version 1.88.0 and 1.78.8. Both are working fine for me with that trick.

      I hope it can help you as well!

      kind regards,
      Simon

      Author's profile photo Ramin Shafai
      Ramin Shafai

      OMG Simon, you solved my problem!!... Thank you, that was the trick, useDateRangeType  has to be removed from the filterbar.

      Much appreciated.

      Author's profile photo Malika Bathla
      Malika Bathla

      Hello,

      I used the same way to add date range. However, when I use getDatevalue() to get the value, I get error that this is not a function.

      Author's profile photo Phani Vasabattula
      Phani Vasabattula

      Thanks for the great blog! Quick question. How can I add the default dates for the operation type 'DATERANGE', 'FROM' and 'TO'?