Technical Articles
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
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
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
Wonderful blog will be very useful!
Thank you for your support Akshaya.. 🙂
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.
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
Thanks !! Very useful !!
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.
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
Hi Imtiaz!
Thanks for the reply, sadly i do have it already:
Any other idea that you have perhaps, which i could double check?
Thank You and Best Regards,
Mihaly
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
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
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.. 🙂
Same here, it just doesn't work. No errors, just ignores it.
I'm using WebIDE cloud, so the latest UI5 libraries 1.88
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
OMG Simon, you solved my problem!!... Thank you, that was the trick, useDateRangeType has to be removed from the filterbar.
Much appreciated.
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.
Thanks for the great blog! Quick question. How can I add the default dates for the operation type 'DATERANGE', 'FROM' and 'TO'?