How to Display Quick View in The Table column with SmartLink navigation using CDS Annotations

Hi All ,

In this blog post, I will show you how I was able to get a QuickView for one of a table column field in my Fiori Element based List report application. Please note that I tested the below approach in an already deployed application. I was not able to test this in my WebIDE as @consumption.semanticObject annotation was not enabling the field as a link there.

I had a column called ‘Ship-to Party’ in my application where i wanted to show some additional information in the Quickview with SmartLink navigation enabled for navigating to other applications from the popover. in the end, you will be able to achieve a Quickview like below.

Step1: Create the CDS view to fetch the details which you need to show in Quick View.

@AbapCatalog.sqlViewName: 'ZAJSHPQV'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'ShipToParty Quick View'

define view ZAJShipToPartyQuickView
  as select from I_BusinessPartnerPopOver
{

       @UI.facet: [ {
                purpose:    #QUICK_VIEW,
                type:       #FIELDGROUP_REFERENCE,
                targetQualifier: 'ShipToPartyQV',
                label: 'Additional Details'
              }
            ]

  key  ShipToParty,

       BusinessPartnerUUID,
       @UI.fieldGroup: [{ qualifier:'ShipToPartyQV', position: 10}]
       @Semantics: {
       text: true,
       name.fullName: true
       }
       BusinessPartnerFullName,

       @Semantics.eMail.address: true
       @UI.fieldGroup: [{ qualifier:'ShipToPartyQV', position: 20}]
       @EndUserText.label: 'Email'
       EmailAddress,

       @UI.fieldGroup: [{ qualifier:'ShipToPartyQV', position: 30}]
       @EndUserText.label: 'Business Purpose Completed'
       IsBusinessPurposeCompleted,

       @UI.fieldGroup: [{ qualifier:'ShipToPartyQV', position: 40}]
       @EndUserText.label: 'City'
       CityName
}

Step 2:  first we will enable the SmartLink navigation for ship-to-party column. for this purpose will add @Consumption.semanticObject: ‘<Semantic_object_name>’ annotation for ShipToParty Field. we will specify the semantic object name of the target application

@AbapCatalog.sqlViewName: 'ZAJCSHPQV'
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Consumption view for sales order data'
@ObjectModel.usageType:{
  serviceQuality: #X,
  sizeCategory: #S,
  dataClass: #MIXED
}

@OData.publish: true

define view zaj_c_order_info
  as select from I_SalesOrderDetail

{
      @UI.lineItem:[{ label: 'Sales Order Number', position: 10 , importance: #HIGH }]
  key SalesOrder,
      SalesOrderType,

      @UI.lineItem:[{ label: 'Ship-To-Party', position: 20 , importance: #HIGH }]
      @UI.selectionField: [ { position: 20 } ]
      @Consumption.semanticObject: 'Customer'
      ShipToParty,

      @UI.lineItem:[{ label: 'CreatedBy', position: 20 , importance: #HIGH }]
      @UI.selectionField: [ { position: 30 } ]
      CreatedByUser,

      //Associations
      _SoldToPartyQuickView
}

specifying @Semantic.consumption will enable the ShipToParty field as Link. when the user will click on the link it will open a popup like below with the target application names.

Step 3 : Now to display the quick view details inside the popup we will add the association to ZAJShipToPartyQuickView in our main entity set.

define view zaj_c_order_info
  as select from I_SalesOrderDetail

  association [0..1] to ZAJShipToPartyQuickView as _ShipToPartyQuickView on $projection.ShipToParty =      _ShipToPartyQuickView.ShipToParty

{
   ....
   
      @UI.lineItem:[{ label: 'Ship-To-Party', position: 20 , importance: #HIGH }]
      @UI.selectionField: [ { position: 20 } ]
      @Consumption.semanticObject: 'Customer'
      @ObjectModel.foreignKey.association: '_ShipToPartyQuickView'
      ShipToParty,
  ......
   
   _ShipToPartyQuickView

}
 

one important thing to notice here is in the ON condition make sure you use the KEY field.

the annotation @ObjectModel.foreignKey.association will serve as a data provider for our Quickview here.

here we have used @odata.publish: true annotation to create a service. but, if you have a gateway project created for your application make sure u include the newly added association in your main entity set and regenerate the gateway project.

In case of @odata.publish: true , Once CDS is activated go the transaction /IWFND/MAINT_SERVICE and add the service which is generated  . more details can be found below

https://help.sap.com/viewer/cc0c305d2fab47bd808adcad3ca7ee9d/7.5.17/en-US/1b023c1cad774eeb8b85b25c86d94f87.html

Now refresh your application and you should see the Quickview in your application like below.

So now you learned How to Display Quick View in the Table column using CDS Annotations.

Thank You