Implementing Filter dependency between Selection Fields in CDS based Fiori Application

[former_member139706]

Introduction

The objective of this blog post is to explain how we can achieve filter dependency between selection fields of a SAP Fiori app which is generated from the CDS (core data services) annotations based metadata.

I am Amit Agarwal and working as a development architect at SAP for an Upstream Oil and Gas product at SAP. I recently came across a requirement to model dependency between filters so as to provide a better user experience. I searched for a possible solution but could not find any ready reference, so I had to do some research and thought of sharing the same with the community.

I would like to use a simple example to explain it. Consider that in an SAP Fiori app SmartTable control is used to render a table based upon CDS annotations. It also has some selection fields and some of them like Country, Region, City have dependency. We want a behavior that when Country is selected as e.g, US (USA), the Region should be auto filtered by USA and should only show states (Region) of USA. Similarly if Region is selected as TX (Texas), the City should be auto filtered by all the cities in Texas. This is just one example, we can have several of such scenarios where we need to define dependency. If this dependency is missing  then user will have hard time in making the selections.

Scenario when Country and Region dependency is missing

In above snapshot user has selected USA as the country. However as no dependency exists between country and region, region selection shows all the available values of regions. It would have been better if this was auto filtered on country as USA.

Solution

You need to maintain proper annotations in the CDS which is responsible for the rendering of table.

Below is a code snippet from such a CDS. Same 3 fields Country, Region and City are shown along with required annotations.

The below annotations are used:

• 
  

  @UI.selectionField: [{position: 30} - This annotation is responsible for showing the fields as Filters on the SmartTable. 'position' indicates at which position the filter will be placed.

  
  


• 
  

  @Consumption.valueHelpDefinition: [{ entity: { name: 'C_CountryVH', element: 'Country' }}] - This annotation is responsible for attaching a valid value help CDS to the filter. Here name: C_CountryVH is the name of the value help CDS and element: 'Country' is the field from the value help CDS which contains valid list of countries.

  
  


• 
  

  @Consumption.valueHelpDefinition: [{additionalBinding: [{ element: 'Country', localElement: 'Country' }]}] - This annotation is responsible for the dependency we want to maintain between the filters. This is used for Region and City fields. Region field only has dependency with Country but City has dependency with both Region and Country and hence you see two 'additional binding' in case of City. Here element: 'Country' means the element from the value help CDS and localElement: 'Country' means the binding with the local element Country of the main CDS which renders the Fiori app.

  
  

@Consumption.valueHelpDefinition: [{ entity: { name: 'C_CountryVH', element: 'Country' }}]

@Search.defaultSearchElement: true

@Search.fuzzinessThreshold: 0.7

@Search.ranking: #HIGH

@UI.textArrangement: #TEXT_ONLY

@UI.selectionField: [{position: 30}]

@UI.lineItem: [{ importance: #MEDIUM, position: 30 }]

Country;



@Consumption.valueHelpDefinition: [{ entity: { name: 'C_RegionVH', element: 'Region' }}]

@Consumption.valueHelpDefinition: [{additionalBinding: [{ element: 'Country', localElement: 'Country' }]}]

@Search.defaultSearchElement: true

@Search.fuzzinessThreshold: 0.7

@Search.ranking: #HIGH

@UI.textArrangement: #TEXT_ONLY

@UI.selectionField: [{position: 40}]

@UI.lineItem: [{ importance: #MEDIUM, position: 40 }]

Region;



@Consumption.valueHelpDefinition: [{ entity: { name: 'C_CityVH', element: 'City' }}]

@Consumption.valueHelpDefinition: [{additionalBinding: 

[{ element: 'Country', localElement: 'Country' },

 { element: 'Region',  localElement: 'Region' }]}]                                                     

@Search.defaultSearchElement: true

@Search.fuzzinessThreshold: 0.7

@Search.ranking: #HIGH

@UI.textArrangement: #TEXT_ONLY

@UI.selectionField: [{position: 50}]

@UI.lineItem: [{ importance: #MEDIUM, position: 50 }]

City;

 

Result

After maintaining the above annotations in the CDS, below is the effect on the SAP Fiori UI.

After user has selected country as USA, once region value help is selected it will be auto-filtered on USA, only showing regions for USA. This makes easy for the user to now select from a valid short list of regions.

Dependency maintained between Country and Region

 

This works in reverse as well. In case user has selected region first, then the corresponding country will also be auto-filled.

Region selection auto populates Country

Conclusion

So in this blog post we saw that by using the proper annotations in the CDS the filter dependency can be easily achieved at the SAP Fiori UI which is based upon the annotations.

 

Regards

Amit Agarwal