Skip to Content
Technical Articles
Author's profile photo Appu John

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

 

 

 

 

 

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Devanshu Dubey
      Devanshu Dubey

      Hi John,

      Thanks for this wonderful post !!

      Author's profile photo Appu John
      Appu John
      Blog Post Author

      Happy to know you found it useful 🙂

      Author's profile photo Wanderson Carvalho dos Santos
      Wanderson Carvalho dos Santos

      Hi Appu John

       

      I have a requirement to change the App ID F2027 which is of the type SAP Fiori elements,
      In one of the screens, a field that is in a SmartTable, has a navigation to the details screen.
      The requirement I have is to take that navigation off.

      Is this possible?

      Author's profile photo Bhavik Mehta
      Bhavik Mehta

      Hi Appu John,

      Thanks , this was really helpful. On question though how does the MORE LINK Navigation get enabled in quick view. Any help on the same.

       

      Thanks,

      Bhavik

      Author's profile photo Raghavendra L
      Raghavendra L

      Hello Appu John,

       

      Did not understand from Where 'Customer' comes

        @Consumption.semanticObject: 'Customer'

       

      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      Hi Appu John

      Thanks for nice blog. I have question - Do I need to create a Quick View application ? I already have another application which is List report application and Its not showing on Quick View type but Its redirecting on that application.

      Please Help.

       

      Thanks-

       

      Author's profile photo Thomas Knobloch
      Thomas Knobloch

      Hi John,

      for me it doesn't work. Is this also working for generated Fiori elements app based on RAP with OData V4? The property is not displayed as link in my app.

      Thanks and regards,

      Thomas

      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      Hi Thomas,

      For link issue you can try creating an Instance with semantic object in configuration and then use same semantic object in CDS view…

      although I have done this and getting link on table column but for me when I click on that link it’s opening another app and not opening it like quick view… there must be some steps which may be not documented here…

      will update here if it works for me somehow…

      Thanks-

      Abhishek