Fiori Element List Report: Dynamic Date Picker

Enable Dynamic Date Picker in Fiori Element List Report.

Fiori Element List Report is becoming default choice for reporting over classical ABAP Report. However, this feature where user can define date value(s), in the filter, dynamically was not very easy to implement in SAP Fiori Element List Report. I was wondering, for some time, if SAP could implement this as a part of the template.

Introduction

Let me explain how this works in classical report’s selection screen. Assume we have a report which lists materials along with the ‘Created On‘ date. As a person who is responsible to make sure material data is accurate I like to see the list of materials created in the last 30 days. I can while creating report variant select this option ‘Current date +/- ??? days‘ specify -30 and save. Now every time I run the report with this saved variant system automatically calculates from and to date and give me the list of material created in last 30 days, I no longer have to manually specify from and to date.

Apart from Current date +/- ??? days there are other options available like Current Date, From month start to today, First day of current month, First quarter ????, Second quarter ???? etc. In all very cool and widely used feature.

Dynamic Date Picker

A similar feature is achieved in List Report using Dynamic Date Picker in Smart filter bar. There is a sample app available here to check out.

The dynamic date is a smart control that is currently only available in the smart filter bar. When the user enters a value in the date field, it suggests corresponding fixed and dynamic dates. It also offers a value help feature that lets users choose between different time periods and define them further. The list of values offered must be defined by the app.

https://experience.sap.com/fiori-design-web/dynamic-date-range/

With Dynamic Date Picker user can, like in classical selection screen variant, can specify date filter values with respect to today date e.g. Last X Days, Last X weeks, Last X months, Next x days. I think you got the idea.

Dynamic dates can be saved in the variant management.

Fiori Elements List Report

Coming to Fiori Elements List Report, for the template to use Dynamic Date Picker to render date filter, below are prerequisites.

1. You need to be on the right UI5 version.
2. Date field has sap:filter-restriction=”interval” in metadata.
3. Descriptor “useDateRange”: true is specified manifest file.

CDS View ZZIMaterial

Create this CDS view ZZIMaterial and register in /IWFND/MAINT_SERVICE.

@AbapCatalog.sqlViewName: 'ZZIMAT'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Material List'

@Search.searchable: true

@OData.publish: true

@UI.headerInfo:{ typeName: 'Material', typeNamePlural: 'Materials' }

define view ZZIMaterial
  as select from mara
  association [0..*] to I_MaterialText  as _Text          
              on $projection.Material = _Text.Material
{
      @Search.defaultSearchElement: true
      @Search.fuzzinessThreshold: 0.8
      @Search.ranking: #HIGH
      @ObjectModel.text.association: '_Text'

      @UI.lineItem: [{position: 10 }]
      @UI.selectionField: [{position: 10 }]
      @UI.textArrangement: #TEXT_SEPARATE
  key matnr as Material,
      _Text,

      @UI.lineItem: [{position: 15 }]
      @UI.selectionField: [{position: 15 }]
      @Consumption.filter.selectionType: #INTERVAL
      ersda as CreatedOn,

      @UI.lineItem: [{position: 18 }]
      @UI.selectionField: [{position: 18 }]
      laeda as LastChangedOn,

      @UI.lineItem: [{position: 20 }]
      matkl as MaterialGroup,

      @UI.lineItem: [{position: 40 }]
      @Semantics.quantity.unitOfMeasure: 'WeightUnit'
      brgew as GrossWeight,

      @Semantics.unitOfMeasure: true
      gewei as WeightUnit
}

Again, to get this Dynamic Date Picker on date field we need sap:filter-restriction=”interval” in metadata of the property. Annotation @Consumption.filter.selectionType: #INTERVAL does that.

Another way of adding sap:filter-restriction in metadata is by using code in DEFINE method of MPC_EXT. Refer my other blog SAP List Report Filter Bar Date Format for more information.

Before going any further check metadata of the OData service.

<Property 
   Name="CreatedOn" 
   Type="Edm.DateTime" 
   Precision="0" 
   sap:display-format="Date" 
   sap:filter-restriction="interval" 
   sap:label="Created On" 
/>

In WebIDE, create List Report by selecting the template and following the wizard. Once you have the app generated, open the manifest file. Check these lines are there, if not, add it.

"pages": {
	"ListReport|ZZIMaterial": {
		"entitySet": "ZZIMaterial",
		"component": {
			"name": "sap.suite.ui.generic.template.ListReport",
			"list": true,
			"settings": {
				"filterSettings": {
					"dateSettings": {
						"useDateRange": true
					}
				},
				"smartVariantManagement": true,
				"condensedTableLayout": true
			}
		},
		"pages": {
			"ObjectPage|ZZIMaterial": {
				"entitySet": "ZZIMaterial",
				"component": {
					"name": "sap.suite.ui.generic.template.ObjectPage"
				}
			}
		}
	}
}

Test the app and you should see Dynamic Date Picker on Created On date.

Just for the comparison, Last Change date opens up generic Define Conditions dialog.

Time Period

Time Period input in Dynamic Date Picker offers quite a few options to choose from. You can use descriptors in the manifest file to control what Time Period will be available for selection.

To control setting on field level use descriptor “fields” and add field names under it. Using descriptor “exclude” you can either tell template to include Time Period specified in “selectedValues” or exclude it.

Further, read on this topic is available in SAP UI5 Documentation: Enabling Semantic Date Range on Smart Filter Bar

UI5 Version

Dynamic Date Picker worked as described above when I was using SAP UI5 version 1.81.1. The same app with UI5 version 1.72.1 displayed normal Calendar picker.

So somewhere between 1.72.1 and 1.81.1 this out-of-box Dynamic Date Picker was added.

To make it work on version 1.72.1 below steps might work.

1. Remove @UI.SelectionField Annotation for the field.
2. Using wizard add New List Report Extension of type Filter.

Wizard will add a new controller, a view fragment and additional descriptors in the manifest file.

Now open the Customfilter.fragment.xml file and add following code.

<core:FragmentDefinition 
	xmlns="sap.m" 
	xmlns:smartfilterbar="sap.ui.comp.smartfilterbar" 
	xmlns:core="sap.ui.core">
	
	<smartfilterbar:ControlConfiguration 
		id="filterSystemdate" 
		key="Systemdate" 
		groupId="_BASIC" 
		index="99"
		conditionType="{ module: 'sap.ui.comp.config.condition.DateRangeType'}">
	</smartfilterbar:ControlConfiguration>

</core:FragmentDefinition>

Following these changes, Dynamic Date Picker appeared on Date. I didn’t run this app in Fiori Launchpad so I am not sure whether values specified will get stored in save Variant or not. If it doesn’t then additional code will be required in the controller. I would recommend reading this documentation in case take this route to implement Dynamic Date Picker.