How to use Smart Filter Bar with controlConfigurat...

former_member626660 · ‎2020 Dec 16

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.co...

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

akshaya_p · ‎2020 Dec 18

Wonderful blog will be very useful!

former_member626660 · ‎2020 Dec 18

Thank you for your support Akshaya.. 🙂

RaminS · ‎2021 Feb 14

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.

chris_nace · ‎2021 Mar 23

Thanks !! Very useful !!

former_member202941 · ‎2021 Apr 14

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.

former_member626660 · ‎2021 Apr 16

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

former_member626660 · ‎2021 Apr 16

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

former_member202941 · ‎2021 Apr 16

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

former_member626660 · ‎2021 Apr 27

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

RaminS · ‎2021 Apr 29

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

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

former_member502851 · ‎2021 Apr 29

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

former_member502851 · ‎2021 Apr 29

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

RaminS · ‎2021 Apr 29

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

Much appreciated.

former_member626660 · ‎2021 Apr 29

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.. 🙂

former_member544006 · ‎2023 Nov 09

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.

cvasaba1 · ‎2023 Nov 21

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

MarioEdel · ‎2024 Nov 14

"PlannedGIDate_Range2": {
	"conditionTypeInfo": {
		"name": "sap.ui.comp.config.condition.DateRangeType",
		"data": {
			"operation": "DATERANGE",
			"value1": new Date(new Date().setDate(new Date().getDate() - 6)),
			"value2": new Date(new Date().setDate(new Date().getDate() - 1)),
			"key": "PlannedGIDate_Range2",
			"calendarType": "Gregorian"
		}
	}
}

@cvasaba1 You have to use Javascript Date objects

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