Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
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,
Emp.Employee,

@Semantics: {
text: true,
name.fullName: true
}
Emp.EmployeeFullName,

@Semantics: { telephone.type: [ #CELL ] }
Emp._WorkplaceAddress.MobilePhoneNumber,
@Semantics: { telephone.type: [ #WORK, #PREF ] }
Emp._WorkplaceAddress.PhoneNumber,
@Semantics.eMail.address: true
@Semantics:{ eMail.type: [ #WORK ] }
Emp._WorkplaceAddress.DefaultEmailAddress

// @Semantics.contact.photo: 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.name, @Semantics.telephone, @Semantics.email, @Semantics.contact 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'
empdet.EmployeeFullName,

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

@UI:{

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

_EmpContact

}

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

 

@UI:{

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

_EmpContact

_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'}]

}
_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.

@UI:{

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

_EmpContact

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 @Communication.contact 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: https://blogs.sap.com/2021/05/02/how-to-display-quick-view-in-the-table-column-using-cds-annotations...


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

 
7 Comments