Skip to Content
Author's profile photo Joe Rupert

Annotating and Extending Fiori Element Applications: List Report Part 2

Using Annotations to Configure Fiori Elements Applications

In this piece we will continue on to implementing a search help for our Smart Filter Bar filters along with setting up Multi-Combobox and Date Range Selection controls.

Example 3: Configuring the Search Help of a Smart Control

It is expected to provide functionality to assist the end-user with choices or ranges with which to set filter values to restrict OData service calls. So, let’s configure a search help for our Contract Type filter.

To configure this search help we will turn again to our local annotation file and make a few changes using the SAP Common vocabulary’s ValueList term as follows:

Vocabulary Annotation Example for Defining a Search Help

Here we are mapping a local property to a property returned from the SH_ContractTypeSet search help endpoint and are also displaying to the user the Description property from this service to give the user more information about the contract type they are selecting. We have set the SearchSupported to “true” to provide a modal search help for the Contract Type filter. Please note that we will be making changes to this set of annotations in the next example when we remove the search help and, instead, tell the application to render our filter as a Multi-Combobox with fixed-values.

Now, when we click on the search help icon to the right of our input field, we get the following (after performing a search):

These examples use arbitrary mock data generated within the Web IDE.

Example 4: Setting the Smart Control to a Render as a Multi-Combobox

What we see above is a Multi-Input Field control with an associated search help and what we require is a Multi-Combobox so we’re going to have to return to the ABAP layer and make some changes to how the EDMX metadata model for our service is generated. Specifically, we want to target the DEFINE method within the services model provider extension class. This allows us to get a hold of the service’s model (/IWBEP/IF_MGW_ODATA_MODEL) that has methods that allow for manipulation of the metadata model including SAP annotations. We are specifically looking to add the value-list SAP annotation and set its value to “fixed-values”.  Doing so will give us the result we seek.

A form-based example of what that class would look like is illustrated below:

We will now redefine the DEFINE method of our model provider extension class and add code like what is displayed below:

  "Method-local declarations:
  DATA lo_entity_type   TYPE REF TO /iwbep/if_mgw_odata_entity_typ.
  DATA lo_property      TYPE REF TO /iwbep/if_mgw_odata_property.
  DATA lo_annotation    TYPE REF TO /iwbep/if_mgw_odata_annotation.

  "Call parent:
  super->define( ).

  "Set the appropriate annotations for each property of the Contract entity:
  lo_entity_type = io_odata_model->get_entity_type( 'Contract' ).
  IF lo_entity_type IS NOT INITIAL.

    "Set ContractType as fixed-value list:
    lo_property = lo_entity_type->get_property( iv_property_name = 'ContractType' ).
    IF lo_property IS NOT INITIAL.

      lo_annotation = lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation( /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).
      lo_annotation->add( iv_key = 'value-list' iv_value = 'fixed-values' ).



When complete our service will now append the sap:value-list=”fixed-values” annotation and value to the ContractType property of our OData service’s metadata model.

Now, when we refresh our application, we have what looks to be a Multi-Combobox. Although this was our goal, we do require that a more user-friendly description be shown to the user and, when chosen, the actual value (displayed currently) be applied as a filter to any subsequent search.

So now we need to focus on the search help endpoint (in example 3 above, this was the SH_ContractTypeSet entity set). Using similar code that was illustrated above when adding the sap:value-list=”fixed-values” annotation to our ContractType property on the Contract entity type of our main service, we are going to do something similar to our contract type set collection.

