SAP Fiori Elements List Report – Configuring List Navigation

SAP Fiori Elements List, by default, navigates to Object page when clicked on the list item. Check this blog which explains how you can change this behaviour.

I am going to use CDS View ZMaterialPlant and metadata extension, code below, in the example. I have exposed CDS View ZMaterialPlant using Service Definition and Service Binding. You can, however, use SEGW (Data Source References) or Odata.publish: true.

CDS and Metadata

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

@VDM.viewType: #BASIC
@Search.searchable: true

@ObjectModel.usageType.serviceQuality: #A
@ObjectModel.usageType.sizeCategory : #L
@ObjectModel.usageType.dataClass: #MASTER
@ClientHandling.algorithm: #SESSION_VARIABLE

@Metadata.allowExtensions: true

define view ZMaterialPlant
  as select from marc
    inner join   mara on marc.matnr = mara.matnr
  association [1..1] to I_Plant         as _Plant         on $projection.Plant = _Plant.Plant
  association [0..*] to I_MaterialText  as _MaterialText  on $projection.Product = _MaterialText.Material
  association [1..1] to I_MaterialGroup as _MaterialGroup on $projection.MaterialGroup = _MaterialGroup.MaterialGroup
{
      @Search.defaultSearchElement: true
      @Search.fuzzinessThreshold: 0.8
      @ObjectModel.text.association: '_MaterialText'
  key marc.matnr as Product,

      @Search.defaultSearchElement: true
      @Search.fuzzinessThreshold: 0.8
      @ObjectModel.text.element: 'PlantName'
  key marc.werks as Plant,
      _Plant.PlantName,

      @Semantics.quantity.unitOfMeasure: 'MaterialBaseUnit'
      marc.eisbe as MaterialSafetyStockQty,

      @Semantics.unitOfMeasure: true
      mara.meins as MaterialBaseUnit,

      @ObjectModel.foreignKey.association: '_MaterialGroup'
      mara.matkl as MaterialGroup,

      _MaterialText,
      _MaterialGroup
}

Metadata Extension

@Metadata.layer: #CORE

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

annotate view ZMaterialPlant with
{
  @UI.facet: [
             { id:'idGeneralInformation' ,
               type: #COLLECTION ,
               label: 'General Information' ,
               position: 10 } ,
             { type: #IDENTIFICATION_REFERENCE ,
               label : 'General Information',
               parentId: 'idGeneralInformation',
               id: 'idIdentification' ,
               position: 10 } ]

  @UI.selectionField: [{ position: 10 }]
  @UI.lineItem: [{ position: 10 }]
  @UI.identification: [{ position: 10 }]
  @Consumption.valueHelpDefinition: [{
          entity: { name:    'C_Plantvaluehelp',
                    element: 'Plant' } }]
  Plant;

  @UI.selectionField: [{ position: 20 }]
  @UI.lineItem: [{ position: 20 }]
  @UI.identification: [{ position: 20 }]
  Product;


  @UI.selectionField: [{ position: 40 }]
  @UI.lineItem: [{ position: 40 }]
  @UI.identification: [{ position: 40 }]
  @Consumption.valueHelpDefinition: [{
          entity: { name:    'I_MaterialGroup',
                    element: 'MaterialGroup' } }]
  MaterialGroup;

  @UI.lineItem: [{ position: 50 }]
  @UI.identification: [{ position: 50 }]
  MaterialSafetyStockQty;
}

Fiori Element app generated in WebIDE will show object page when you click on any line in the list.

Lets see a couple of ways to change this behaviour.

No Navigation

You could have a use-case where Object page is not desirable. Having List is the only requirement.

To remove the Object Page navigation, go to the manifest file and delete the Object Page definition. This would be in “sap.ui.generic.app” descriptor line 135 to line 142 in below screenshot (also remove the comma from line 134). Obviously, line number might be different when you work with your own app.

After removing the Object page definition from the manifest file, List Report no longer has navigation on it and it does not show navigation icon ( “>” at the end of list item) either.

Semantic Object Navigation

In this use-case when the user clicks on an item in the list, it will launch another app using Semantic Object Navigation.

I have this Maintain PIRs App with Semantic object “ForecastDemand” and action “maintain” which seems like a perfect target app.

Again, we will have to make changes in the manifest file. Actually, it needs two changes.

  1. Under descriptor “sap.app”, add “outbound” , “crossNavigation” descriptor with semantic object “ForecastDemand” and action “maintain”.
  2. Under “sap.ui.generic.app”, just under Object Page definition add descriptor “navigation” with “target” as alias defined in step 1. (I have used alias as ” ForecastDemand-maintain” but you can use a name other than semantic object and action.)

When I click on the line in Material List it calls Maintain PIRs app and automatically passes Product and Plant from the line I’ve clicked on.

These values are passed automatically because in both applications fields are referred as “Product” and “Plant”.

Reference: SAPUI5 SDK – Demo Kit: Configuring Navigation

3 Replies to “SAP Fiori Elements List Report – Configuring List Navigation

  1. Hi, Thanks for nice detailed tutorial.
    I’m trying this example on ECC HANA DB 2.0 , Value help is not working for me.
    Firstly it was not showing ‘@Consumption.valueHelpDefinition’ on click on control space, then I copied from your code, CDS got activated but Value help is not working.
    below is the code for Plant –
    @Search.defaultSearchElement: true
    @Search.fuzzinessThreshold: 0.8
    @ObjectModel.text.element: ‘PlantName’
    @UI.selectionField: [{ position: 10 }]
    @UI.lineItem: [{ position: 10 }]
    @UI.identification: [{ position: 10 }]
    @Consumption.valueHelpDefinition: [{
    entity: { name: ‘C_Plantvaluehelp’,
    element: ‘Plant’ } }]
    key marc.werks as Plant,
    _Plant.PlantName,

    And I’m getting Second Facet in Fiori application.

  2. Hello Pawan Kesari,

    Its a Nice Blog. Did you ever used #WITH_NAVIGATION_PATH annotation in List View Report of CDS. I want to navigate from navigate internally from one entity to other entity.

    I followed this link https:
    //help.sap.com/doc/saphelp_nw75/7.5.5/de-DE/35/b83f14864a46a6a835cb39c59572ce/content.htm?loaded_from_frameset=true

    I have don e the necessary changes but it is not working. Could you pls help if you have already worked on it.

    Regards,
    Rajesh.

Leave a Reply