Skip to Content
Technical Articles
Author's profile photo Pavan Kumar Reddy

Adding Contact Card Quick View to a Table

In this blog I am going to show how to add contact card Quick View to table line item or table field. You are going to achieve below result at the end of this blog:

For a list report of a column if contact details needs to be displayed in your requirements then this blog helps for you. It pretty easy to achieve this in simple 3 steps, All you need to know is  creation of basic CDS Views, Semantic and UI annotations, Smart templates for list report creation.

Lets start the development ūüôā

1. First step is to to create a CDS View with all the required fields you would like to display in the contact card quick view:

@AbapCatalog.sqlViewName: 'ZEMDET'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Contact'

define view zemp_contact_details
  as select distinct from I_Employee as Emp

  key    Emp.PersonnelNumber,

         @Semantics: {
         text: true,
         name.fullName: true

         @Semantics: { telephone.type:  [ #CELL ] }
         @Semantics: { telephone.type:  [ #WORK, #PREF ] }
         @Semantics.eMail.address: true
         @Semantics:{ eMail.type:  [ #WORK ] }

// true
//         Emp.EmployeeImageURL,


Here in the above CDS View ‘zemp_contact_details‘ I have added all the fields that I would like to display on the contact card quick view.

Annotations, @Semantics.telephone,, represents vCard standard annotations. At run time these annotations are translated into OData annotation @Communication.Contact

For all the @Semantics vCard annotations refer below link:

Semantics Annotations

2. Next step is to create a consumption CDS View ZP_Contact_Facet which uses ‘zemp_contact_details‘ in the association.

@AbapCatalog.sqlViewName: 'ZCARCONT_RP'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@OData.publish: true

define view ZP_Contact_Facet
  as select from I_EmploymentManager as empdet
  association [0..1] to zemp_contact_details as _EmpContact on $projection.Employee = _EmpContact.Employee

      @EndUserText.label: 'ID'
  key empdet.EmploymentInternalID,
      @EndUserText.label: 'Name'
      @UI.lineItem:{ value: 'Employee' , label: 'Employee', position: 20 , importance: #HIGH }
      @UI.selectionField: [ { position: 20 } ]

              lineItem: {position: 20, importance: #HIGH, type: #AS_CONTACT, label:'Consultant Name', value: '.'}


In the above consumption view association is done to zemp_contact_details. This association ‘_EmpContact‘ is important to achieve the contact card.



lineItem: {position: 20, importance: #HIGH, type: #AS_CONTACT, label:’Consultant Name’, value: ‘.’}


_EmpContact association is exposed and @UI.lineitem  annotation represent an ordered collection of data fields that is used to represent data from multiple data instances in a table or a list. Here in our view Employee and _EmpContact is represented as data fields for table.

if you see type: #AS_CONTACT refers exposed association as Contact Card and Maps to DataFieldForAnnotation at runtime. i.e it converts DataField to DataFieldForAnnotation for lineitem.

DataFieldForAnnotation is used to refer to other annotations using the Edm.AnnotationPath abstract type. The annotation path must end in vCard.Address or UI.DataPoint.

When you use this type, you can use the following elements:

  • label
  • value

In our view¬†label:’Consultant Name’, value: ‘.’ is used. ¬†label Consultant Name is label for¬†DataFieldForAnnotation, Value:’.’ refers to association _EmpContact which has fullname, telephone, email fields. These fields appears in the contact card as Quick View.

If you want to display contact card quick view in Object page for a field in general information then use below annotation:

 @UI: {
        fieldGroup: [{ qualifier: 'AdminData', importance: #HIGH,position: 20, label: 'Created By', type: #AS_CONTACT, value: '_UserCreatedBy'}]


above annotation UI.fieldgroup is used for displaying fields in general information of Object Page.¬† “_UserCreatedBy” is association from which created by field will get contact card quick view.

Value: ‘_UserCreatedBy’¬†refers to association¬†_UserCreatedBy¬†which has fullname, telephone, email etc fields of employee.

Annotation @OData.publish: true is used for publishing the service. See my previous blog expose cds view as OData service which shows how to activate the service.

Once service is activated then you can open the service as below :

ZP_CONTACT_FACET_CDS is the OData Service created for me by the framework on activation of CDS View, which needs to consumed in the front end. It has entitiy sets ZP_Contact_Facet , zemp_contact_details as shown below:

3. Next step is to create a List Report UI by consuming the generated OData Service

Open WebIDE and create a new project form template:

Select List report Smart template Application and Click on Next :

Give project information as shown below:

In the Service Catalog give the Backend system information and OData Service ZP_CONTACT_FACET_CDS created previously and click on next

Annotation file is automatically generated when CDS Consumption view is activated, it has all the UI annotations which we gave in CDS View. Click on next to select the OData entity

Select ZP_Contact_Facet as OData Collection and click on Finish

Now project ZContact_Card is created in the work-space, Run the application as shown below: Select flpSandbox.html if it prompts to choose.

Now you will get a Tile click on it to open the application, if it ask for credentials for authentication then give the backend system credentials where Odata service is generated.

Application result does not have Consultant name¬†it has only Employee field…. Surprised ūüėČ

Here is the answer, Contact Card Quick View is supported in latest SAPUI5 releases i.e 1.46 and above. To run the application in the latest release or the latest version you need to configure some settings as shown below:

Select project and right click to get the menu bar where you need to select run configurations and configure the settings as shown below:

Click on Save and Run button to run the application in the latest version then you will get the expected result:

Now when you click on consultant name contact card quick view is shown with Name, email, contact information.

More explanation for step 2 and Step1.

As discussed in step2, I am going to explain here how below annotations are converted in the front end.


lineItem: {position: 20, importance: #HIGH, type: #AS_CONTACT, label:’Consultant Name’, value: ‘.’}


When you expand the project and click on annotations.xml file

you will get Annotation Modeler screen where you can see external annotations i.e UI annotations for CDS View ZP_Contact_Facet , how they are converted at front end as shown below:

As explained in the step2 lineitem has one DataField and one DataFieldforAnnotation. DataFieldForAnnotation has Label Consultant Name and Target for it is mandatory i.e mapped to to_EmpContact association and has as Annotation.

When you change the OData Entity to zemp_contact_details  you can see how semantic annotation are converted at the front end :

As discussed in  Step 1 @Semantic annotations are converted into @Communication annotations at the front end.

If you are trying to display quick view in RAP based application or in other way if you like to enable the quickview you can also refer below blog:

Your suggestions, feedback, comments on this blog are most welcome.


Assigned Tags

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


      Very nice blog, thanks for sharing ūüôā

      I did your steps, and unfortunately the result is a column blank :

      I think everything is OK when I look at the annotations :

      And the Contact card :

      So I think my CDSs are OK. I'm on SAPui5 1.50 :


      What do you think it is ?

      Kind regards,


      Author's profile photo Pavan Kumar Reddy
      Pavan Kumar Reddy
      Blog Post Author

      Hi Joseph,


      In cds view  'ZJBE_I_BSID_01'  can you change below annotation as below:


      lineItem: {position: 20, importance: #HIGH, type: #AS_CONTACT, label:'Client SAPHIR', value:'.' }

      Instead of value:'_Customer'  can you change it to value:'.'  and try.



      Author's profile photo Joseph BERTHE
      Joseph BERTHE


      I did it, but the result is the same.



      Author's profile photo Joseph BERTHE
      Joseph BERTHE

      Hey hey... I got the trick ūüôā

      In the Communication.Contact, the fn wasn't here. In the CDS I put name.familyName and not name.fullname.

      Now it is working fine ūüôā



      Author's profile photo Pavan Kumar Reddy
      Pavan Kumar Reddy
      Blog Post Author

      great ūüôā¬† yes it should be¬†name.fullName: true

      Author's profile photo Lokesh Jadhav
      Lokesh Jadhav

      Hi ,


      I tried the above approach but my contact card doesnot show country which i have in my example and I have used true annotation.

      My contact card quick view only display fullname and email.

      Author's profile photo Josef Vogler
      Josef Vogler

      Hello Pavan,

      is it possible that the contact card quick view causes another roundtrip or batch call, respectively? If yes, how could we avoid it?

      Best Regards,