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:
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.