Again, in the DEFINE method of our model provider extension class for our search help service where the SH_ContractTypeSet entity set lives, we will implement the following code:

  "Method-local declarations:
  DATA lo_annotation    TYPE REF TO /iwbep/if_mgw_odata_annotation.
  DATA lo_entity_type   TYPE REF TO /iwbep/if_mgw_odata_entity_typ.
  DATA lo_property      TYPE REF TO /iwbep/if_mgw_odata_property.

  "Call parent:
  super->define( ).

  "Set the appropriate annotations for each property of the SH_ContractType entity:
  lo_entity_type = model->get_entity_type( 'SH_ContractType' ).

  IF lo_entity_type IS NOT INITIAL.

    "Set description to be displayed for the ContractType value:
    lo_property = lo_entity_type->get_property( iv_property_name = 'ContractType' ).
    IF lo_property IS NOT INITIAL.
      lo_annotation = lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation( /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).
      lo_annotation->add( iv_key = 'text' iv_value = 'Description' ).



With that change, the set of options within the Multi-Combobox will now render as follows:

Example 5: Setting a Date Range Filter

We are now going to add the ContractValidTo property to our list of default filters for our application. This field is of type Edm.DateTime and by making a change to our local annotation file, we will now see it appear within the smart filter bar of our Fiori Elements application:

Adding ContractValidTo as a Default Filter

Once complete, we now have a new filter at the top of our application that allows for us to input a date and time. We may hope that, through the magic of Fiori Elements and the underlying smart controls, we would be provided the necessary input to interact with it (Date/Time Picker) due to the nature of this field’s entity data model type. However, as of the time of this writing, it does not look like we have the option of a Date/Time Picker to be rendered within the Smart Filter Bar of our application unless we extend it ourselves. We will probably see an enhancement of this nature in a future release of SAPUI5.

Instead, we just want the user to work with the date portion of this DateTime field so we will enhance it with the SAP annotation of display-format=”Date”. This is essentially stripping the time from the Edm.DateTime value and allowing it to now function within the scope of SAPUI5 Date Picker control. The code is implemented very much in the same way as presented above and, once complete, we have the following:

Everything looks good but we require that the user may select a range of dates and would rather them not go through the trouble of clicking the search help icon, selecting a date and then clicking OK. We can append another SAP annotation to the ContractValidTo property of the Contract entity to accomplish this (filter-restriction=”interval”):

We now have a Date Range Selection control that allows for a range of dates to be applied as a filter directly from the Smart Filter Bar (without a search help).

What’s Next

I certainly hope that this was helpful and gave you some insight into the power of Fiori Elements. I hope to continue this series by digging into configuring and extending the list report’s smart table along with working with the list report floorplan’s API to call OData function imports that act on ranges of selected table data.

For other articles in this series, please refer to the list below:

