Technical Articles
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
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
Hi John,
Thanks for this wonderful post !!
Happy to know you found it useful 🙂
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?
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
Hello Appu John,
Did not understand from Where 'Customer' comes
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-
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
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