Some Resources to Consider

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Tim Molloy
      Tim Molloy

      Thanks for posting this! I am wondering if you might be able to answer this.

      We are using a Hana XSoData service, so we don't have use of SEGW (i.e checkboxes on the fields to set the annotations) or ABAP to annotate our oData. Currently, XSoData does not support annotations, though I believe there are plans to implement this in the future. Is there a way you know of using local annotations to set those 'sap:' parameters (i.e label, sortable, filterable, etc)? While I can use the annotation modeler to add fields to the SmartTable and Filter Bar, and set the labels there, we have a number of other fields which are passed through with their 'not-so-user-friendly' label that we would like to set the labels and other parameters for. I can't seem to find just a straight 'label' function in the annotation modeler to do such a thing with, though maybe there is a way nonetheless.



      Author's profile photo Joe Rupert
      Joe Rupert
      Blog Post Author

      Hi Tim,

      I’m not well versed in XSoData but, since the local and service metadata models are essentially EDMX documents, I was wondering if it was possible to supply a copy of the service’s EDMX (with both the SAP annotations and the vocabulary annotations) as a local annotation file with the hope that Fiori Elements merges the two (service metadata and local annotation service definition) in order to give you the required results. Unfortunately, I could not get this to work on my end so I looked into the SAP UI and SAP Common annotations that are available and attempted to leverage some that seemed to target the same desired behavior that the inline SAP annotations were creating. Again, these attempts did not yield anything of value. I will continue to look into this but it just may not be possible at this time. I would suggest reviewing the available vocabulary documentation when time permits and see if anything works and I will let you know if I find anything myself.

      Sorry I could not be more helpful here.



      Author's profile photo Tim Molloy
      Tim Molloy

      No worries, Joe, thanks so much for your time!



      Author's profile photo vamsilakshman p
      vamsilakshman p

      Hi Joe,



      Great blog.

      I have small requirement i.e.,

      need to add few custom fields in the standard Fiori App(My Travel Request V2). Which is build with Smart control. So i have used Vocabulary Annotation concept and added those fields and now i am able to see the fields on the standard screen.

      But now i am facing 2 challenges.

      1. One of the custom field need to be showcase as CHECKBOX.
      2. Other field should be displayed as F4 and it should display the data based on our custom logic from the OData services.


      For the 1st requirement i don't find any solution to showcase the input field as a check box. So kindly guide us how to get this requirement.

      For the 2nd requirement i have showcasing the input field as Input help(F4 help) by taking the reference of existing EntitySet but my requirement is to showcase the data with our own new EntitySet.

      For this i am expecting to extend the existing standard OData service in SEGW and then we can create our own EntityType and EntitySet as per our requirement. But my question here is where do we need to replace this extended Odata service in the front end in the place of existing standard OData services.


      I have gone through so many blogs/Communities but no luck...

      But by seeing your blogs am expecting definitely i will get solution to my queries...

      Guide me to implement the same...







      Author's profile photo Holger Schäfer
      Holger Schäfer

      Hi Joe,
      great Blog.

      Do you know a substitution of the value-list/fixed-values for CDS Views?

      I could not found a corresponding annotation to be able to do this.

      Maybe do you know a ressource concerning CDS to fine control Report List View?

      Also a better/complete overview of the list report template settings like SmartVariantManagement: true etc. would be quite helpful.

      Maybe there is also an option to excel export selected data out-of-the-box like in the smartable control.

      Regards Holger

      Author's profile photo Joseph BERTHE
      Joseph BERTHE

      Hello  Joe,

      Thanks you very much for your blog, I learned lot of things.

      However, I tried to implement the search help which works pretty well, but.... because there is always a but 🙂 I would like to see the Description of the code, not the code, as you show it with the dropdown list.

      By using the sap:text it works with the dropdown but not with the Search help. Maybe I miss something.



      Author's profile photo Saurabhn Gupta
      Saurabhn Gupta

      HI Joe,

      Is Example 3 modification in annotation file mandatory for having functionality of example 4(dropdown).As i change make corresponding changes(changes are done already as mentioned for example 4) in annotation file application does not work.

      I have set local UI annotations for lineitem and selection fields.

      Could you please help what needs to be changed, as of now i could just see empty dropdown (no values are populating from backend in dropdown)?




      Author's profile photo hansapriya d
      hansapriya d

      Hi Joe,

      This is with respect to the Example 5: Setting a Date Range Filter , When I created a List Report from WebIDE template using CDS generated OData service, I did not get the datepicker for the datefield rather it was a simple valuehelp( for the type generated in metadata was Edm.String). So I followed your blog and implemented the steps you have mentioned . However I did not get the expected result.

      Attached are the screenshots for the same. Please help me in figuring out the issue. Any input on this is highly appreciated.

      Thanks in advance.





      Author's profile photo Robin van den Brandt
      Robin van den Brandt

      This blog might help

      Author's profile photo SHINY NICKITHA CHELLAM J

      Great blog Joe!!

      For the fixed values, is it possible to render the control with first item as selected ?



      Author's profile photo Simon Gaudek
      Simon Gaudek

      Hi Joe Rupert

      thanks for your blog series.

      I know how to use display-format from the ABAP backend. There I set it by extension in the Model Provider class in the SAP Gateway.
      But is it also possible to set this property with a local annotation file if it cannot be set in the backend?